ui_design v2: redesign of all 5 pages

ui_design v2: tactical-ops redesign of all 5 pages

Two parallel takes on visual polish for flights, annotations, dataset
explorer, admin, and settings.

- v2/plugin/ — self-contained HTML produced via the frontend-design
  plugin, adheres to v2/plugin/_design_system.md..
- v2/stitch/ — Google Stitch MCP exports against the same design
  system.

IA from the original wireframes in _docs/ui_design/ is preserved
verbatim — this pass is visual only.

_docs/ui_design/v2/README.md

@@ -0,0 +1,85 @@
+# Azaion UI – v2 Visual-Polish Redesign
+
+Two parallel takes on the same brief: refresh the original wireframes in [_docs/ui_design/](../) without touching their information architecture. The originals stay as the source of truth for **what** each page contains; v2 explores **how** it could look.
+
+## Aesthetic direction
+
+**"Tactical Operations Console"** — defense-grade mission control, leaning on the visual language of air-traffic control consoles and Bloomberg-style trader terminals. Dense, technical, deliberate. The drone-annotation domain rewards this register more than the generic dark-SaaS look the originals defaulted to.
+
+Shared design tokens (palette, typography, form language) are spelled out in [plugin/_design_system.md](plugin/_design_system.md). The Stitch project uses the same tokens in its design-system asset.
+
+| Token | Value |
+|-------|-------|
+| Page bg | `#0A0D10` |
+| Panels | `#13171C` |
+| Raised | `#1A1F26` |
+| Hairlines | `#252B34` |
+| Amber accent | `#FF9D3D` |
+| Cyan accent | `#36D6C5` |
+| Red accent | `#FF4756` |
+| Green accent | `#3DDC84` |
+| Blue accent | `#4E9EFF` |
+| Display / mono | JetBrains Mono |
+| Body | IBM Plex Sans |
+
+## Versions
+
+### plugin/ — frontend-design plugin
+
+Self-contained HTML, double-click to view. Tailwind via CDN + an inline `<style>` block per page for design tokens, fonts, and the corner-bracket utility. These are the version closest to the brief — every spec point in the design system is honored.
+
+| Page | File |
+|------|------|
+| Flights | [plugin/flights.html](plugin/flights.html) |
+| Annotations | [plugin/annotations.html](plugin/annotations.html) |
+| Dataset Explorer | [plugin/dataset_explorer.html](plugin/dataset_explorer.html) |
+| Admin | [plugin/admin.html](plugin/admin.html) |
+| Settings | [plugin/settings.html](plugin/settings.html) |
+
+Signature moves:
+- Amber 8px **corner brackets** on every major panel — the through-line that ties the whole system together.
+- ALL-CAPS mono micro-labels with `0.12em` letter-spacing.
+- Tabular numerics everywhere; lat/lon/sat/port/frame-counts/percentages all align.
+- Real inline-SVG NATO affiliation icons on the Annotations canvas (rectangle / diamond / quatrefoil) — not text glyphs.
+- Annotation list rows carry per-row class-color gradient stripes.
+- GPS-Denied mode flips the panel framing from amber to red 2px brackets + a pulsing "GPS-DENIED ACTIVE" badge.
+
+### stitch/ — Google Stitch MCP
+
+Generated through Google's Stitch design tool against the same design-system asset (project ID `15028193902086176686`, design system `assets/6747203704700882150`). These ship as wider full-page renders (2560 × 2048) and use Stitch's component vocabulary — useful as an alternate take to A/B against the plugin version.
+
+| Page | File |
+|------|------|
+| Flights | [stitch/flights.html](stitch/flights.html) |
+| Annotations | [stitch/annotations.html](stitch/annotations.html) |
+| Dataset Explorer | [stitch/dataset_explorer.html](stitch/dataset_explorer.html) |
+| Admin | [stitch/admin.html](stitch/admin.html) |
+| Settings | [stitch/settings.html](stitch/settings.html) |
+
+**Stitch project URL**: open `projects/15028193902086176686` inside the Stitch web UI to view, edit, or re-export.
+
+## How to compare
+
+```
+# Originals
+_docs/ui_design/flights.html
+_docs/ui_design/annotations.html
+...
+
+# Plugin redesign
+_docs/ui_design/v2/plugin/flights.html
+_docs/ui_design/v2/plugin/annotations.html
+...
+
+# Stitch redesign
+_docs/ui_design/v2/stitch/flights.html
+...
+```
+
+Open the three side-by-side in a browser. The plugin version is the recommended baseline for adopting into the React app; the Stitch version is useful for client-facing concept presentations.
+
+## What's NOT in scope
+
+- No changes to React components in `src/`. These are static design references.
+- No backend / API changes.
+- No IA / interaction rework — only visual polish. If a page's layout in `README.md` says "left sidebar 250px + main + right sidebar 200px," v2 keeps that.

_docs/ui_design/v2/plugin/_design_system.md

@@ -0,0 +1,133 @@
+# Azaion Tactical Ops — Design System (Plugin Version)
+
+Shared aesthetic spec for every page in `_docs/ui_design/v2/plugin/`. **Every page must adhere to this contract.** If a page deviates from a token here, that's a bug.
+
+## Aesthetic
+
+Defense / mission-control console. Dense, technical, deliberate. Think air-traffic-control + military HUD + Bloomberg Terminal — never gamer-RGB, never consumer-glossy.
+
+## Palette (dark only, no light mode)
+
+```
+--surface-0:       #0A0D10   /* page bg */
+--surface-1:       #13171C   /* panels, sidebars */
+--surface-2:       #1A1F26   /* raised rows, hover */
+--surface-input:   #0A0D10   /* input fill, sits darker than the panel containing it */
+--border-hair:     #252B34   /* 1px borders, used everywhere */
+--border-raised:   #3B4451   /* used for active/focus 2px */
+--text-primary:    #E8ECF1
+--text-secondary:  #9AA4B2
+--text-muted:      #5B6573
+--accent-amber:    #FF9D3D   /* primary / brand / warnings */
+--accent-cyan:     #36D6C5   /* live data, friendly */
+--accent-red:      #FF4756   /* hostile, destructive, GPS-denied */
+--accent-green:    #3DDC84   /* validated, connected, ready */
+--accent-blue:     #4E9EFF   /* info, edited */
+```
+
+Class colors (used in detection-class swatches) stay as-is from README.md (`#FF0000`, `#00FF00`, `#0000FF`, `#FFFF00`, `#FF00FF`, `#00FFFF` etc.) — those are domain data, not theme.
+
+## Typography
+
+- Headline / display / micro-labels / numerics → **JetBrains Mono** (Google Fonts)
+- Body / general UI text → **IBM Plex Sans** (Google Fonts)
+- ALL-CAPS micro-labels: `font: 10px/1.4 'JetBrains Mono'; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary)`
+- Numerics: always `font-variant-numeric: tabular-nums`
+- Body default: `13px/1.5 'IBM Plex Sans'`, primary color
+- Page section heading: `11px` mono, uppercase, amber color
+
+Include the Google Fonts links in each `<head>`:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+```
+
+## Form language
+
+- 1px hairline borders everywhere; corners square or `border-radius: 2px` / `4px` max — never `rounded-full` outside of status dots and avatar.
+- Active panel borders use 2px in amber (`--accent-amber`) or cyan.
+- **Corner brackets** — the signature element. Frame *every* major panel/card with four 8px L-shaped brackets, drawn as two 1px lines per corner in amber (or in the panel-active color). Use this CSS helper:
+
+```css
+.bracket { position: relative; }
+.bracket::before, .bracket::after,
+.bracket > .br::before, .bracket > .br::after {
+  content: ''; position: absolute; width: 8px; height: 8px;
+  border-color: var(--accent-amber); border-style: solid; border-width: 0;
+}
+.bracket::before  { top: -1px; left:  -1px; border-top-width: 1px;    border-left-width: 1px;  }
+.bracket::after   { top: -1px; right: -1px; border-top-width: 1px;    border-right-width: 1px; }
+.bracket > .br::before { bottom: -1px; left:  -1px; border-bottom-width: 1px; border-left-width: 1px;  }
+.bracket > .br::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
+```
+
+then `<div class="bracket panel">…<span class="br"></span></div>`.
+
+- Subtle background grid (60px × 60px, 3% white) on map/canvas surfaces:
+
+```css
+background-image:
+  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+background-size: 60px 60px;
+```
+
+- Status pills: leading 6px dot + UPPERCASE 10px mono label, 1px border in status color, transparent fill, 2px radius.
+
+  ```html
+  <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+  ```
+
+- Live indicator: 6px dot in cyan or red, with `animation: pulse 1.6s ease-in-out infinite`.
+
+## Spacing
+
+- Base 4px.
+- Panel padding: 16px.
+- Form gap: 12px between fields.
+- Tight list row height: 28px (sidebars), 32px (tables).
+- Header bar height: 48px.
+
+## Components
+
+**Buttons**
+
+- Primary: `bg: amber; color: #0A0D10; border: 1px solid amber; padding: 6px 14px; font: 11px mono; letter-spacing: 0.08em; text-transform: uppercase`
+- Secondary: `bg: transparent; color: amber; border: 1px solid amber` (with hover → fill at 12% opacity)
+- Ghost: same as secondary but `border: 1px solid var(--border-hair); color: var(--text-secondary)`
+- Danger: red variant of primary
+- Icon button: 28×28, ghost styling
+
+**Inputs**
+
+- `bg: var(--surface-input); border: 1px solid var(--border-hair); border-radius: 2px; padding: 6px 10px; height: 32px; font: 12px 'IBM Plex Sans'; color: var(--text-primary)`
+- Focus: `border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber)`
+- Placeholder: `var(--text-muted)`
+
+**Tables**
+
+- No zebra stripes. Row separator = 1px hairline. Header row: 10px mono uppercase, secondary text. Hover row → `var(--surface-2)`.
+
+## Global header
+
+```
+[AZAION mark] [FLIGHT SELECTOR ▾] | FLIGHTS / ANNOTATIONS / DATASET / ADMIN     [user@x.com] [⚙] [⏻]
+```
+
+- Logo: amber, JetBrains Mono Bold, `tracking: 0.2em`, `font-size: 14px`.
+- Flight selector: 28px-tall pill with mono flight id + ▾ icon, 1px amber border, surface-1 fill.
+- Tab nav: each tab is a flat label with 2px bottom border in amber when active, no top-rounding, 12px sans.
+- Header bottom: 1px hairline.
+
+## Mobile bottom nav (optional, only if implementing responsive)
+
+Hide tab nav at `< 768px` and show a 56px fixed bottom bar with 5 icon+label items.
+
+## Don't
+
+- No purple gradients. No glassmorphism. No drop shadows over 4px blur.
+- No emoji used as functional UI. (Decorative readouts may use the bracket characters `⌐ ¬ ⌜ ⌝ ⌞ ⌟`.)
+- No rounded-full anywhere except status dots and avatar circle.
+- Don't change the IA / panel arrangement defined in `../../README.md` — this pass is visual polish only.

_docs/ui_design/v2/plugin/admin.html

@@ -0,0 +1,837 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AZAION // ADMIN — System Configuration</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --surface-0:     #0A0D10;
+    --surface-1:     #13171C;
+    --surface-2:     #1A1F26;
+    --surface-input: #0A0D10;
+    --border-hair:   #252B34;
+    --border-raised: #3B4451;
+    --text-primary:   #E8ECF1;
+    --text-secondary: #9AA4B2;
+    --text-muted:     #5B6573;
+    --accent-amber: #FF9D3D;
+    --accent-cyan:  #36D6C5;
+    --accent-red:   #FF4756;
+    --accent-green: #3DDC84;
+    --accent-blue:  #4E9EFF;
+  }
+
+  html, body { background: var(--surface-0); color: var(--text-primary); }
+  body {
+    font-family: 'IBM Plex Sans', system-ui, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
+    font-feature-settings: "ss01", "cv11";
+  }
+
+  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
+  .tnum { font-variant-numeric: tabular-nums; }
+
+  .micro {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    line-height: 1.4;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+  }
+
+  .sect-head {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--accent-amber);
+  }
+
+  /* Corner brackets */
+  .bracket { position: relative; }
+  .bracket::before, .bracket::after,
+  .bracket > .br::before, .bracket > .br::after {
+    content: ''; position: absolute; width: 8px; height: 8px;
+    border-color: var(--accent-amber); border-style: solid; border-width: 0;
+    pointer-events: none;
+  }
+  .bracket::before  { top: -1px; left:  -1px; border-top-width: 1px;    border-left-width: 1px;  }
+  .bracket::after   { top: -1px; right: -1px; border-top-width: 1px;    border-right-width: 1px; }
+  .bracket > .br::before { bottom: -1px; left:  -1px; border-bottom-width: 1px; border-left-width: 1px;  }
+  .bracket > .br::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
+
+  /* Subtle grid backdrop */
+  .grid-bg {
+    background-image:
+      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
+    background-size: 60px 60px;
+  }
+
+  /* Inputs */
+  .inp {
+    background: var(--surface-input);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    height: 32px;
+    padding: 6px 10px;
+    font: 12px 'IBM Plex Sans';
+    color: var(--text-primary);
+    outline: none;
+    width: 100%;
+  }
+  .inp:focus { border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber); }
+  .inp::placeholder { color: var(--text-muted); }
+  .inp-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
+
+  /* Buttons */
+  .btn {
+    display: inline-flex; align-items: center; gap: 6px;
+    height: 28px; padding: 0 12px;
+    font: 600 11px 'JetBrains Mono', monospace;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    border-radius: 2px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background-color .12s, color .12s, border-color .12s;
+    white-space: nowrap;
+  }
+  .btn-primary {
+    background: var(--accent-amber);
+    color: #0A0D10;
+    border-color: var(--accent-amber);
+  }
+  .btn-primary:hover { filter: brightness(1.08); }
+  .btn-secondary {
+    background: transparent;
+    color: var(--accent-amber);
+    border-color: var(--accent-amber);
+  }
+  .btn-secondary:hover { background: rgba(255,157,61,.12); }
+  .btn-ghost {
+    background: transparent;
+    color: var(--text-secondary);
+    border-color: var(--border-hair);
+  }
+  .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-raised); }
+  .btn-danger {
+    background: var(--accent-red);
+    color: #0A0D10;
+    border-color: var(--accent-red);
+  }
+
+  /* Icon button */
+  .ibtn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 24px; height: 24px;
+    border: 1px solid transparent;
+    border-radius: 2px;
+    color: var(--text-muted);
+    background: transparent;
+    cursor: pointer;
+    transition: color .1s, background .1s, border-color .1s;
+  }
+  .ibtn:hover { color: var(--text-primary); background: var(--surface-2); border-color: var(--border-hair); }
+  .ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,.08); }
+  .ibtn.edit:hover  { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,.08); }
+  .ibtn.cyan:hover  { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(54,214,197,.08); }
+
+  /* Header-scoped icon buttons override the smaller in-table variant */
+  header .ibtn {
+    width: 28px; height: 28px;
+    border: 1px solid var(--border-hair);
+    color: var(--text-secondary);
+  }
+  header .ibtn:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-raised); }
+  header .ibtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
+  header .ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,0.08); }
+
+  /* Pills */
+  .pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    height: 18px; padding: 0 8px;
+    font: 600 10px 'JetBrains Mono', monospace;
+    letter-spacing: 0.10em;
+    text-transform: uppercase;
+    border: 1px solid currentColor;
+    border-radius: 2px;
+    background: transparent;
+  }
+  .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+  .pill-green { color: var(--accent-green); }
+  .pill-red   { color: var(--accent-red); }
+  .pill-cyan  { color: var(--accent-cyan); }
+  .pill-amber { color: var(--accent-amber); }
+  .pill-blue  { color: var(--accent-blue); }
+  .pill-muted { color: var(--text-muted); }
+
+  /* Chip (role chips, type chips — solid filled, denser) */
+  .chip {
+    display: inline-flex; align-items: center; justify-content: center;
+    height: 18px; min-width: 60px; padding: 0 8px;
+    font: 600 10px 'JetBrains Mono', monospace;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    border-radius: 2px;
+  }
+  .chip-admin    { background: rgba(255,157,61,.16); color: var(--accent-amber); border: 1px solid rgba(255,157,61,.35); }
+  .chip-operator { background: rgba(78,158,255,.14); color: var(--accent-blue);  border: 1px solid rgba(78,158,255,.35); }
+  .chip-viewer   { background: rgba(154,164,178,.10); color: var(--text-secondary); border: 1px solid var(--border-hair); }
+
+  /* Type squares (P / C / F) */
+  .type-sq {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 16px; height: 16px;
+    border-radius: 2px;
+    font: 700 9px 'JetBrains Mono', monospace;
+    color: #0A0D10;
+    flex: none;
+  }
+
+  /* Color swatch */
+  .swatch {
+    display: inline-block; width: 12px; height: 12px;
+    border: 1px solid rgba(255,255,255,0.18);
+    border-radius: 1px;
+    flex: none;
+  }
+
+  /* Segmented control */
+  .seg { display: inline-flex; border: 1px solid var(--border-hair); border-radius: 2px; overflow: hidden; }
+  .seg-btn {
+    height: 30px; padding: 0 14px;
+    font: 600 10px 'JetBrains Mono', monospace;
+    letter-spacing: 0.10em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    background: var(--surface-input);
+    border-right: 1px solid var(--border-hair);
+    cursor: pointer;
+    transition: background .1s, color .1s;
+  }
+  .seg-btn:last-child { border-right: 0; }
+  .seg-btn:hover { color: var(--text-primary); }
+  .seg-btn.active {
+    background: var(--accent-amber);
+    color: #0A0D10;
+  }
+
+  /* Header bar */
+  .tab {
+    display: inline-flex; align-items: center;
+    height: 48px; padding: 0 14px;
+    font: 500 12px/1 'JetBrains Mono', monospace;
+    letter-spacing: 0.10em; text-transform: uppercase;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .tab:hover { color: var(--text-primary); }
+  .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
+
+  /* Table rows */
+  .row-hover:hover { background: var(--surface-2); }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 8px; height: 8px; }
+  ::-webkit-scrollbar-track { background: var(--surface-0); }
+  ::-webkit-scrollbar-thumb { background: #1f2630; border-radius: 2px; }
+  ::-webkit-scrollbar-thumb:hover { background: #2a323e; }
+
+  /* Star button */
+  .star { color: var(--accent-amber); }
+  .star-off { color: var(--text-muted); }
+
+  /* Pulse for live dot */
+  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
+  .live { animation: pulse 1.6s ease-in-out infinite; }
+
+  /* Reveal-on-hover */
+  .row-hover .reveal { opacity: 0; transition: opacity .12s; }
+  .row-hover:hover .reveal { opacity: 1; }
+
+  /* Card panel base */
+  .panel {
+    background: var(--surface-1);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+  }
+
+  /* Help hint under labels */
+  .hint { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
+
+  /* tabular numbers in tables */
+  table.tabular td, table.tabular th { font-variant-numeric: tabular-nums; }
+
+  /* keep selects matching inp */
+  select.inp { appearance: none; -webkit-appearance: none; background-image:
+    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
+    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
+    background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+    padding-right: 28px;
+  }
+</style>
+</head>
+<body class="h-screen flex flex-col overflow-hidden">
+
+<!-- ========== GLOBAL HEADER ========== -->
+<header class="flex items-center px-4 gap-3 border-b" style="background: var(--surface-1); border-color: var(--border-hair); height: 48px;">
+  <span class="mono font-bold" style="color: var(--accent-amber); letter-spacing: 0.2em; font-size: 14px;">AZAION</span>
+
+  <span class="micro" style="color: var(--text-muted);">//</span>
+
+  <button class="inline-flex items-center gap-2 mono" style="height: 28px; padding: 0 10px; background: var(--surface-1); border: 1px solid var(--accent-amber); border-radius: 2px; font-size: 11px; letter-spacing: 0.10em;">
+    <span class="dot live" style="display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);"></span>
+    <span style="color: var(--text-primary);">FL-03</span>
+    <span style="color: var(--text-secondary); font-size: 10px;">▾</span>
+  </button>
+
+  <nav class="flex items-center self-stretch ml-3">
+    <a href="flights.html"          class="tab">Flights</a>
+    <a href="annotations.html"      class="tab">Annotations</a>
+    <a href="dataset_explorer.html" class="tab">Dataset</a>
+    <a href="#"                     class="tab active">Admin</a>
+  </nav>
+
+  <div class="flex items-center gap-2 ml-auto micro">
+    <span class="dot live" style="display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);"></span>
+    <span style="color: var(--accent-cyan);">LINK</span>
+    <span style="color: var(--border-raised);">|</span>
+    <span style="color: var(--text-secondary); text-transform: none; letter-spacing: 0;">user@azaion.com</span>
+    <span style="color: var(--border-raised); margin: 0 4px;">|</span>
+    <a href="#" class="ibtn" title="Settings">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+    </a>
+    <a href="#" class="ibtn danger" title="Sign out">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+    </a>
+  </div>
+</header>
+
+<!-- ========== MAIN LAYOUT ========== -->
+<main class="flex flex-1 overflow-hidden" style="background: var(--surface-0);">
+
+  <!-- ============ LEFT PANEL: DETECTION CLASSES (340px) ============ -->
+  <aside class="shrink-0 flex flex-col" style="width: 340px; background: var(--surface-1); border-right: 1px solid var(--border-hair);">
+
+    <div class="px-4 pt-4 pb-3 flex items-center justify-between border-b" style="border-color: var(--border-hair);">
+      <div class="flex items-center gap-2">
+        <span class="sect-head">DETECTION CLASSES</span>
+        <span class="mono tnum" style="font-size: 10px; color: var(--text-muted);">[19]</span>
+      </div>
+    </div>
+
+    <!-- Search + Add -->
+    <div class="px-4 py-3 flex items-center gap-2 border-b" style="border-color: var(--border-hair);">
+      <div class="relative flex-1">
+        <svg class="absolute left-2 top-1/2 -translate-y-1/2" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--text-muted);"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input type="text" placeholder="Search class…" class="inp" style="padding-left: 26px; height: 28px; font-size: 11px;">
+      </div>
+      <button class="btn btn-primary">
+        <span>+ ADD</span>
+      </button>
+    </div>
+
+    <!-- Table -->
+    <div class="flex-1 overflow-y-auto">
+      <table class="w-full tabular">
+        <thead class="sticky top-0" style="background: var(--surface-1);">
+          <tr style="border-bottom: 1px solid var(--border-hair);">
+            <th class="text-left px-3 py-2 micro" style="width: 36px;">#</th>
+            <th class="text-left px-2 py-2 micro">Name</th>
+            <th class="text-center px-2 py-2 micro" style="width: 30px;">Hex</th>
+            <th class="text-right px-3 py-2 micro" style="width: 60px;">Ops</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Row template -->
+          <!-- 0 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">00</td>
+            <td class="px-2"><span style="font-size: 12px;">ArmorVehicle</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #FF0000;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit" title="Edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger" title="Delete"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 1 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">01</td>
+            <td class="px-2"><span style="font-size: 12px;">Truck</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #00FF00;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 2 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">02</td>
+            <td class="px-2"><span style="font-size: 12px;">Vehicle</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #0000FF;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 3 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">03</td>
+            <td class="px-2"><span style="font-size: 12px;">Artillery</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #FFFF00;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 4 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">04</td>
+            <td class="px-2"><span style="font-size: 12px;">Shadow</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #FF00FF;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 5 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">05</td>
+            <td class="px-2"><span style="font-size: 12px;">Trenches</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #00FFFF;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 6 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">06</td>
+            <td class="px-2"><span style="font-size: 12px;">MilitaryMan</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #188021;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 7 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">07</td>
+            <td class="px-2"><span style="font-size: 12px;">TyreTracks</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #800000;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 8 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">08</td>
+            <td class="px-2"><span style="font-size: 12px;">AdditionArmoredTank</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #008000;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 9 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">09</td>
+            <td class="px-2"><span style="font-size: 12px;">Smoke</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #000080;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 10 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">10</td>
+            <td class="px-2"><span style="font-size: 12px;">Plane</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #4060FF;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 11 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">11</td>
+            <td class="px-2"><span style="font-size: 12px;">Moto</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #808000;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 12 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">12</td>
+            <td class="px-2"><span style="font-size: 12px;">CamouflageNet</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #800080;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 13 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">13</td>
+            <td class="px-2"><span style="font-size: 12px;">CamouflageBranches</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #2F4F4F;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 14 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">14</td>
+            <td class="px-2"><span style="font-size: 12px;">Roof</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #1E90FF;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 15 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">15</td>
+            <td class="px-2"><span style="font-size: 12px;">Building</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #FFB6C1;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 16 — inline edit example -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--accent-amber); height: 32px; background: rgba(255,157,61,.06);">
+            <td class="px-3 mono tnum" style="color: var(--accent-amber); font-size: 12px;">16</td>
+            <td class="px-2">
+              <input type="text" value="Caponier" class="inp inp-mono" style="height: 22px; padding: 0 6px; font-size: 11px;">
+            </td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #C04060; box-shadow: 0 0 0 1px var(--accent-amber);"></span></td>
+            <td class="px-3 text-right">
+              <span class="inline-flex gap-1">
+                <button class="ibtn cyan" title="Save"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="20 6 9 17 4 12"/></svg></button>
+                <button class="ibtn" title="Cancel"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 17 -->
+          <tr class="row-hover" style="border-bottom: 1px solid var(--border-hair); height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">17</td>
+            <td class="px-2"><span style="font-size: 12px;">Ammo</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #33658A;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+          <!-- 18 -->
+          <tr class="row-hover" style="height: 32px;">
+            <td class="px-3 mono tnum" style="color: var(--text-muted); font-size: 12px;">18</td>
+            <td class="px-2"><span style="font-size: 12px;">Protect.Struct</span></td>
+            <td class="px-2 text-center"><span class="swatch" style="background: #969647;"></span></td>
+            <td class="px-3 text-right">
+              <span class="reveal inline-flex gap-1">
+                <button class="ibtn edit"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+                <button class="ibtn danger"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </aside>
+
+  <!-- ============ CENTER COLUMN ============ -->
+  <section class="flex-1 overflow-y-auto grid-bg">
+    <div class="max-w-[920px] mx-auto p-6 space-y-6">
+
+      <!-- ===== AI RECOGNITION SETTINGS ===== -->
+      <div>
+        <div class="flex items-end justify-between mb-3">
+          <div>
+            <div class="sect-head">AI RECOGNITION ENGINE</div>
+            <div class="hint mt-1">Detection model runtime parameters. Applied per-flight, hot-reloaded.</div>
+          </div>
+          <div class="flex items-center gap-2 micro">
+            <span style="color: var(--text-muted);">MODEL</span>
+            <span class="mono tnum" style="color: var(--text-primary);">YOLOV8-X · CKPT-241</span>
+            <span class="pill pill-cyan"><span class="dot live"></span>LOADED</span>
+          </div>
+        </div>
+
+        <div class="bracket panel p-5">
+          <span class="br"></span>
+
+          <div class="grid grid-cols-3 gap-x-6 gap-y-4">
+            <!-- Frames -->
+            <div>
+              <label class="micro block mb-1">Frames To Recognize</label>
+              <div class="hint mb-2">Number of consecutive frames the model averages before emitting a detection.</div>
+              <div class="flex items-stretch gap-2">
+                <input class="inp inp-mono" value="4" style="text-align: right; width: 88px;">
+                <div class="flex flex-col" style="border: 1px solid var(--border-hair); border-radius: 2px;">
+                  <button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input); border-bottom: 1px solid var(--border-hair);">▲</button>
+                  <button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input);">▼</button>
+                </div>
+                <span class="micro self-center" style="color: var(--text-muted);">FR</span>
+              </div>
+            </div>
+
+            <!-- Seconds -->
+            <div>
+              <label class="micro block mb-1">Min Seconds Between</label>
+              <div class="hint mb-2">Cooldown gap between successive inference calls on the same video stream.</div>
+              <div class="flex items-stretch gap-2">
+                <input class="inp inp-mono" value="2" style="text-align: right; width: 88px;">
+                <div class="flex flex-col" style="border: 1px solid var(--border-hair); border-radius: 2px;">
+                  <button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input); border-bottom: 1px solid var(--border-hair);">▲</button>
+                  <button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input);">▼</button>
+                </div>
+                <span class="micro self-center" style="color: var(--text-muted);">SEC</span>
+              </div>
+            </div>
+
+            <!-- Confidence -->
+            <div>
+              <label class="micro block mb-1">Min Confidence</label>
+              <div class="hint mb-2">Detections below this threshold are discarded before reaching the canvas.</div>
+              <div class="flex items-stretch gap-2">
+                <input class="inp inp-mono" value="25" style="text-align: right; width: 88px;">
+                <div class="flex flex-col" style="border: 1px solid var(--border-hair); border-radius: 2px;">
+                  <button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input); border-bottom: 1px solid var(--border-hair);">▲</button>
+                  <button class="mono" style="width: 24px; height: 15px; font-size: 9px; color: var(--text-secondary); background: var(--surface-input);">▼</button>
+                </div>
+                <span class="micro self-center" style="color: var(--text-muted);">%</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- footer / telemetry -->
+          <div class="mt-5 pt-4 flex items-center justify-between" style="border-top: 1px dashed var(--border-hair);">
+            <div class="flex items-center gap-5 micro">
+              <span style="color: var(--text-muted);">LAST RUN <span class="mono tnum" style="color: var(--text-secondary);">11:43:09Z</span></span>
+              <span style="color: var(--text-muted);">FRAMES <span class="mono tnum" style="color: var(--text-secondary);">14,228</span></span>
+              <span style="color: var(--text-muted);">AVG CONF <span class="mono tnum" style="color: var(--accent-green);">71.4%</span></span>
+            </div>
+            <div class="flex items-center gap-2">
+              <button class="btn btn-ghost">RESET</button>
+              <button class="btn btn-primary">APPLY</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ===== GPS DEVICE SETTINGS ===== -->
+      <div>
+        <div class="flex items-end justify-between mb-3">
+          <div>
+            <div class="sect-head">GPS DEVICE LINK</div>
+            <div class="hint mt-1">Ground-station receiver feeding the GPS-Denied correction pipeline.</div>
+          </div>
+          <div class="flex items-center gap-2 micro">
+            <span style="color: var(--text-muted);">SOCKET</span>
+            <span class="mono tnum" style="color: var(--text-primary);">UDP/192.168.1.100:9001</span>
+            <span class="pill pill-green"><span class="dot"></span>CONNECTED</span>
+          </div>
+        </div>
+
+        <div class="bracket panel p-5">
+          <span class="br"></span>
+
+          <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+            <!-- Address -->
+            <div>
+              <label class="micro block mb-1">Device Address</label>
+              <div class="hint mb-2">IPv4 endpoint or hostname of the GPS receiver bridge.</div>
+              <input class="inp inp-mono" value="192.168.1.100" placeholder="0.0.0.0">
+            </div>
+
+            <!-- Port -->
+            <div>
+              <label class="micro block mb-1">Device Port</label>
+              <div class="hint mb-2">UDP port the receiver streams NMEA sentences on.</div>
+              <input class="inp inp-mono" value="9001" placeholder="9001" style="text-align: right;">
+            </div>
+          </div>
+
+          <!-- Protocol — segmented -->
+          <div class="mt-5">
+            <label class="micro block mb-1">Protocol</label>
+            <div class="hint mb-2">Wire format negotiated with the receiver. Switch only when the device is offline.</div>
+            <div class="seg">
+              <button class="seg-btn active">NMEA</button>
+              <button class="seg-btn">UBX</button>
+              <button class="seg-btn">MAVLINK</button>
+            </div>
+          </div>
+
+          <!-- footer -->
+          <div class="mt-5 pt-4 flex items-center justify-between" style="border-top: 1px dashed var(--border-hair);">
+            <div class="flex items-center gap-5 micro">
+              <span style="color: var(--text-muted);">FIX <span class="mono tnum" style="color: var(--accent-green);">3D · 11 SAT</span></span>
+              <span style="color: var(--text-muted);">HDOP <span class="mono tnum" style="color: var(--text-secondary);">0.82</span></span>
+              <span style="color: var(--text-muted);">LAST PKT <span class="mono tnum" style="color: var(--text-secondary);">+12ms</span></span>
+            </div>
+            <div class="flex items-center gap-2">
+              <button class="btn btn-ghost">PING</button>
+              <button class="btn btn-secondary">RECONNECT</button>
+              <button class="btn btn-primary">APPLY</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- ============ RIGHT PANEL: DEFAULT AIRCRAFTS (280px) ============ -->
+  <aside class="shrink-0 flex flex-col" style="width: 280px; background: var(--surface-1); border-left: 1px solid var(--border-hair);">
+
+    <div class="px-4 pt-4 pb-3 flex items-center justify-between border-b" style="border-color: var(--border-hair);">
+      <div class="flex items-center gap-2">
+        <span class="sect-head">DEFAULT AIRCRAFTS</span>
+      </div>
+      <span class="mono tnum" style="font-size: 10px; color: var(--text-muted);">[06]</span>
+    </div>
+
+    <!-- legend -->
+    <div class="px-4 py-2.5 flex items-center gap-3 border-b micro" style="border-color: var(--border-hair); background: var(--surface-0);">
+      <div class="flex items-center gap-1.5">
+        <span class="type-sq" style="background: var(--accent-blue);">P</span>
+        <span style="color: var(--text-muted);">PLANE</span>
+      </div>
+      <div class="flex items-center gap-1.5">
+        <span class="type-sq" style="background: var(--accent-green);">C</span>
+        <span style="color: var(--text-muted);">COPTER</span>
+      </div>
+      <div class="flex items-center gap-1.5">
+        <span class="type-sq" style="background: var(--accent-amber);">F</span>
+        <span style="color: var(--text-muted);">FIXED-W</span>
+      </div>
+    </div>
+
+    <!-- list -->
+    <div class="flex-1 overflow-y-auto">
+
+      <!-- selected default -->
+      <div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair); background: var(--surface-2); border-left: 2px solid var(--accent-amber);">
+        <span class="type-sq" style="background: var(--accent-green);">C</span>
+        <div class="flex-1 min-w-0">
+          <div style="font-size: 12.5px;">DJI Mavic 3</div>
+          <div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-001 · 4K · 46MIN</div>
+        </div>
+        <button class="star" title="Default"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+      </div>
+
+      <div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair);">
+        <span class="type-sq" style="background: var(--accent-green);">C</span>
+        <div class="flex-1 min-w-0">
+          <div style="font-size: 12.5px;">Matrice 300 RTK</div>
+          <div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-002 · 4K · 55MIN</div>
+        </div>
+        <button class="reveal ibtn" title="Set default"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+        <span class="star-off" style="display: var(--show-fb, inline-block);"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
+      </div>
+
+      <div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair);">
+        <span class="type-sq" style="background: var(--accent-amber);">F</span>
+        <div class="flex-1 min-w-0">
+          <div style="font-size: 12.5px;">Leleka-100</div>
+          <div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-003 · HD · 180MIN</div>
+        </div>
+        <button class="reveal ibtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+        <span class="star-off"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
+      </div>
+
+      <div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair);">
+        <span class="type-sq" style="background: var(--accent-blue);">P</span>
+        <div class="flex-1 min-w-0">
+          <div style="font-size: 12.5px;">Fixed Wing Scout</div>
+          <div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-004 · 1080P · 95MIN</div>
+        </div>
+        <button class="reveal ibtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+        <span class="star-off"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
+        </div>
+
+      <div class="row-hover flex items-center gap-3 px-4 py-2.5" style="border-bottom: 1px solid var(--border-hair);">
+        <span class="type-sq" style="background: var(--accent-green);">C</span>
+        <div class="flex-1 min-w-0">
+          <div style="font-size: 12.5px;">Autel EVO II Pro</div>
+          <div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-005 · 6K · 40MIN</div>
+        </div>
+        <button class="reveal ibtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+        <span class="star-off"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
+      </div>
+
+      <div class="row-hover flex items-center gap-3 px-4 py-2.5">
+        <span class="type-sq" style="background: var(--accent-amber);">F</span>
+        <div class="flex-1 min-w-0">
+          <div style="font-size: 12.5px;">PD-2 Recon</div>
+          <div class="mono tnum" style="font-size: 10.5px; color: var(--text-muted);">AC-006 · HD · 600MIN</div>
+        </div>
+        <button class="reveal ibtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+        <span class="star-off"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
+      </div>
+
+    </div>
+
+    <!-- Add new -->
+    <div class="px-4 py-3 border-t" style="border-color: var(--border-hair); background: var(--surface-0);">
+      <button class="btn btn-secondary w-full justify-center">+ ADD AIRCRAFT</button>
+    </div>
+
+  </aside>
+
+</main>
+</body>
+</html>

_docs/ui_design/v2/plugin/annotations.html

@@ -0,0 +1,876 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>AZAION // Annotations</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --surface-0: #0A0D10;
+    --surface-1: #13171C;
+    --surface-2: #1A1F26;
+    --surface-input: #0A0D10;
+    --border-hair: #252B34;
+    --border-raised: #3B4451;
+    --text-primary: #E8ECF1;
+    --text-secondary: #9AA4B2;
+    --text-muted: #5B6573;
+    --accent-amber: #FF9D3D;
+    --accent-cyan: #36D6C5;
+    --accent-red: #FF4756;
+    --accent-green: #3DDC84;
+    --accent-blue: #4E9EFF;
+  }
+  html, body { background: var(--surface-0); color: var(--text-primary); }
+  body { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; }
+  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
+  .num  { font-variant-numeric: tabular-nums; }
+
+  .micro {
+    font: 500 10px/1.4 'JetBrains Mono', monospace;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+  }
+  .section-h {
+    font: 600 11px/1.4 'JetBrains Mono', monospace;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--accent-amber);
+  }
+
+  /* ── Corner brackets ──────────────────────────────────────── */
+  .bracket { position: relative; }
+  .bracket::before, .bracket::after,
+  .bracket > .br::before, .bracket > .br::after {
+    content: ''; position: absolute; width: 8px; height: 8px;
+    border-color: var(--accent-amber); border-style: solid; border-width: 0;
+    pointer-events: none;
+  }
+  .bracket::before  { top: -1px; left:  -1px; border-top-width: 1px;    border-left-width: 1px;  }
+  .bracket::after   { top: -1px; right: -1px; border-top-width: 1px;    border-right-width: 1px; }
+  .bracket > .br::before { bottom: -1px; left:  -1px; border-bottom-width: 1px; border-left-width: 1px;  }
+  .bracket > .br::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
+
+  .bracket-cyan::before, .bracket-cyan::after,
+  .bracket-cyan > .br::before, .bracket-cyan > .br::after { border-color: var(--accent-cyan); }
+
+  /* ── Canvas grid backdrop ─────────────────────────────────── */
+  .grid-bg {
+    background-color: #0E1216;
+    background-image:
+      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+  }
+  /* faux terrain wash so the canvas reads as imagery */
+  .terrain {
+    background-color: #11181B;
+    background-image:
+      radial-gradient(900px 500px at 30% 40%, rgba(48,72,60,0.45), transparent 60%),
+      radial-gradient(700px 400px at 75% 65%, rgba(40,52,68,0.35), transparent 65%),
+      radial-gradient(400px 300px at 60% 30%, rgba(82,64,40,0.18), transparent 70%),
+      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
+    background-size: auto, auto, auto, 48px 48px, 48px 48px;
+  }
+
+  /* ── Buttons ──────────────────────────────────────────────── */
+  .btn {
+    display: inline-flex; align-items: center; gap: 6px;
+    height: 28px; padding: 0 12px;
+    font: 600 11px/1 'JetBrains Mono', monospace;
+    letter-spacing: 0.08em; text-transform: uppercase;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    color: var(--text-secondary); background: transparent;
+    transition: background .12s, color .12s, border-color .12s;
+    cursor: pointer;
+  }
+  .btn:hover { background: var(--surface-2); color: var(--text-primary); }
+  .btn-amber {
+    background: var(--accent-amber); color: #0A0D10; border-color: var(--accent-amber);
+  }
+  .btn-amber:hover { filter: brightness(1.08); background: var(--accent-amber); color: #0A0D10; }
+  .btn-ghost-amber { color: var(--accent-amber); border-color: var(--accent-amber); }
+  .btn-ghost-amber:hover { background: rgba(255,157,61,0.12); color: var(--accent-amber); }
+  .btn-danger { color: var(--accent-red); border-color: rgba(255,71,86,0.4); }
+  .btn-danger:hover { background: rgba(255,71,86,0.12); color: var(--accent-red); border-color: var(--accent-red); }
+
+  .icobtn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    background: var(--surface-1); color: var(--text-secondary);
+    transition: background .12s, color .12s, border-color .12s;
+    cursor: pointer;
+  }
+  .icobtn:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-raised); }
+  .icobtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
+
+  /* ── Inputs ───────────────────────────────────────────────── */
+  .inp {
+    height: 28px; padding: 0 10px;
+    background: var(--surface-input); color: var(--text-primary);
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    font: 12px 'IBM Plex Sans', sans-serif; outline: none;
+    transition: border-color .12s, box-shadow .12s;
+  }
+  .inp::placeholder { color: var(--text-muted); }
+  .inp:focus { border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber); }
+
+  /* ── Pills ────────────────────────────────────────────────── */
+  .pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    height: 20px; padding: 0 8px; border-radius: 2px;
+    font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.1em;
+    text-transform: uppercase; border: 1px solid; background: transparent;
+  }
+  .pill .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
+  .pill-green { color: var(--accent-green); border-color: rgba(61,220,132,0.5); }
+  .pill-green .dot { background: var(--accent-green); }
+  .pill-cyan  { color: var(--accent-cyan);  border-color: rgba(54,214,197,0.5); }
+  .pill-cyan  .dot { background: var(--accent-cyan); }
+  .pill-amber { color: var(--accent-amber); border-color: rgba(255,157,61,0.5); }
+  .pill-amber .dot { background: var(--accent-amber); }
+  .pill-red   { color: var(--accent-red);   border-color: rgba(255,71,86,0.5); }
+  .pill-red   .dot { background: var(--accent-red); }
+
+  .live-dot {
+    width: 6px; height: 6px; border-radius: 999px;
+    background: var(--accent-cyan);
+    box-shadow: 0 0 0 0 rgba(54,214,197,0.5);
+    animation: pulse 1.6s ease-in-out infinite;
+    display: inline-block;
+  }
+  @keyframes pulse {
+    0%,100% { box-shadow: 0 0 0 0 rgba(54,214,197,0.5); }
+    50%     { box-shadow: 0 0 0 6px rgba(54,214,197,0); }
+  }
+
+  /* ── Media row ────────────────────────────────────────────── */
+  .media-row {
+    position: relative;
+    display: grid; grid-template-columns: 44px 1fr auto; gap: 8px;
+    align-items: center;
+    height: 32px; padding: 0 12px 0 14px;
+    border-bottom: 1px solid var(--border-hair);
+    cursor: pointer; user-select: none;
+  }
+  .media-row:hover { background: var(--surface-2); }
+  .media-row.active {
+    background: var(--surface-2);
+  }
+  .media-row.active::before {
+    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+    width: 2px; background: var(--accent-amber);
+  }
+  .chip {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 40px; height: 16px; border-radius: 2px;
+    font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: 0.1em;
+    border: 1px solid;
+  }
+  .chip-photo { color: var(--accent-cyan); border-color: rgba(54,214,197,0.45); background: rgba(54,214,197,0.06); }
+  .chip-video { color: var(--accent-amber); border-color: rgba(255,157,61,0.45); background: rgba(255,157,61,0.06); }
+
+  /* ── Class row ────────────────────────────────────────────── */
+  .class-row {
+    display: grid; grid-template-columns: 16px 1fr auto; gap: 10px;
+    align-items: center; height: 28px; padding: 0 12px;
+    border-bottom: 1px solid var(--border-hair);
+    cursor: pointer;
+  }
+  .class-row:hover { background: var(--surface-2); }
+  .class-row.active { background: var(--surface-2); }
+  .class-row.active .kbd { color: var(--accent-amber); border-color: var(--accent-amber); }
+  .swatch { width: 12px; height: 12px; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
+  .kbd {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 18px; height: 16px; padding: 0;
+    font: 600 10px/1 'JetBrains Mono', monospace;
+    color: var(--text-muted); border: 1px solid var(--border-hair); border-radius: 2px;
+    background: var(--surface-0);
+  }
+
+  /* ── Segmented control (PhotoMode) ────────────────────────── */
+  .seg {
+    display: grid; grid-template-columns: 1fr 1fr 1fr;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    background: var(--surface-input); overflow: hidden;
+  }
+  .seg button {
+    height: 28px;
+    font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.1em;
+    text-transform: uppercase; color: var(--text-secondary);
+    background: transparent; border-right: 1px solid var(--border-hair);
+    cursor: pointer; transition: background .12s, color .12s;
+  }
+  .seg button:last-child { border-right: 0; }
+  .seg button:hover { background: var(--surface-2); color: var(--text-primary); }
+  .seg button.active { background: var(--accent-amber); color: #0A0D10; }
+
+  /* ── Annotation list row (gradient stripe) ────────────────── */
+  .ann-row {
+    position: relative;
+    display: grid; grid-template-columns: 44px 1fr auto; gap: 8px;
+    align-items: center;
+    height: 36px; padding: 0 12px;
+    border-bottom: 1px solid var(--border-hair);
+    cursor: pointer;
+    background-color: var(--surface-1);
+  }
+  .ann-row::after {
+    content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
+    background-image: var(--row-grad, none);
+    pointer-events: none;
+  }
+  .ann-row > * { position: relative; z-index: 1; }
+  .ann-row:hover { background-color: var(--surface-2); }
+
+  /* ── Bounding box label chip ──────────────────────────────── */
+  .bbox-label {
+    display: inline-flex; align-items: center; gap: 6px;
+    height: 22px; padding: 0 8px;
+    font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em;
+    text-transform: uppercase;
+    border-radius: 2px;
+    background: rgba(10,13,16,0.92);
+    color: var(--text-primary);
+    border: 1px solid var(--border-hair);
+  }
+  .bbox-label .conf { color: var(--text-secondary); font-weight: 500; }
+
+  /* progress bar */
+  .scrub {
+    height: 4px; background: var(--surface-2); border: 1px solid var(--border-hair);
+    border-radius: 2px; position: relative; cursor: pointer;
+  }
+  .scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-amber); }
+  .scrub .head {
+    position: absolute; top: 50%; width: 2px; height: 10px; background: var(--accent-amber);
+    transform: translate(-50%, -50%);
+  }
+  .scrub .head-knob {
+    position: absolute; top: 50%; width: 12px; height: 12px;
+    background: var(--accent-amber);
+    border: 2px solid var(--surface-1);
+    border-radius: 999px;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 0 0 1px var(--accent-amber), 0 0 8px rgba(255,157,61,0.45);
+    z-index: 2;
+    cursor: grab;
+  }
+  .scrub .tick {
+    position: absolute; top: 50%; width: 1px; height: 6px; background: var(--text-muted);
+    transform: translateY(-50%);
+  }
+  .scrub .mark {
+    position: absolute; top: -3px; width: 2px; height: 10px;
+  }
+
+  /* volume */
+  .vol {
+    appearance: none; -webkit-appearance: none;
+    height: 2px; width: 72px; background: var(--border-hair); outline: none; border-radius: 2px;
+  }
+  .vol::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none;
+    width: 10px; height: 10px; background: var(--accent-amber); border-radius: 0; cursor: pointer;
+  }
+
+  /* Top header tabs */
+  .tab {
+    display: inline-flex; align-items: center;
+    height: 48px; padding: 0 14px;
+    font: 500 12px/1 'JetBrains Mono', monospace;
+    letter-spacing: 0.10em; text-transform: uppercase;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+  }
+  .tab:hover { color: var(--text-primary); }
+  .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
+
+  /* Vertical hairline column separator */
+  .vhair { width: 1px; background: var(--border-hair); }
+
+  /* Splitter affordance */
+  .split {
+    width: 4px; cursor: col-resize; background: transparent;
+    position: relative;
+  }
+  .split::after {
+    content: ''; position: absolute; left: 1px; top: 0; bottom: 0; width: 1px;
+    background: var(--border-hair);
+  }
+  .split:hover::after { background: var(--accent-amber); }
+
+  /* AI banner */
+  .ai-banner {
+    backdrop-filter: blur(6px);
+    background: rgba(10,13,16,0.78);
+    border: 1px solid rgba(54,214,197,0.4);
+  }
+
+  /* Crosshair on canvas */
+  .crosshair {
+    position: absolute; pointer-events: none;
+    width: 100%; height: 100%; left: 0; top: 0;
+    background:
+      linear-gradient(rgba(255,157,61,0.10), rgba(255,157,61,0.10)) no-repeat,
+      linear-gradient(rgba(255,157,61,0.10), rgba(255,157,61,0.10)) no-repeat;
+    background-size: 100% 1px, 1px 100%;
+    background-position: 0 62%, 47% 0;
+  }
+
+  /* Selected handles */
+  .handle {
+    position: absolute; width: 6px; height: 6px;
+    background: var(--accent-amber); border: 1px solid #0A0D10;
+  }
+
+  /* Icon buttons in header */
+  .ibtn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    color: var(--text-secondary); background: transparent;
+    transition: color .12s, border-color .12s, background-color .12s;
+    cursor: pointer;
+  }
+  .ibtn:hover { color: var(--text-primary); border-color: var(--border-raised); background: var(--surface-2); }
+  .ibtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
+  .ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,0.08); }
+
+  /* Scrollbars */
+  ::-webkit-scrollbar { width: 8px; height: 8px; }
+  ::-webkit-scrollbar-thumb { background: var(--border-hair); border-radius: 2px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--border-raised); }
+  ::-webkit-scrollbar-track { background: transparent; }
+</style>
+</head>
+<body class="h-screen overflow-hidden">
+
+<!-- ───────────────────────────────────────────── GLOBAL HEADER -->
+<header class="h-12 flex items-center px-4 gap-3 border-b" style="border-color: var(--border-hair); background: var(--surface-1);">
+  <span class="mono font-bold" style="color: var(--accent-amber); letter-spacing: 0.2em; font-size: 14px;">AZAION</span>
+
+  <span class="micro" style="color: var(--text-muted);">//</span>
+
+  <button class="inline-flex items-center gap-2 mono" style="height: 28px; padding: 0 10px; background: var(--surface-1); border: 1px solid var(--accent-amber); border-radius: 2px; font-size: 11px; letter-spacing: 0.10em;">
+    <span class="live-dot"></span>
+    <span style="color: var(--text-primary);">FL-03</span>
+    <span style="color: var(--text-secondary); font-size: 10px;">▾</span>
+  </button>
+
+  <nav class="flex items-center self-stretch ml-3">
+    <a href="flights.html"          class="tab">Flights</a>
+    <a href="annotations.html"      class="tab active">Annotations</a>
+    <a href="dataset_explorer.html" class="tab">Dataset</a>
+    <a href="admin.html"            class="tab">Admin</a>
+  </nav>
+
+  <div class="ml-auto flex items-center gap-2" style="font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase;">
+    <span class="live-dot"></span>
+    <span style="color: var(--accent-cyan);">LINK</span>
+    <span style="color: var(--border-raised);">|</span>
+    <span style="color: var(--text-secondary); text-transform: none; letter-spacing: 0;">user@azaion.com</span>
+    <span style="color: var(--border-raised); margin: 0 4px;">|</span>
+    <a href="settings.html" class="ibtn" title="Settings">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+    </a>
+    <a href="#" class="ibtn danger" title="Sign out">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+    </a>
+  </div>
+</header>
+
+<!-- ───────────────────────────────────────────── MAIN GRID -->
+<div class="flex" style="height: calc(100vh - 48px);">
+
+  <!-- ============ LEFT SIDEBAR ============ -->
+  <aside class="flex flex-col shrink-0" style="width: 264px; background: var(--surface-1);">
+
+    <!-- Media list -->
+    <div class="flex flex-col flex-1 min-h-0">
+      <div class="flex items-center justify-between px-3 h-9 border-b" style="border-color: var(--border-hair);">
+        <div class="flex items-center gap-2">
+          <span class="section-h">Media Files</span>
+          <span class="mono text-[10px]" style="color: var(--text-muted);">24</span>
+        </div>
+        <button class="icobtn" style="width:22px;height:22px;" title="Upload">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+        </button>
+      </div>
+
+      <div class="px-3 py-2 border-b" style="border-color: var(--border-hair);">
+        <div class="relative">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+               class="absolute left-2 top-1/2 -translate-y-1/2" style="color: var(--text-muted);">
+            <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>
+          </svg>
+          <input class="inp w-full pl-7" placeholder="filter by name…" />
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto min-h-0">
+        <div class="media-row">
+          <span class="chip chip-video">VIDEO</span>
+          <span class="truncate" style="color: var(--text-primary);">recon_north_03.mp4</span>
+          <span class="mono text-[11px]" style="color: var(--text-secondary);">04:12</span>
+        </div>
+        <div class="media-row active">
+          <span class="chip chip-video">VIDEO</span>
+          <span class="truncate" style="color: var(--text-primary); font-weight: 500;">strike_zone_07.mp4</span>
+          <span class="mono text-[11px]" style="color: var(--accent-amber);">02:47</span>
+        </div>
+        <div class="media-row">
+          <span class="chip chip-photo">PHOTO</span>
+          <span class="truncate" style="color: var(--text-primary);">orthoframe_0142.jpg</span>
+          <span class="mono text-[11px]" style="color: var(--text-muted);">—</span>
+        </div>
+        <div class="media-row">
+          <span class="chip chip-photo">PHOTO</span>
+          <span class="truncate" style="color: var(--text-primary);">orthoframe_0143.jpg</span>
+          <span class="mono text-[11px]" style="color: var(--text-muted);">—</span>
+        </div>
+        <div class="media-row">
+          <span class="chip chip-video">VIDEO</span>
+          <span class="truncate" style="color: var(--text-primary);">patrol_sector_b.mp4</span>
+          <span class="mono text-[11px]" style="color: var(--text-secondary);">11:08</span>
+        </div>
+        <div class="media-row">
+          <span class="chip chip-photo">PHOTO</span>
+          <span class="truncate" style="color: var(--text-primary);">orthoframe_0144.jpg</span>
+          <span class="mono text-[11px]" style="color: var(--text-muted);">—</span>
+        </div>
+        <div class="media-row">
+          <span class="chip chip-video">VIDEO</span>
+          <span class="truncate" style="color: var(--text-primary);">night_ir_pass_02.mp4</span>
+          <span class="mono text-[11px]" style="color: var(--text-secondary);">07:33</span>
+        </div>
+        <div class="media-row">
+          <span class="chip chip-photo">PHOTO</span>
+          <span class="truncate" style="color: var(--text-primary);">orthoframe_0145.jpg</span>
+          <span class="mono text-[11px]" style="color: var(--text-muted);">—</span>
+        </div>
+        <div class="media-row">
+          <span class="chip chip-video">VIDEO</span>
+          <span class="truncate" style="color: var(--text-primary);">corridor_east_01.mp4</span>
+          <span class="mono text-[11px]" style="color: var(--text-secondary);">03:51</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Detection classes -->
+    <div class="border-t" style="border-color: var(--border-hair);">
+      <div class="flex items-center justify-between px-3 h-9 border-b" style="border-color: var(--border-hair);">
+        <div class="flex items-center gap-2">
+          <span class="section-h">Detection Classes</span>
+          <span class="mono text-[10px]" style="color: var(--text-muted);">06</span>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-[28px_1fr_auto] px-3 h-6 items-center border-b" style="border-color: var(--border-hair);">
+        <span class="micro">#</span>
+        <span class="micro">NAME</span>
+        <span class="micro">KEY</span>
+      </div>
+
+      <div>
+        <div class="class-row active">
+          <span class="swatch" style="background:#FF0000"></span>
+          <span style="color: var(--text-primary); font-weight: 500;">MilVeh</span>
+          <span class="kbd">1</span>
+        </div>
+        <div class="class-row">
+          <span class="swatch" style="background:#00FF00"></span>
+          <span style="color: var(--text-primary);">Truck</span>
+          <span class="kbd">2</span>
+        </div>
+        <div class="class-row">
+          <span class="swatch" style="background:#0000FF"></span>
+          <span style="color: var(--text-primary);">Vehicle</span>
+          <span class="kbd">3</span>
+        </div>
+        <div class="class-row">
+          <span class="swatch" style="background:#FFFF00"></span>
+          <span style="color: var(--text-primary);">Artillery</span>
+          <span class="kbd">4</span>
+        </div>
+        <div class="class-row">
+          <span class="swatch" style="background:#FF00FF"></span>
+          <span style="color: var(--text-primary);">Shadow</span>
+          <span class="kbd">5</span>
+        </div>
+        <div class="class-row">
+          <span class="swatch" style="background:#00FFFF"></span>
+          <span style="color: var(--text-primary);">Trenches</span>
+          <span class="kbd">6</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- PhotoMode -->
+    <div class="p-3 border-t" style="border-color: var(--border-hair);">
+      <div class="flex items-center justify-between mb-2">
+        <span class="micro">PhotoMode</span>
+      </div>
+      <div class="seg">
+        <button class="active">Regular</button>
+        <button>Winter</button>
+        <button>Night</button>
+      </div>
+    </div>
+  </aside>
+
+  <div class="split"></div>
+
+  <!-- ============ MAIN VIEWER ============ -->
+  <main class="flex-1 flex flex-col min-w-0" style="background: var(--surface-0);">
+
+    <!-- Toolbar above canvas -->
+    <div class="h-9 flex items-center gap-3 px-4 border-b" style="border-color: var(--border-hair); background: var(--surface-1);">
+      <div class="flex items-center gap-2">
+        <span class="section-h">Canvas</span>
+        <span class="mono text-[11px]" style="color: var(--text-muted);">strike_zone_07.mp4</span>
+        <span class="mono text-[10px] px-1.5 py-0.5 border" style="color: var(--text-secondary); border-color: var(--border-hair);">1920×1080 · 30 FPS</span>
+      </div>
+      <div class="ml-auto flex items-center gap-2">
+        <span class="micro">ZOOM</span>
+        <span class="mono text-[11px]" style="color: var(--text-primary);">142%</span>
+        <span class="mx-2 h-4 w-px" style="background: var(--border-hair);"></span>
+        <span class="micro">CURSOR</span>
+        <span class="mono text-[11px]" style="color: var(--text-primary);">0.452, 0.318</span>
+        <span class="mx-2 h-4 w-px" style="background: var(--border-hair);"></span>
+      </div>
+    </div>
+
+    <!-- Canvas -->
+    <div class="flex-1 relative overflow-hidden">
+      <div class="absolute inset-0 terrain"></div>
+
+      <!-- AI Detection banner -->
+      <div class="absolute top-6 right-6 ai-banner rounded-[2px] px-3 py-2 w-72">
+        <div class="flex items-center gap-2 mb-1.5">
+          <span class="live-dot"></span>
+          <span class="micro" style="color: var(--accent-cyan);">AI DETECTION IN PROGRESS</span>
+          <span class="ml-auto mono text-[10px]" style="color: var(--text-muted);">3.2s</span>
+        </div>
+        <div class="mono text-[10px] space-y-0.5" style="color: var(--text-secondary);">
+          <div><span style="color: var(--text-muted);">[14:22:41]</span> tile 04/16 → 2 candidates</div>
+          <div><span style="color: var(--text-muted);">[14:22:42]</span> tile 05/16 → 1 candidate (conf 0.94)</div>
+          <div><span style="color: var(--accent-cyan);">[14:22:43]</span> filtering by min_conf=0.25…</div>
+        </div>
+        <div class="mt-2 h-[2px] bg-black/40 overflow-hidden">
+          <div style="height:100%; width: 38%; background: var(--accent-cyan);"></div>
+        </div>
+      </div>
+
+      <!-- ───────── Bounding Box 1: Friendly + Ready (cyan) ───────── -->
+      <div class="absolute" style="top: 28%; left: 18%; width: 22%; height: 28%;">
+        <div class="absolute inset-0 border-2" style="border-color: var(--accent-cyan); background: rgba(54,214,197,0.05);"></div>
+        <!-- corner brackets accent on the bbox -->
+        <div class="absolute -top-px -left-px w-2 h-2 border-t-2 border-l-2" style="border-color: var(--accent-cyan);"></div>
+        <div class="absolute -top-px -right-px w-2 h-2 border-t-2 border-r-2" style="border-color: var(--accent-cyan);"></div>
+        <div class="absolute -bottom-px -left-px w-2 h-2 border-b-2 border-l-2" style="border-color: var(--accent-cyan);"></div>
+        <div class="absolute -bottom-px -right-px w-2 h-2 border-b-2 border-r-2" style="border-color: var(--accent-cyan);"></div>
+        <!-- selection handles -->
+        <div class="handle" style="top: -3px; left: -3px;"></div>
+        <div class="handle" style="top: -3px; left: calc(50% - 3px);"></div>
+        <div class="handle" style="top: -3px; right: -3px;"></div>
+        <div class="handle" style="top: calc(50% - 3px); left: -3px;"></div>
+        <div class="handle" style="top: calc(50% - 3px); right: -3px;"></div>
+        <div class="handle" style="bottom: -3px; left: -3px;"></div>
+        <div class="handle" style="bottom: -3px; left: calc(50% - 3px);"></div>
+        <div class="handle" style="bottom: -3px; right: -3px;"></div>
+
+        <!-- Label -->
+        <div class="absolute" style="top: -26px; left: -2px;">
+          <div class="bbox-label" style="border-color: rgba(54,214,197,0.6);">
+            <!-- Friendly = rectangle (cyan) -->
+            <svg width="11" height="9" viewBox="0 0 11 9">
+              <rect x="0.5" y="0.5" width="10" height="8" fill="#87CEEB" stroke="#0A0D10" stroke-width="1"/>
+            </svg>
+            <!-- Ready = green dot -->
+            <span style="width:6px;height:6px;border-radius:999px;background:var(--accent-green);display:inline-block;"></span>
+            <span style="color: var(--accent-cyan);">VEHICLE</span>
+            <span class="conf">94.2%</span>
+          </div>
+        </div>
+
+        <!-- corner coords -->
+        <div class="absolute -bottom-4 right-0 mono text-[9px]" style="color: var(--text-muted);">0.40, 0.56</div>
+      </div>
+
+      <!-- ───────── Bounding Box 2: Hostile + Ready (red) ───────── -->
+      <div class="absolute" style="top: 44%; left: 56%; width: 18%; height: 24%;">
+        <div class="absolute inset-0 border-2" style="border-color: var(--accent-red); background: rgba(255,71,86,0.06);"></div>
+        <div class="absolute -top-px -left-px w-2 h-2 border-t-2 border-l-2" style="border-color: var(--accent-red);"></div>
+        <div class="absolute -top-px -right-px w-2 h-2 border-t-2 border-r-2" style="border-color: var(--accent-red);"></div>
+        <div class="absolute -bottom-px -left-px w-2 h-2 border-b-2 border-l-2" style="border-color: var(--accent-red);"></div>
+        <div class="absolute -bottom-px -right-px w-2 h-2 border-b-2 border-r-2" style="border-color: var(--accent-red);"></div>
+
+        <div class="absolute" style="top: -26px; left: -2px;">
+          <div class="bbox-label" style="border-color: rgba(255,71,86,0.6);">
+            <!-- Hostile = diamond (red, rotated square) -->
+            <svg width="11" height="11" viewBox="0 0 11 11">
+              <polygon points="5.5,0.7 10.3,5.5 5.5,10.3 0.7,5.5" fill="#FF0000" stroke="#0A0D10" stroke-width="1"/>
+            </svg>
+            <span style="width:6px;height:6px;border-radius:999px;background:var(--accent-green);display:inline-block;"></span>
+            <span style="color: var(--accent-red);">MILVEH</span>
+            <span class="conf">88.6%</span>
+          </div>
+        </div>
+        <div class="absolute -bottom-4 right-0 mono text-[9px]" style="color: var(--text-muted);">0.74, 0.68</div>
+      </div>
+    </div>
+
+    <!-- Scrubber + Controls -->
+    <div class="border-t" style="border-color: var(--border-hair); background: var(--surface-1);">
+      <!-- Scrubber -->
+      <div class="px-4 pt-3 pb-2">
+        <div class="scrub">
+          <div class="fill" style="width: 35%;"></div>
+          <!-- annotation marks -->
+          <div class="mark" style="left: 8%; background: #FF0000;"></div>
+          <div class="mark" style="left: 12%; background: #00FF00;"></div>
+          <div class="mark" style="left: 18%; background: #0000FF;"></div>
+          <div class="mark" style="left: 26%; background: #FFFF00;"></div>
+          <div class="mark" style="left: 35%; background: var(--accent-amber);"></div>
+          <div class="mark" style="left: 51%; background: #FF0000;"></div>
+          <div class="mark" style="left: 60%; background: #FFFF00;"></div>
+          <div class="mark" style="left: 73%; background: #00FFFF;"></div>
+          <div class="mark" style="left: 84%; background: #FF0000;"></div>
+          <div class="head" style="left: 35%;"></div>
+          <div class="head-knob" style="left: 35%;"></div>
+          <!-- tick marks -->
+          <div class="tick" style="left: 0%;"></div>
+          <div class="tick" style="left: 25%;"></div>
+          <div class="tick" style="left: 50%;"></div>
+          <div class="tick" style="left: 75%;"></div>
+          <div class="tick" style="left: 100%;"></div>
+        </div>
+      </div>
+
+      <!-- Controls row -->
+      <div class="px-4 pb-3 flex items-center gap-3">
+        <!-- Transport group -->
+        <div class="flex items-center gap-1 p-1 border rounded-[2px]" style="border-color: var(--border-hair);">
+          <button class="icobtn" title="Previous media" style="border: 0; background: transparent;">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+          </button>
+          <button class="icobtn" title="Back 5s" style="border: 0; background: transparent;">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M11 18V6l-8.5 6zM22 18V6l-8.5 6z"/></svg>
+          </button>
+          <button class="icobtn active" title="Play" style="background: rgba(255,157,61,0.12);">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+          </button>
+          <button class="icobtn" title="Forward 5s" style="border: 0; background: transparent;">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M13 6v12l8.5-6zM2 6v12l8.5-6z"/></svg>
+          </button>
+          <button class="icobtn" title="Next media" style="border: 0; background: transparent;">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M16 6h2v12h-2zM6 18l8.5-6L6 6z"/></svg>
+          </button>
+        </div>
+
+        <span class="micro">FRAME STEP</span>
+        <div class="flex items-center gap-1 p-1 border rounded-[2px]" style="border-color: var(--border-hair);">
+          <button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">1</button>
+          <button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">5</button>
+          <button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">10</button>
+          <button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">30</button>
+          <button class="icobtn mono" style="width:30px; font-size:10px; border:0; background:transparent; letter-spacing:0;">60</button>
+        </div>
+
+        <span class="mx-1 h-5 w-px" style="background: var(--border-hair);"></span>
+
+        <button class="btn btn-ghost-amber">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>
+          Save
+        </button>
+        <button class="btn btn-danger">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
+          Delete
+        </button>
+        <button class="btn btn-danger" title="Delete all on frame">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11l4 6M14 11l-4 6"/></svg>
+          Delete All
+        </button>
+
+        <span class="mx-1 h-5 w-px" style="background: var(--border-hair);"></span>
+
+        <button class="btn btn-amber">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V3h4"/><path d="M17 3h4v4"/><path d="M21 17v4h-4"/><path d="M7 21H3v-4"/><circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none"/></svg>
+          AI Detect
+          <span class="ml-1 mono opacity-70" style="font-size:9px;">[R]</span>
+        </button>
+
+        <span class="mx-1 h-5 w-px" style="background: var(--border-hair);"></span>
+
+        <div class="ml-auto flex items-center gap-2">
+          <button class="icobtn" title="Mute">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z"/></svg>
+          </button>
+          <input type="range" class="vol" min="0" max="100" value="62" />
+          <span class="mono text-[10px]" style="color: var(--text-muted); width: 24px;">62</span>
+        </div>
+      </div>
+
+      <!-- Status bar -->
+      <div class="px-4 h-7 flex items-center border-t" style="border-color: var(--border-hair); background: var(--surface-0);">
+        <span class="mono text-[11px]" style="color: var(--text-primary);">00:58.412</span>
+        <span class="mono text-[11px] mx-1.5" style="color: var(--text-muted);">/</span>
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">02:47.000</span>
+        <span class="mx-3 h-4 w-px" style="background: var(--border-hair);"></span>
+        <span class="micro">FRAME</span>
+        <span class="mono text-[11px] ml-1.5" style="color: var(--text-primary);">1284 / 5040</span>
+      </div>
+    </div>
+  </main>
+
+  <div class="split"></div>
+
+  <!-- ============ RIGHT SIDEBAR — Annotations List ============ -->
+  <aside class="flex flex-col shrink-0" style="width: 232px; background: var(--surface-1);">
+    <div class="flex items-center justify-between px-3 h-9 border-b" style="border-color: var(--border-hair);">
+      <div class="flex items-center gap-2">
+        <span class="section-h">Annotations</span>
+        <span class="mono text-[10px]" style="color: var(--text-muted);">14</span>
+      </div>
+      <div class="flex items-center gap-1">
+        <button class="icobtn" style="width:22px;height:22px;" title="Filter">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.5 10 19 14 21 14 12.5"/></svg>
+        </button>
+        <button class="icobtn" style="width:22px;height:22px;" title="Sort">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h13M3 12h9M3 18h5M17 8l4-4 4 4M21 4v16"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-[44px_1fr_auto] gap-2 px-3 h-6 items-center border-b" style="border-color: var(--border-hair);">
+      <span class="micro">TIME</span>
+      <span class="micro">CLASS</span>
+      <span class="micro">CONF</span>
+    </div>
+
+    <div class="flex-1 overflow-y-auto min-h-0">
+      <!-- 00:12 — single class red 95% -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,0,0.55) 0%, rgba(255,0,0,0.10) 60%, transparent 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">00:12</span>
+        <span style="color: var(--text-primary); font-weight: 500;">MilVeh</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">95%</span>
+      </div>
+      <!-- 00:18 — multi: green 88% + blue 71% -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,255,0,0.50) 0%, rgba(0,255,0,0.10) 48%, rgba(0,0,255,0.40) 52%, rgba(0,0,255,0.08) 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">00:18</span>
+        <span style="color: var(--text-primary);">Truck +1</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">88%</span>
+      </div>
+      <!-- 00:24 — single blue 76% -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,0,255,0.40) 0%, rgba(0,0,255,0.08) 60%, transparent 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">00:24</span>
+        <span style="color: var(--text-primary);">Vehicle</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">76%</span>
+      </div>
+      <!-- 00:31 — yellow 92% -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,255,0,0.50) 0%, rgba(255,255,0,0.10) 60%, transparent 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">00:31</span>
+        <span style="color: var(--text-primary);">Artillery</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">92%</span>
+      </div>
+      <!-- 00:45 — multi: red 94 + yellow 81 + cyan 64 -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,0,0.52) 0%, rgba(255,0,0,0.10) 30%, rgba(255,255,0,0.42) 34%, rgba(255,255,0,0.08) 64%, rgba(0,255,255,0.30) 68%, rgba(0,255,255,0.05) 100%);">
+        <span class="mono text-[11px]" style="color: var(--accent-amber);">00:45</span>
+        <span style="color: var(--text-primary); font-weight: 600;">MilVeh +2</span>
+        <span class="mono text-[10px]" style="color: var(--accent-amber);">94%</span>
+      </div>
+      <!-- 00:58 — current frame, selected look (cyan + red co-present) -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(54,214,197,0.55) 0%, rgba(54,214,197,0.10) 48%, rgba(255,71,86,0.50) 52%, rgba(255,71,86,0.10) 100%); background-color: var(--surface-2);">
+        <span class="mono text-[11px]" style="color: var(--accent-amber); font-weight: 600;">00:58</span>
+        <span style="color: var(--text-primary); font-weight: 600;">Vehicle, MilVeh</span>
+        <span class="mono text-[10px]" style="color: var(--text-primary);">94%</span>
+      </div>
+      <!-- 01:09 — magenta 70% -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,255,0.40) 0%, rgba(255,0,255,0.08) 60%, transparent 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">01:09</span>
+        <span style="color: var(--text-primary);">Shadow</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">70%</span>
+      </div>
+      <!-- 01:22 — cyan + green -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,255,255,0.45) 0%, rgba(0,255,255,0.10) 48%, rgba(0,255,0,0.40) 52%, rgba(0,255,0,0.08) 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">01:22</span>
+        <span style="color: var(--text-primary);">Trenches +1</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">83%</span>
+      </div>
+      <!-- 01:38 — red 97% -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,0,0.58) 0%, rgba(255,0,0,0.12) 60%, transparent 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">01:38</span>
+        <span style="color: var(--text-primary);">MilVeh</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">97%</span>
+      </div>
+      <!-- 01:51 — empty frame (no detections) -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(221,221,221,0.10), rgba(221,221,221,0.04));">
+        <span class="mono text-[11px]" style="color: var(--text-muted);">01:51</span>
+        <span style="color: var(--text-muted); font-style: italic;">empty frame</span>
+        <span class="mono text-[10px]" style="color: var(--text-muted);">—</span>
+      </div>
+      <!-- 02:04 — green -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,255,0,0.45) 0%, rgba(0,255,0,0.10) 60%, transparent 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">02:04</span>
+        <span style="color: var(--text-primary);">Truck</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">85%</span>
+      </div>
+      <!-- 02:19 — yellow + red -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,255,0,0.45) 0%, rgba(255,255,0,0.10) 48%, rgba(255,0,0,0.50) 52%, rgba(255,0,0,0.10) 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">02:19</span>
+        <span style="color: var(--text-primary);">Artillery +1</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">79%</span>
+      </div>
+      <!-- 02:33 — blue 68% -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(0,0,255,0.35) 0%, rgba(0,0,255,0.06) 60%, transparent 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">02:33</span>
+        <span style="color: var(--text-primary);">Vehicle</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">68%</span>
+      </div>
+      <!-- 02:41 — red 91% -->
+      <div class="ann-row" style="--row-grad: linear-gradient(90deg, rgba(255,0,0,0.52) 0%, rgba(255,0,0,0.10) 60%, transparent 100%);">
+        <span class="mono text-[11px]" style="color: var(--text-secondary);">02:41</span>
+        <span style="color: var(--text-primary);">MilVeh</span>
+        <span class="mono text-[10px]" style="color: var(--text-secondary);">91%</span>
+      </div>
+    </div>
+
+    <!-- Footer summary -->
+    <div class="border-t px-3 py-2.5" style="border-color: var(--border-hair); background: var(--surface-0);">
+      <div class="flex items-center justify-between mb-2">
+        <span class="micro">SUMMARY</span>
+        <span class="mono text-[10px]" style="color: var(--text-muted);">14 ann · 3 empty</span>
+      </div>
+      <div class="flex items-center gap-1 h-2">
+        <span style="flex: 5; background: #FF0000; height: 100%;"></span>
+        <span style="flex: 3; background: #00FF00; height: 100%;"></span>
+        <span style="flex: 2; background: #0000FF; height: 100%;"></span>
+        <span style="flex: 2; background: #FFFF00; height: 100%;"></span>
+        <span style="flex: 1; background: #FF00FF; height: 100%;"></span>
+        <span style="flex: 1; background: #00FFFF; height: 100%;"></span>
+      </div>
+      <div class="flex items-center justify-between mt-2 mono text-[10px]" style="color: var(--text-muted);">
+        <span><span style="color:#FF0000;">■</span> 5</span>
+        <span><span style="color:#00FF00;">■</span> 3</span>
+        <span><span style="color:#0000FF;">■</span> 2</span>
+        <span><span style="color:#FFFF00;">■</span> 2</span>
+        <span><span style="color:#FF00FF;">■</span> 1</span>
+        <span><span style="color:#00FFFF;">■</span> 1</span>
+      </div>
+    </div>
+  </aside>
+
+</div>
+
+</body>
+</html>

_docs/ui_design/v2/plugin/dataset_explorer.html

@@ -0,0 +1,876 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Azaion // Dataset Explorer</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>
+  tailwind.config = {
+    theme: {
+      extend: {
+        colors: {
+          s0:  '#0A0D10',
+          s1:  '#13171C',
+          s2:  '#1A1F26',
+          sin: '#0A0D10',
+          bh:  '#252B34',
+          br2: '#3B4451',
+          tp:  '#E8ECF1',
+          ts:  '#9AA4B2',
+          tm:  '#5B6573',
+          amber: '#FF9D3D',
+          cyan:  '#36D6C5',
+          red:   '#FF4756',
+          green: '#3DDC84',
+          blue:  '#4E9EFF',
+        },
+        fontFamily: {
+          sans: ['"IBM Plex Sans"', 'system-ui', 'sans-serif'],
+          mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
+        },
+      },
+    },
+  };
+</script>
+<style>
+  :root {
+    --surface-0: #0A0D10;
+    --surface-1: #13171C;
+    --surface-2: #1A1F26;
+    --surface-input: #0A0D10;
+    --border-hair: #252B34;
+    --border-raised: #3B4451;
+    --text-primary: #E8ECF1;
+    --text-secondary: #9AA4B2;
+    --text-muted: #5B6573;
+    --accent-amber: #FF9D3D;
+    --accent-cyan:  #36D6C5;
+    --accent-red:   #FF4756;
+    --accent-green: #3DDC84;
+    --accent-blue:  #4E9EFF;
+  }
+  html, body { background: var(--surface-0); color: var(--text-primary); }
+  body { font: 13px/1.5 'IBM Plex Sans', system-ui, sans-serif; }
+  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
+  .num  { font-variant-numeric: tabular-nums; }
+  .micro {
+    font: 10px/1.4 'JetBrains Mono', ui-monospace, monospace;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+  }
+  .sec-heading {
+    font: 600 11px/1.2 'JetBrains Mono', ui-monospace, monospace;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--accent-amber);
+  }
+
+  /* corner brackets */
+  .bracket { position: relative; }
+  .bracket::before, .bracket::after,
+  .bracket > .br::before, .bracket > .br::after {
+    content: ''; position: absolute; width: 8px; height: 8px;
+    border-color: var(--accent-amber); border-style: solid; border-width: 0;
+    pointer-events: none;
+  }
+  .bracket::before  { top: -1px; left:  -1px; border-top-width: 1px;    border-left-width: 1px;  }
+  .bracket::after   { top: -1px; right: -1px; border-top-width: 1px;    border-right-width: 1px; }
+  .bracket > .br::before { content:''; position:absolute; bottom: -1px; left:  -1px; width:8px; height:8px; border-bottom: 1px solid var(--accent-amber); border-left: 1px solid var(--accent-amber); }
+  .bracket > .br::after  { content:''; position:absolute; bottom: -1px; right: -1px; width:8px; height:8px; border-bottom: 1px solid var(--accent-amber); border-right:1px solid var(--accent-amber); }
+
+  /* base panel */
+  .panel {
+    background: var(--surface-1);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+  }
+
+  /* inputs */
+  .inp {
+    background: var(--surface-input);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    height: 28px;
+    padding: 0 10px;
+    color: var(--text-primary);
+    font: 12px 'IBM Plex Sans', system-ui, sans-serif;
+    outline: none;
+  }
+  .inp:focus { border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber); }
+  .inp::placeholder { color: var(--text-muted); }
+  .inp-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
+
+  /* buttons */
+  .btn {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 6px 14px;
+    border-radius: 2px;
+    font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    border: 1px solid transparent;
+    cursor: pointer;
+  }
+  .btn-primary { background: var(--accent-amber); color: #0A0D10; border-color: var(--accent-amber); }
+  .btn-primary:hover { filter: brightness(1.08); }
+  .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-hair); }
+  .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-raised); }
+  .btn-secondary { background: transparent; color: var(--accent-amber); border-color: var(--accent-amber); }
+  .btn-secondary:hover { background: rgba(255,157,61,0.12); }
+
+  /* status pill */
+  .pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 3px 8px;
+    border-radius: 2px;
+    font: 600 10px 'JetBrains Mono', ui-monospace, monospace;
+    letter-spacing: 0.10em;
+    text-transform: uppercase;
+    line-height: 1;
+    background: transparent;
+    border: 1px solid var(--border-hair);
+    color: var(--text-secondary);
+  }
+  .pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 6px; }
+  .pill-green { color: var(--accent-green); border-color: var(--accent-green); }
+  .pill-amber { color: var(--accent-amber); border-color: var(--accent-amber); }
+  .pill-blue  { color: var(--accent-blue);  border-color: var(--accent-blue);  }
+  .pill-red   { color: var(--accent-red);   border-color: var(--accent-red);   }
+  .pill-none  { color: var(--text-muted);   border-color: var(--border-raised); }
+  .pill-cyan  { color: var(--accent-cyan);  border-color: var(--accent-cyan);  }
+
+  /* status chips (filter) */
+  .chip {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 0 10px; height: 24px;
+    border-radius: 2px;
+    font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace;
+    letter-spacing: 0.10em;
+    text-transform: uppercase;
+    background: transparent;
+    border: 1px solid var(--border-hair);
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+  .chip .dot { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 6px; }
+  .chip:hover { color: var(--text-primary); border-color: var(--border-raised); }
+  .chip-active-green { color: var(--accent-green); border-color: var(--accent-green); background: rgba(61,220,132,0.12); }
+  .chip-active-amber { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.12); }
+  .chip-active-blue  { color: var(--accent-blue);  border-color: var(--accent-blue);  background: rgba(78,158,255,0.12); }
+  .chip-active-muted { color: var(--text-primary); border-color: var(--border-raised); background: rgba(91,101,115,0.18); }
+
+  /* Toggle switch — square knob, 2px radius */
+  .switch {
+    position: relative;
+    width: 30px; height: 16px;
+    background: var(--surface-input);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    cursor: pointer;
+    flex: 0 0 30px;
+    transition: background-color 120ms, border-color 120ms;
+  }
+  .switch::after {
+    content: '';
+    position: absolute;
+    top: 1px; left: 1px;
+    width: 12px; height: 12px;
+    background: var(--text-muted);
+    border-radius: 2px;
+    transition: transform 120ms, background-color 120ms;
+  }
+  .switch.on { background: rgba(255,157,61,0.22); border-color: var(--accent-amber); }
+  .switch.on::after { transform: translateX(14px); background: var(--accent-amber); }
+
+  /* Detection class row */
+  .class-row {
+    display: flex; align-items: center; gap: 10px;
+    height: 28px; padding: 0 8px;
+    border-radius: 2px;
+    cursor: pointer;
+    color: var(--text-secondary);
+  }
+  .class-row:hover { background: var(--surface-2); color: var(--text-primary); }
+  .class-row.active { background: var(--surface-2); color: var(--text-primary); }
+  .class-row.active .count { color: var(--accent-amber); border-color: var(--accent-amber); }
+  .swatch { width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid rgba(255,255,255,0.10); }
+  .count {
+    margin-left: auto;
+    padding: 2px 6px;
+    font: 500 10px 'JetBrains Mono', ui-monospace, monospace;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-secondary);
+    background: var(--surface-input);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    line-height: 1;
+  }
+
+  /* Tab strip */
+  .tab {
+    display: inline-flex; align-items: center;
+    height: 48px; padding: 0 14px;
+    font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace;
+    letter-spacing: 0.10em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+  }
+  .tab:hover { color: var(--text-primary); }
+  .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
+  .tab .badge {
+    font: 500 10px 'JetBrains Mono', ui-monospace, monospace;
+    color: var(--text-muted);
+    padding: 1px 5px;
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    line-height: 1;
+  }
+  .tab.active .badge { color: var(--accent-amber); border-color: var(--accent-amber); }
+
+  /* Thumbnail tile */
+  .tile {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    background: var(--surface-1);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: border-color 100ms;
+  }
+  .tile:hover { border-color: var(--accent-amber); }
+  .tile.seed { border-color: var(--accent-red); }
+  .tile.selected { border: 2px solid var(--accent-amber); }
+  .tile .img {
+    position: absolute; inset: 0;
+    background-size: cover; background-position: center;
+  }
+  .tile .scrim {
+    position: absolute; inset: 0;
+    background:
+      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
+      linear-gradient(180deg, rgba(0,0,0,0.0) 55%, rgba(0,0,0,0.55) 100%);
+    background-size: 24px 24px, 24px 24px, 100% 100%;
+    pointer-events: none;
+  }
+  .tile .pill { padding: 2px 6px; font-size: 9px; letter-spacing: 0.08em; }
+  .tile .corner-tag {
+    position: absolute; top: 6px; right: 6px;
+    font: 500 9px 'JetBrains Mono', ui-monospace, monospace;
+    color: var(--text-primary);
+    background: rgba(10,13,16,0.65);
+    border: 1px solid var(--border-hair);
+    padding: 1px 5px;
+    letter-spacing: 0.06em;
+    border-radius: 2px;
+  }
+  .tile .check {
+    position: absolute; top: 4px; left: 4px;
+    width: 14px; height: 14px;
+    background: var(--accent-amber);
+    color: #0A0D10;
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 2px;
+  }
+  .tile .bbox {
+    position: absolute;
+    border: 1px solid;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
+  }
+
+  /* live dot animation */
+  @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.35 } }
+  .live { animation: pulse 1.6s ease-in-out infinite; }
+
+  /* Icon buttons in header */
+  .ibtn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    color: var(--text-secondary); background: transparent;
+    transition: color .12s, border-color .12s, background-color .12s;
+    cursor: pointer;
+  }
+  .ibtn:hover { color: var(--text-primary); border-color: var(--border-raised); background: var(--surface-2); }
+  .ibtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
+  .ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,0.08); }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 8px; height: 8px; }
+  ::-webkit-scrollbar-thumb { background: var(--border-hair); border-radius: 2px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--border-raised); }
+  ::-webkit-scrollbar-track { background: transparent; }
+
+  /* divider */
+  .vdiv { width: 1px; height: 20px; background: var(--border-hair); }
+
+  /* tile scene gradients (varied) */
+  .scene-forest-1   { background: radial-gradient(120% 80% at 30% 20%, #2f4636 0%, #1c2a22 55%, #0e1612 100%); }
+  .scene-forest-2   { background: linear-gradient(160deg, #324a3a 0%, #1b2820 60%, #0e1612 100%); }
+  .scene-urban-1    { background: linear-gradient(155deg, #3a4150 0%, #232a36 55%, #14181f 100%); }
+  .scene-urban-2    { background: radial-gradient(120% 90% at 70% 30%, #4a5568 0%, #2a313d 60%, #14181f 100%); }
+  .scene-desert-1   { background: linear-gradient(165deg, #6a513a 0%, #44332a 55%, #1f1813 100%); }
+  .scene-desert-2   { background: radial-gradient(110% 85% at 20% 70%, #7a5a3e 0%, #4a3522 60%, #20160d 100%); }
+  .scene-dusk-1     { background: linear-gradient(180deg, #2a1d2d 0%, #3b2a35 30%, #1d2230 70%, #0d1118 100%); }
+  .scene-dusk-2     { background: linear-gradient(180deg, #1a2438 0%, #2d2236 45%, #1a1820 100%); }
+  .scene-field-1    { background: linear-gradient(160deg, #4a5232 0%, #2e3520 60%, #15170d 100%); }
+  .scene-field-2    { background: radial-gradient(120% 80% at 60% 40%, #5a5a30 0%, #353720 55%, #15170d 100%); }
+  .scene-coast-1    { background: linear-gradient(170deg, #2d4a52 0%, #1e3036 60%, #0c1416 100%); }
+  .scene-night-1    { background: radial-gradient(140% 100% at 50% 30%, #1c2740 0%, #10182a 60%, #06080f 100%); }
+  .scene-snow-1     { background: linear-gradient(180deg, #4a5560 0%, #2c333c 55%, #161a20 100%); }
+  .scene-rural-1    { background: linear-gradient(160deg, #3d4a35 0%, #2a3328 50%, #141a14 100%); }
+
+  /* faint terrain dot pattern overlay */
+  .terrain::before {
+    content: '';
+    position: absolute; inset: 0;
+    background-image:
+      radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
+      radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1px);
+    background-size: 7px 7px, 9px 9px;
+    background-position: 0 0, 3px 4px;
+    mix-blend-mode: overlay;
+    opacity: 0.6;
+  }
+</style>
+</head>
+<body class="h-screen flex flex-col overflow-hidden">
+
+<!-- ============ HEADER ============ -->
+<header class="flex items-center h-12 px-4 gap-3 border-b border-[color:var(--border-hair)] bg-[color:var(--surface-1)] shrink-0">
+  <span class="mono font-bold" style="color: var(--accent-amber); letter-spacing: 0.2em; font-size: 14px;">AZAION</span>
+
+  <span class="micro" style="color: var(--text-muted);">//</span>
+
+  <button class="inline-flex items-center gap-2 mono" style="height: 28px; padding: 0 10px; background: var(--surface-1); border: 1px solid var(--accent-amber); border-radius: 2px; font-size: 11px; letter-spacing: 0.10em;">
+    <span class="w-1.5 h-1.5 rounded-full live" style="background: var(--accent-cyan);"></span>
+    <span style="color: var(--text-primary);">FL-03</span>
+    <span style="color: var(--text-secondary); font-size: 10px;">▾</span>
+  </button>
+
+  <nav class="flex items-center self-stretch ml-3">
+    <a href="flights.html"          class="tab">Flights</a>
+    <a href="annotations.html"      class="tab">Annotations</a>
+    <a href="dataset_explorer.html" class="tab active">Dataset</a>
+    <a href="admin.html"            class="tab">Admin</a>
+  </nav>
+
+  <div class="ml-auto flex items-center gap-2" style="font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase;">
+    <span class="w-1.5 h-1.5 rounded-full live" style="background: var(--accent-cyan);"></span>
+    <span style="color: var(--accent-cyan);">LINK</span>
+    <span style="color: var(--border-raised);">|</span>
+    <span style="color: var(--text-secondary); text-transform: none; letter-spacing: 0;">user@azaion.com</span>
+    <span style="color: var(--border-raised); margin: 0 4px;">|</span>
+    <a href="settings.html" class="ibtn" title="Settings">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+    </a>
+    <a href="#" class="ibtn danger" title="Sign out">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+    </a>
+  </div>
+</header>
+
+<!-- ============ MAIN ============ -->
+<div class="flex-1 flex overflow-hidden p-3 gap-3">
+
+  <!-- ============ LEFT PANEL ============ -->
+  <aside class="bracket panel flex flex-col" style="width:250px; flex-shrink:0;">
+    <span class="br"></span>
+
+    <!-- Detection Classes -->
+    <div class="px-3 pt-3 pb-2 flex items-center justify-between border-b border-[color:var(--border-hair)]">
+      <span class="sec-heading">Detection Classes</span>
+      <span class="mono text-[10px] text-tm">16</span>
+    </div>
+
+    <div class="px-2 py-2 flex flex-col gap-0.5 overflow-y-auto" style="max-height: 46vh;">
+      <div class="class-row active">
+        <span class="swatch" style="background:#FF0000"></span>
+        <span class="text-[12px]">ArmorVehicle</span>
+        <span class="count num">124</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#00B341"></span>
+        <span class="text-[12px]">Truck</span>
+        <span class="count num">86</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#0044FF"></span>
+        <span class="text-[12px]">Vehicle</span>
+        <span class="count num">312</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#FFFF00"></span>
+        <span class="text-[12px]">Artillery</span>
+        <span class="count num">47</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#FF00FF"></span>
+        <span class="text-[12px]">Shadow</span>
+        <span class="count num">203</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#00FFFF"></span>
+        <span class="text-[12px]">Trenches</span>
+        <span class="count num">59</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#FF6B00"></span>
+        <span class="text-[12px]">ActiveMine</span>
+        <span class="count num">12</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#9D4EFF"></span>
+        <span class="text-[12px]">AAGun</span>
+        <span class="count num">8</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#FFFFFF"></span>
+        <span class="text-[12px]">Bunker</span>
+        <span class="count num">21</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#7AB800"></span>
+        <span class="text-[12px]">Infantry</span>
+        <span class="count num">73</span>
+      </div>
+      <div class="class-row">
+        <span class="swatch" style="background:#FF1493"></span>
+        <span class="text-[12px]">UAV</span>
+        <span class="count num">5</span>
+      </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="mt-auto border-t border-[color:var(--border-hair)] px-3 py-3 flex flex-col gap-3">
+      <div class="micro">Filters</div>
+
+      <!-- Toggle row -->
+      <div class="flex items-center justify-between">
+        <div class="flex flex-col">
+          <span class="text-[12px] text-tp">Show with objects only</span>
+          <span class="text-[10px] text-tm">Hide empty frames</span>
+        </div>
+        <div class="switch on" role="switch" aria-checked="true"></div>
+      </div>
+
+      <!-- Search -->
+      <div class="relative">
+        <svg class="absolute left-2.5 top-1/2 -translate-y-1/2" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="color:var(--text-muted)">
+          <circle cx="11" cy="11" r="7"/>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+        </svg>
+        <input class="inp w-full" style="padding-left:28px" placeholder="Search annotation name…" />
+      </div>
+
+      <!-- Quick stats -->
+      <div class="grid grid-cols-2 gap-2 pt-1">
+        <div class="border border-[color:var(--border-hair)] rounded-[2px] p-2">
+          <div class="micro" style="color:var(--text-muted)">Total</div>
+          <div class="mono text-[15px] text-tp">1,047</div>
+        </div>
+        <div class="border border-[color:var(--border-hair)] rounded-[2px] p-2">
+          <div class="micro" style="color:var(--text-muted)">Validated</div>
+          <div class="mono text-[15px] text-green">612</div>
+        </div>
+      </div>
+    </div>
+  </aside>
+
+  <!-- ============ MAIN AREA ============ -->
+  <main class="flex-1 flex flex-col min-w-0 gap-3">
+
+    <!-- Filter Bar -->
+    <div class="bracket panel relative flex items-center gap-3 px-3" style="height:48px;">
+      <span class="br"></span>
+
+      <!-- Date Range -->
+      <div class="flex items-center gap-2">
+        <span class="micro">Range</span>
+        <input class="inp inp-mono" style="width:104px" value="2025-02-09" />
+        <span class="mono text-tm">—</span>
+        <input class="inp inp-mono" style="width:104px" value="2025-02-11" />
+      </div>
+
+      <span class="vdiv"></span>
+
+      <!-- Flight -->
+      <div class="flex items-center gap-2">
+        <span class="micro">Flight</span>
+        <button class="inp flex items-center gap-2" style="padding:0 10px; height:28px;">
+          <span class="w-1.5 h-1.5 rounded-full" style="background:var(--accent-amber)"></span>
+          <span class="mono text-[12px] text-tp tracking-wider">FL-03</span>
+          <span class="text-[10px] text-tm ml-1">▾</span>
+        </button>
+      </div>
+
+      <span class="vdiv"></span>
+
+      <!-- Status chips -->
+      <div class="flex items-center gap-1.5">
+        <span class="micro mr-1">Status</span>
+        <button class="chip">
+          <span class="dot" style="background:var(--text-muted)"></span>None
+        </button>
+        <button class="chip chip-active-amber">
+          <span class="dot" style="background:var(--accent-amber)"></span>Created
+        </button>
+        <button class="chip chip-active-blue">
+          <span class="dot" style="background:var(--accent-blue)"></span>Edited
+        </button>
+        <button class="chip chip-active-green">
+          <span class="dot" style="background:var(--accent-green)"></span>Validated
+        </button>
+      </div>
+
+      <div class="ml-auto flex items-center gap-3">
+        <span class="micro" style="color:var(--text-muted)">Showing</span>
+        <span class="mono text-[12px] text-tp">214<span class="text-tm"> / 1047</span></span>
+        <span class="vdiv"></span>
+        <button class="w-7 h-7 flex items-center justify-center border border-[color:var(--border-hair)] rounded-[2px] text-ts hover:text-tp hover:border-[color:var(--border-raised)]" title="Sort">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
+        </button>
+        <button class="w-7 h-7 flex items-center justify-center border border-[color:var(--border-hair)] rounded-[2px] text-ts hover:text-tp hover:border-[color:var(--border-raised)]" title="Grid density">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Tab strip + grid panel -->
+    <div class="bracket panel relative flex-1 flex flex-col min-h-0 overflow-hidden">
+      <span class="br"></span>
+
+      <!-- Tabs -->
+      <div class="flex items-center px-2 border-b border-[color:var(--border-hair)] shrink-0">
+        <div class="tab active">
+          <span>Annotations</span>
+          <span class="badge num">214</span>
+        </div>
+        <div class="tab">
+          <span>Editor</span>
+          <span class="badge">—</span>
+        </div>
+        <div class="tab">
+          <span>Class Distribution</span>
+        </div>
+        <div class="ml-auto flex items-center gap-2 px-2 micro" style="color:var(--text-muted)">
+          <span class="w-1.5 h-1.5 rounded-full bg-cyan live"></span>
+          <span>Live sync</span>
+        </div>
+      </div>
+
+      <!-- Grid -->
+      <div class="flex-1 overflow-y-auto p-2">
+        <div class="grid gap-2" style="grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));">
+
+          <!-- Tile 1 - Validated, forest, selected -->
+          <div class="tile selected">
+            <div class="img scene-forest-1 terrain"></div>
+            <div class="bbox" style="top:38%; left:30%; width:24%; height:18%; border-color:#FF0000;"></div>
+            <div class="scrim"></div>
+            <div class="check"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><polyline points="20 6 9 17 4 12"/></svg></div>
+            <div class="corner-tag mono">12 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 2 - Created, urban -->
+          <div class="tile">
+            <div class="img scene-urban-1 terrain"></div>
+            <div class="bbox" style="top:48%; left:42%; width:18%; height:14%; border-color:#0044FF;"></div>
+            <div class="bbox" style="top:30%; left:18%; width:12%; height:10%; border-color:#FF00FF;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">12 MAY · AB</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-amber"><span class="dot"></span>CREATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 3 - Validated, desert -->
+          <div class="tile">
+            <div class="img scene-desert-1 terrain"></div>
+            <div class="bbox" style="top:55%; left:35%; width:30%; height:20%; border-color:#FF0000;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">11 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 4 - Edited, forest 2 -->
+          <div class="tile">
+            <div class="img scene-forest-2 terrain"></div>
+            <div class="bbox" style="top:42%; left:50%; width:20%; height:16%; border-color:#00B341;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">11 MAY · MK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-blue"><span class="dot"></span>EDITED</span>
+            </div>
+          </div>
+
+          <!-- Tile 5 - None, urban 2 -->
+          <div class="tile">
+            <div class="img scene-urban-2 terrain"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">11 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-none"><span class="dot"></span>NONE</span>
+            </div>
+          </div>
+
+          <!-- Tile 6 - Validated, field -->
+          <div class="tile">
+            <div class="img scene-field-1 terrain"></div>
+            <div class="bbox" style="top:36%; left:24%; width:22%; height:18%; border-color:#FF0000;"></div>
+            <div class="bbox" style="top:60%; left:58%; width:14%; height:10%; border-color:#FFFF00;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">11 MAY · OK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 7 - Created, desert 2, SEED -->
+          <div class="tile seed">
+            <div class="img scene-desert-2 terrain"></div>
+            <div class="bbox" style="top:44%; left:36%; width:28%; height:22%; border-color:#FF6B00;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">10 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-amber"><span class="dot"></span>CREATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 8 - Validated, forest, selected -->
+          <div class="tile selected">
+            <div class="img scene-forest-1 terrain"></div>
+            <div class="bbox" style="top:30%; left:28%; width:18%; height:16%; border-color:#FF0000;"></div>
+            <div class="bbox" style="top:56%; left:52%; width:20%; height:14%; border-color:#0044FF;"></div>
+            <div class="scrim"></div>
+            <div class="check"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><polyline points="20 6 9 17 4 12"/></svg></div>
+            <div class="corner-tag mono">10 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 9 - Edited, dusk -->
+          <div class="tile">
+            <div class="img scene-dusk-1 terrain"></div>
+            <div class="bbox" style="top:48%; left:40%; width:24%; height:16%; border-color:#00B341;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">10 MAY · MK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-blue"><span class="dot"></span>EDITED</span>
+            </div>
+          </div>
+
+          <!-- Tile 10 - None, urban 1 -->
+          <div class="tile">
+            <div class="img scene-urban-1 terrain"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">10 MAY · AB</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-none"><span class="dot"></span>NONE</span>
+            </div>
+          </div>
+
+          <!-- Tile 11 - Validated, forest 2 -->
+          <div class="tile">
+            <div class="img scene-forest-2 terrain"></div>
+            <div class="bbox" style="top:38%; left:32%; width:26%; height:20%; border-color:#FF0000;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">10 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 12 - Created, desert -->
+          <div class="tile">
+            <div class="img scene-desert-1 terrain"></div>
+            <div class="bbox" style="top:50%; left:46%; width:18%; height:14%; border-color:#FFFF00;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">10 MAY · OK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-amber"><span class="dot"></span>CREATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 13 - Validated, urban 2 -->
+          <div class="tile">
+            <div class="img scene-urban-2 terrain"></div>
+            <div class="bbox" style="top:32%; left:22%; width:18%; height:14%; border-color:#0044FF;"></div>
+            <div class="bbox" style="top:58%; left:56%; width:24%; height:18%; border-color:#FF00FF;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">09 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 14 - Edited, dusk 2 -->
+          <div class="tile">
+            <div class="img scene-dusk-2 terrain"></div>
+            <div class="bbox" style="top:44%; left:38%; width:22%; height:16%; border-color:#9D4EFF;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">09 MAY · MK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-blue"><span class="dot"></span>EDITED</span>
+            </div>
+          </div>
+
+          <!-- Tile 15 - None, field 2 -->
+          <div class="tile">
+            <div class="img scene-field-2 terrain"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">09 MAY · OK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-none"><span class="dot"></span>NONE</span>
+            </div>
+          </div>
+
+          <!-- Tile 16 - Validated, coast, selected -->
+          <div class="tile selected">
+            <div class="img scene-coast-1 terrain"></div>
+            <div class="bbox" style="top:40%; left:30%; width:24%; height:18%; border-color:#FF0000;"></div>
+            <div class="scrim"></div>
+            <div class="check"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><polyline points="20 6 9 17 4 12"/></svg></div>
+            <div class="corner-tag mono">09 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 17 - Created, night, SEED -->
+          <div class="tile seed">
+            <div class="img scene-night-1 terrain"></div>
+            <div class="bbox" style="top:46%; left:42%; width:20%; height:14%; border-color:#00FFFF;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">09 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-amber"><span class="dot"></span>CREATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 18 - Validated, snow -->
+          <div class="tile">
+            <div class="img scene-snow-1 terrain"></div>
+            <div class="bbox" style="top:42%; left:36%; width:22%; height:18%; border-color:#FF0000;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">09 MAY · AB</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 19 - Edited, rural -->
+          <div class="tile">
+            <div class="img scene-rural-1 terrain"></div>
+            <div class="bbox" style="top:50%; left:30%; width:30%; height:18%; border-color:#00B341;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">08 MAY · MK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-blue"><span class="dot"></span>EDITED</span>
+            </div>
+          </div>
+
+          <!-- Tile 20 - Validated, forest 2 -->
+          <div class="tile">
+            <div class="img scene-forest-2 terrain"></div>
+            <div class="bbox" style="top:34%; left:26%; width:20%; height:16%; border-color:#FF0000;"></div>
+            <div class="bbox" style="top:60%; left:56%; width:18%; height:12%; border-color:#FFFF00;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">08 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 21 - None, dusk 2 -->
+          <div class="tile">
+            <div class="img scene-dusk-2 terrain"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">08 MAY · OK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-none"><span class="dot"></span>NONE</span>
+            </div>
+          </div>
+
+          <!-- Tile 22 - Created, desert 2 -->
+          <div class="tile">
+            <div class="img scene-desert-2 terrain"></div>
+            <div class="bbox" style="top:48%; left:40%; width:24%; height:18%; border-color:#FF6B00;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">08 MAY · RD</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-amber"><span class="dot"></span>CREATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 23 - Validated, urban 1 -->
+          <div class="tile">
+            <div class="img scene-urban-1 terrain"></div>
+            <div class="bbox" style="top:40%; left:34%; width:22%; height:16%; border-color:#0044FF;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">08 MAY · AB</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-green"><span class="dot"></span>VALIDATED</span>
+            </div>
+          </div>
+
+          <!-- Tile 24 - Edited, coast -->
+          <div class="tile">
+            <div class="img scene-coast-1 terrain"></div>
+            <div class="bbox" style="top:48%; left:44%; width:18%; height:14%; border-color:#00FFFF;"></div>
+            <div class="scrim"></div>
+            <div class="corner-tag mono">08 MAY · MK</div>
+            <div class="absolute bottom-1.5 left-1.5">
+              <span class="pill pill-blue"><span class="dot"></span>EDITED</span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- Status Bar -->
+    <div class="bracket panel relative flex items-center gap-3 px-3 shrink-0" style="height:44px;">
+      <span class="br"></span>
+
+      <button class="btn btn-primary">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
+        Validate (3)
+      </button>
+
+      <button class="btn btn-ghost">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"/><path d="M20.49 15A9 9 0 0 1 5.64 18.36L1 14"/></svg>
+        Refresh Thumbnails
+      </button>
+
+      <span class="vdiv"></span>
+
+      <div class="flex items-center gap-2 min-w-0">
+        <span class="micro">Selected</span>
+        <span class="mono text-[12px] text-tp truncate">ann_FL03_0231_ArmorVehicle_07</span>
+      </div>
+
+      <div class="ml-auto flex items-center gap-3">
+        <span class="text-[11px] text-tm">3 of 214 selected</span>
+      </div>
+    </div>
+
+  </main>
+</div>
+
+</body>
+</html>

_docs/ui_design/v2/plugin/flights.html

@@ -0,0 +1,895 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AZAION // FLIGHTS — Tactical Ops</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --surface-0:     #0A0D10;
+    --surface-1:     #13171C;
+    --surface-2:     #1A1F26;
+    --surface-input: #0A0D10;
+    --border-hair:   #252B34;
+    --border-raised: #3B4451;
+    --text-primary:  #E8ECF1;
+    --text-secondary:#9AA4B2;
+    --text-muted:    #5B6573;
+    --accent-amber:  #FF9D3D;
+    --accent-cyan:   #36D6C5;
+    --accent-red:    #FF4756;
+    --accent-green:  #3DDC84;
+    --accent-blue:   #4E9EFF;
+  }
+  html, body {
+    background: var(--surface-0);
+    color: var(--text-primary);
+  }
+  body {
+    font-family: 'IBM Plex Sans', system-ui, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
+  .num  { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; }
+
+  .micro {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 10px;
+    line-height: 1.4;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+  }
+  .section-head {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 11px;
+    line-height: 1.2;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--accent-amber);
+  }
+
+  /* Corner brackets */
+  .bracket { position: relative; }
+  .bracket::before, .bracket::after,
+  .bracket > .br::before, .bracket > .br::after {
+    content: ''; position: absolute; width: 8px; height: 8px;
+    border-color: var(--accent-amber); border-style: solid; border-width: 0;
+    pointer-events: none;
+  }
+  .bracket::before  { top: -1px; left:  -1px; border-top-width: 1px;    border-left-width: 1px;  }
+  .bracket::after   { top: -1px; right: -1px; border-top-width: 1px;    border-right-width: 1px; }
+  .bracket > .br::before { bottom: -1px; left:  -1px; border-bottom-width: 1px; border-left-width: 1px;  }
+  .bracket > .br::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
+
+  .bracket-cyan::before, .bracket-cyan::after,
+  .bracket-cyan > .br::before, .bracket-cyan > .br::after { border-color: var(--accent-cyan); }
+  .bracket-red::before, .bracket-red::after,
+  .bracket-red > .br::before, .bracket-red > .br::after { border-color: var(--accent-red); }
+
+  .hair { border-color: var(--border-hair); }
+  .panel { background: var(--surface-1); border: 1px solid var(--border-hair); }
+
+  /* Buttons */
+  .btn-primary {
+    background: var(--accent-amber); color: #0A0D10; border: 1px solid var(--accent-amber);
+    padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
+    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
+    transition: filter .12s;
+  }
+  .btn-primary:hover { filter: brightness(1.08); }
+  .btn-secondary {
+    background: transparent; color: var(--accent-amber); border: 1px solid var(--accent-amber);
+    padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
+    letter-spacing: 0.08em; text-transform: uppercase;
+  }
+  .btn-secondary:hover { background: rgba(255,157,61,0.12); }
+  .btn-ghost {
+    background: transparent; color: var(--text-secondary); border: 1px solid var(--border-hair);
+    padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
+    letter-spacing: 0.08em; text-transform: uppercase;
+  }
+  .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-raised); }
+  .btn-danger {
+    background: var(--accent-red); color: #0A0D10; border: 1px solid var(--accent-red);
+    padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
+    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
+  }
+  .btn-cyan {
+    background: transparent; color: var(--accent-cyan); border: 1px solid var(--accent-cyan);
+    padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
+    letter-spacing: 0.08em; text-transform: uppercase;
+  }
+  .btn-cyan:hover { background: rgba(54,214,197,0.10); }
+
+  /* Inputs */
+  .ipt {
+    background: var(--surface-input); border: 1px solid var(--border-hair);
+    border-radius: 2px; padding: 6px 10px; height: 32px;
+    font-family: 'IBM Plex Sans', sans-serif; font-size: 12px;
+    color: var(--text-primary); width: 100%;
+  }
+  .ipt:focus { outline: none; border-color: var(--accent-amber); box-shadow: 0 0 0 1px var(--accent-amber); }
+  .ipt::placeholder { color: var(--text-muted); }
+  .ipt-num { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; }
+  select.ipt { appearance: none; background-image:
+      linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
+      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
+    background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
+    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
+  input[type="date"].ipt { color-scheme: dark; }
+
+  /* Pill / status */
+  .pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 2px 8px; border-radius: 2px; border: 1px solid currentColor;
+    font-family: 'JetBrains Mono', monospace; font-size: 10px;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    background: transparent;
+  }
+  .pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; flex-shrink: 0; }
+  .pill-green { color: var(--accent-green); }
+  .pill-cyan  { color: var(--accent-cyan); }
+  .pill-red   { color: var(--accent-red); }
+  .pill-amber { color: var(--accent-amber); }
+  .pill-muted { color: var(--text-secondary); border-color: var(--border-hair); }
+
+  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
+  .pulse { animation: pulse 1.6s ease-in-out infinite; }
+
+  /* Header live-dot — glow-ring animation, matches other plugin pages */
+  .live-dot {
+    width: 6px; height: 6px; border-radius: 999px;
+    background: var(--accent-cyan);
+    box-shadow: 0 0 0 0 rgba(54,214,197,0.5);
+    animation: liveDotPulse 1.6s ease-in-out infinite;
+    display: inline-block;
+    flex: none;
+  }
+  @keyframes liveDotPulse {
+    0%,100% { box-shadow: 0 0 0 0 rgba(54,214,197,0.5); }
+    50%     { box-shadow: 0 0 0 6px rgba(54,214,197,0); }
+  }
+
+  /* Draw-mode selector buttons */
+  .dmode {
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    height: 32px; padding: 0 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px; font-weight: 600;
+    letter-spacing: 0.10em; text-transform: uppercase;
+    border: 1px solid; border-radius: 2px;
+    background: transparent;
+    cursor: pointer;
+    transition: background-color .12s, color .12s, box-shadow .12s;
+    white-space: nowrap;
+  }
+  .dmode:hover  { background-color: rgba(255,255,255,0.04); }
+  .dmode-sq { width: 32px; height: 32px; padding: 0; }
+  .dmode-amber  { color: var(--accent-amber); border-color: var(--accent-amber); }
+  .dmode-amber.active { background-color: rgba(255,157,61,0.20); box-shadow: inset 0 0 0 1px var(--accent-amber); }
+  .dmode-green  { color: var(--accent-green); border-color: var(--accent-green); }
+  .dmode-green.active { background-color: rgba(61,220,132,0.18); box-shadow: inset 0 0 0 1px var(--accent-green); }
+  .dmode-red    { color: var(--accent-red);   border-color: var(--accent-red); }
+  .dmode-red.active   { background-color: rgba(255,71,86,0.18); box-shadow: inset 0 0 0 1px var(--accent-red); }
+
+  /* Params panel collapse */
+  .params-panel { width: 290px; transition: width .18s ease; }
+  .params-panel.collapsed { width: 44px; }
+  .params-panel.collapsed .panel-body { display: none; }
+  .params-panel:not(.collapsed) .collapsed-rail { display: none; }
+  .collapsed-rail {
+    display: flex; flex-direction: column; align-items: center; gap: 8px;
+    padding: 10px 6px;
+  }
+  .rail-btn {
+    width: 32px; height: 32px;
+    display: inline-flex; align-items: center; justify-content: center;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    background: var(--surface-0); color: var(--text-secondary);
+    cursor: pointer; transition: color .12s, border-color .12s, background-color .12s;
+    font-family: 'JetBrains Mono', monospace; font-size: 12px;
+  }
+  .rail-btn:hover { color: var(--text-primary); border-color: var(--border-raised); background: var(--surface-2); }
+  .collapse-btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 26px; height: 26px;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    background: var(--surface-1); color: var(--text-secondary);
+    cursor: pointer; transition: color .12s, border-color .12s;
+    font-family: 'JetBrains Mono', monospace; font-size: 12px;
+  }
+  .collapse-btn:hover { color: var(--accent-amber); border-color: var(--accent-amber); }
+
+  /* Tab nav */
+  .tab {
+    display: inline-flex; align-items: center;
+    height: 48px; padding: 0 14px;
+    font: 500 12px/1 'JetBrains Mono', monospace;
+    letter-spacing: 0.10em; text-transform: uppercase;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+  }
+  .tab:hover { color: var(--text-primary); }
+  .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
+
+  /* Icon buttons in header */
+  .ibtn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    color: var(--text-secondary); background: transparent;
+    transition: color .12s, border-color .12s, background-color .12s;
+    cursor: pointer;
+  }
+  .ibtn:hover { color: var(--text-primary); border-color: var(--border-raised); background: var(--surface-2); }
+  .ibtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
+  .ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,0.08); }
+
+  /* Flight list row */
+  .fl-row {
+    display: flex; align-items: center; gap: 8px;
+    height: 28px; padding: 0 12px;
+    border-bottom: 1px solid var(--border-hair);
+    cursor: pointer;
+    font-family: 'JetBrains Mono', monospace; font-size: 12px;
+    color: var(--text-primary);
+  }
+  .fl-row:hover { background: var(--surface-2); }
+  .fl-row.active { background: var(--surface-2); position: relative; }
+  .fl-row.active::before {
+    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
+    background: var(--accent-amber);
+  }
+  .fl-row .fid { color: var(--accent-amber); }
+  .fl-row .meta { margin-left: auto; font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; }
+
+  /* Waypoint row */
+  .wp-row {
+    display: flex; align-items: center; gap: 10px;
+    height: 30px; padding: 0 4px;
+    border-bottom: 1px solid var(--border-hair);
+    font-size: 12px; color: var(--text-primary);
+  }
+  .wp-row:last-child { border-bottom: none; }
+  .wp-row .wp-id {
+    font-family: 'JetBrains Mono', monospace; font-size: 11px;
+    color: var(--text-secondary); width: 28px;
+    font-variant-numeric: tabular-nums;
+  }
+  .wp-row .wp-marker { width: 10px; height: 10px; flex-shrink: 0; }
+  .wp-row .wp-tag {
+    margin-left: auto; font-family: 'JetBrains Mono', monospace;
+    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--text-muted); border: 1px solid var(--border-hair);
+    padding: 1px 5px; border-radius: 2px;
+  }
+
+  /* Map background grid */
+  .map-grid {
+    background-color: #0F1318;
+    background-image:
+      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
+      radial-gradient(ellipse at 30% 40%, rgba(54,214,197,0.04), transparent 60%),
+      radial-gradient(ellipse at 80% 70%, rgba(255,157,61,0.03), transparent 65%);
+    background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
+  }
+
+  /* GPS-Denied accent state */
+  .gps-active-frame {
+    border: 2px solid var(--accent-red) !important;
+    box-shadow: inset 0 0 0 1px rgba(255,71,86,0.12);
+  }
+  .gps-active-frame.bracket::before, .gps-active-frame.bracket::after,
+  .gps-active-frame.bracket > .br::before, .gps-active-frame.bracket > .br::after {
+    border-color: var(--accent-red);
+  }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 8px; height: 8px; }
+  ::-webkit-scrollbar-track { background: var(--surface-0); }
+  ::-webkit-scrollbar-thumb { background: var(--border-hair); border-radius: 0; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--border-raised); }
+
+  /* Map waypoint markers (svg-styled overlays) */
+  .wp-marker-map {
+    position: absolute; transform: translate(-50%, -50%);
+    pointer-events: auto;
+  }
+  .wp-square { width: 12px; height: 12px; background: #0A0D10; border: 1.5px solid var(--accent-cyan); }
+  .wp-square.corrected { border-color: var(--accent-cyan); background: rgba(54,214,197,0.15); }
+  .wp-diamond { width: 14px; height: 14px; background: var(--accent-green); border: 1.5px solid #0A0D10; transform: translate(-50%,-50%) rotate(45deg); box-shadow: 0 0 0 1px var(--accent-green); }
+  .wp-octagon {
+    width: 16px; height: 16px; background: var(--accent-red);
+    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
+  }
+
+  .crosshair-x, .crosshair-y {
+    position: absolute; background: rgba(255,255,255,0.06); pointer-events: none;
+  }
+  .crosshair-x { left: 0; right: 0; height: 1px; top: 50%; }
+  .crosshair-y { top: 0; bottom: 0; width: 1px; left: 50%; }
+
+  .map-axis-label {
+    position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 9px;
+    color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase;
+  }
+
+  details > summary { list-style: none; cursor: pointer; }
+  details > summary::-webkit-details-marker { display: none; }
+</style>
+</head>
+<body class="h-screen flex flex-col overflow-hidden">
+
+<!-- =========================  GLOBAL HEADER ========================= -->
+<header class="h-12 flex items-center px-4 gap-3 border-b" style="border-color: var(--border-hair); background: var(--surface-1);">
+  <span class="mono font-bold" style="color: var(--accent-amber); letter-spacing: 0.2em; font-size: 14px;">AZAION</span>
+
+  <span class="micro" style="color: var(--text-muted);">//</span>
+
+  <button class="inline-flex items-center gap-2 mono" style="height: 28px; padding: 0 10px; background: var(--surface-1); border: 1px solid var(--accent-amber); border-radius: 2px; font-size: 11px; letter-spacing: 0.10em;">
+    <span class="live-dot"></span>
+    <span style="color: var(--text-primary);">FL-03</span>
+    <span style="color: var(--text-secondary); font-size: 10px;">▾</span>
+  </button>
+
+  <nav class="flex items-center self-stretch ml-3">
+    <a href="flights.html"          class="tab active">Flights</a>
+    <a href="annotations.html"      class="tab">Annotations</a>
+    <a href="dataset_explorer.html" class="tab">Dataset</a>
+    <a href="admin.html"            class="tab">Admin</a>
+  </nav>
+
+  <div class="ml-auto flex items-center gap-2" style="font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase;">
+    <span class="live-dot"></span>
+    <span style="color: var(--accent-cyan);">LINK</span>
+    <span style="color: var(--border-raised);">|</span>
+    <span style="color: var(--text-secondary); text-transform: none; letter-spacing: 0;">user@azaion.com</span>
+    <span style="color: var(--border-raised); margin: 0 4px;">|</span>
+    <a href="settings.html" class="ibtn" title="Settings">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+    </a>
+    <a href="#" class="ibtn danger" title="Sign out">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+    </a>
+  </div>
+</header>
+
+<!-- =========================  MAIN ROW ========================= -->
+<div class="flex flex-1 overflow-hidden">
+
+  <!-- =========================================================== -->
+  <!-- FLIGHT LIST SIDEBAR (~200px)                                  -->
+  <!-- =========================================================== -->
+  <aside class="w-[210px] shrink-0 flex flex-col border-r hair" style="background: var(--surface-1);">
+    <div class="px-3 py-2.5 flex items-center justify-between border-b hair">
+      <span class="section-head">Flight Roster</span>
+      <span class="micro num" style="color: var(--text-muted);">04</span>
+    </div>
+
+    <!-- Filter -->
+    <div class="px-3 py-2 border-b hair">
+      <div class="relative">
+        <input class="ipt h-7 text-[11px] pl-7 mono" placeholder="SEARCH FLIGHTS" style="letter-spacing:0.08em;">
+        <svg class="absolute left-2 top-1/2 -translate-y-1/2" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: var(--text-muted);"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+      </div>
+    </div>
+
+    <!-- Flight list -->
+    <div class="flex-1 overflow-y-auto">
+      <div class="fl-row active">
+        <span class="fid">FL02</span>
+        <span style="color: var(--accent-amber);" title="Pinned">★</span>
+        <span class="meta num">05/12</span>
+      </div>
+      <div class="fl-row">
+        <span class="fid">FL01</span>
+        <span class="meta num">05/09</span>
+      </div>
+      <div class="fl-row">
+        <span class="fid">FL03</span>
+        <span class="meta num">05/08</span>
+      </div>
+      <div class="fl-row">
+        <span class="fid">FL04</span>
+        <span class="meta num">05/03</span>
+      </div>
+      <div class="fl-row">
+        <span class="fid" style="color: var(--text-muted);">FL05</span>
+        <span class="micro" style="color: var(--text-muted);">DRAFT</span>
+        <span class="meta num">04/28</span>
+      </div>
+    </div>
+
+    <!-- Create -->
+    <div class="p-3 border-t hair">
+      <button class="btn-primary w-full flex items-center justify-center gap-2">
+        <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 1 V9 M1 5 H9" stroke="currentColor" stroke-width="1.5"/></svg>
+        Create New
+      </button>
+    </div>
+
+    <!-- Telemetry card -->
+    <div class="m-3 mt-0 bracket panel p-3" style="padding:12px;">
+      <div class="flex items-center justify-between mb-2">
+        <span class="micro" style="color: var(--accent-amber);">// Telemetry</span>
+      </div>
+      <label class="micro block mb-1">Date</label>
+      <input type="date" value="2025-03-01" class="ipt ipt-num text-[12px]">
+      <span class="br"></span>
+    </div>
+  </aside>
+
+  <!-- =========================================================== -->
+  <!-- PARAMS / GPS-DENIED PANEL (~280px) — both modes visible       -->
+  <!-- =========================================================== -->
+  <aside id="paramsPanel" class="params-panel shrink-0 overflow-y-auto border-r hair" style="background: var(--surface-1);">
+
+    <!-- Collapsed rail (visible only when .collapsed) -->
+    <div class="collapsed-rail">
+      <button class="rail-btn" onclick="toggleParams()" title="Expand parameters">»</button>
+      <span class="block w-6 h-px" style="background: var(--border-hair);"></span>
+      <button class="dmode dmode-sq dmode-amber active" title="Points">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="1.6" fill="currentColor"/><circle cx="18" cy="6" r="1.6" fill="currentColor"/><circle cx="12" cy="14" r="1.6" fill="currentColor"/><circle cx="6" cy="20" r="1.6" fill="currentColor"/><circle cx="18" cy="20" r="1.6" fill="currentColor"/></svg>
+      </button>
+      <button class="dmode dmode-sq dmode-green" title="Work Area">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="4 7 12 3 20 7 20 17 12 21 4 17"/></svg>
+      </button>
+      <button class="dmode dmode-sq dmode-red" title="No-Go Zone">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="5.6" y1="5.6" x2="18.4" y2="18.4"/></svg>
+      </button>
+    </div>
+
+    <!-- Expanded body -->
+    <div class="panel-body">
+
+    <!-- Mode toggle bar -->
+    <div class="flex items-stretch border-b hair" style="background: var(--surface-0);">
+      <button id="tabFP" onclick="setMode('fp')" class="flex-1 py-2.5 mono text-[10px] uppercase tracking-[0.14em] border-b-2 transition"
+              style="color: var(--text-primary); border-color: var(--accent-amber); background: var(--surface-1);">
+        Flight Params
+      </button>
+      <button id="tabGPS" onclick="setMode('gps')" class="flex-1 py-2.5 mono text-[10px] uppercase tracking-[0.14em] border-b-2 transition"
+              style="color: var(--text-secondary); border-color: transparent;">
+        GPS-Denied
+      </button>
+      <button class="collapse-btn shrink-0 mx-1 self-center" onclick="toggleParams()" title="Collapse">«</button>
+    </div>
+
+    <!-- ============== FLIGHT PARAMETERS ============== -->
+    <section id="flightParams" class="p-4 space-y-5">
+
+      <!-- Draw-mode selector -->
+      <div>
+        <div class="flex items-center justify-between mb-1.5">
+          <span class="micro" style="color: var(--accent-amber);">// Draw Mode</span>
+          <span class="micro num" style="color: var(--text-muted);">click map to plot</span>
+        </div>
+        <div class="grid grid-cols-3 gap-2">
+          <button class="dmode dmode-amber active" data-mode="points">
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="1.6" fill="currentColor"/><circle cx="18" cy="6" r="1.6" fill="currentColor"/><circle cx="12" cy="14" r="1.6" fill="currentColor"/><circle cx="6" cy="20" r="1.6" fill="currentColor"/><circle cx="18" cy="20" r="1.6" fill="currentColor"/><path d="M6 6l6 8 6-8M6 20l6-6 6 6" opacity="0.45"/></svg>
+            <span>Points</span>
+          </button>
+          <button class="dmode dmode-green" data-mode="work">
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="4 7 12 3 20 7 20 17 12 21 4 17"/></svg>
+            <span>Work Area</span>
+          </button>
+          <button class="dmode dmode-red" data-mode="nogo">
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="5.6" y1="5.6" x2="18.4" y2="18.4"/></svg>
+            <span>No-Go Zone</span>
+          </button>
+        </div>
+      </div>
+
+      <header class="flex items-center justify-between">
+        <h2 class="section-head">Mission Config</h2>
+        <span class="pill pill-amber"><span class="dot"></span>FL02</span>
+      </header>
+
+      <div class="bracket panel p-3 space-y-3">
+        <div>
+          <label class="micro block mb-1.5">Aircraft</label>
+          <select class="ipt">
+            <option>DJI Mavic 3 Enterprise</option>
+            <option>DJI Matrice 350 RTK</option>
+            <option>Autel EVO Max 4T</option>
+          </select>
+        </div>
+        <div class="grid grid-cols-2 gap-2">
+          <div>
+            <label class="micro block mb-1.5">Default Height</label>
+            <div class="relative">
+              <input type="number" value="100" class="ipt ipt-num pr-9">
+              <span class="absolute right-2.5 top-1/2 -translate-y-1/2 micro" style="color: var(--text-muted);">M</span>
+            </div>
+          </div>
+          <div>
+            <label class="micro block mb-1.5">Focal Length</label>
+            <div class="relative">
+              <input type="number" value="24" class="ipt ipt-num pr-10">
+              <span class="absolute right-2.5 top-1/2 -translate-y-1/2 micro" style="color: var(--text-muted);">MM</span>
+            </div>
+          </div>
+        </div>
+        <div>
+          <label class="micro block mb-1.5">Comm Address / Port</label>
+          <input type="text" value="192.168.1.42:8080" class="ipt ipt-num">
+        </div>
+        <span class="br"></span>
+      </div>
+
+      <!-- Waypoints -->
+      <div class="bracket panel p-3">
+        <header class="flex items-center justify-between mb-2.5">
+          <span class="section-head">Waypoints</span>
+          <span class="micro num" style="color: var(--text-muted);">06 PTS</span>
+        </header>
+
+        <div class="space-y-0">
+          <div class="wp-row">
+            <span class="wp-id">00</span>
+            <span class="wp-marker" style="background: var(--accent-green); transform: rotate(45deg);"></span>
+            <span class="mono text-[11px]">START</span>
+            <span class="wp-tag" style="color: var(--accent-green); border-color: var(--accent-green);">ORIGIN</span>
+          </div>
+          <div class="wp-row">
+            <span class="wp-id">01</span>
+            <span class="wp-marker" style="background: transparent; border: 1.5px solid var(--accent-cyan);"></span>
+            <span class="mono text-[11px]">Point 1</span>
+            <span class="wp-tag">TRACK</span>
+          </div>
+          <div class="wp-row">
+            <span class="wp-id">02</span>
+            <span class="wp-marker" style="background: transparent; border: 1.5px solid var(--accent-cyan);"></span>
+            <span class="mono text-[11px]">Point 2</span>
+            <span class="wp-tag" style="color: var(--accent-red); border-color: var(--accent-red);">MIL-VEH</span>
+          </div>
+          <div class="wp-row">
+            <span class="wp-id">03</span>
+            <span class="wp-marker" style="background: transparent; border: 1.5px solid var(--accent-cyan);"></span>
+            <span class="mono text-[11px]">Point 3</span>
+          </div>
+          <div class="wp-row">
+            <span class="wp-id">04</span>
+            <span class="wp-marker" style="background: transparent; border: 1.5px solid var(--accent-cyan);"></span>
+            <span class="mono text-[11px]">Point 4</span>
+            <span class="wp-tag">CONFIRM</span>
+          </div>
+          <div class="wp-row">
+            <span class="wp-id">FN</span>
+            <span class="wp-marker" style="background: var(--accent-red); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);"></span>
+            <span class="mono text-[11px]">FINISH</span>
+            <span class="wp-tag" style="color: var(--accent-red); border-color: var(--accent-red);">TARGET</span>
+          </div>
+        </div>
+        <span class="br"></span>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <button onclick="setMode('gps')" class="btn-secondary" style="color: var(--accent-red); border-color: var(--accent-red);">GPS-Denied</button>
+        <button class="btn-cyan">Upload</button>
+      </div>
+    </section>
+
+    <!-- ============== GPS-DENIED MODE ============== -->
+    <section id="gpsDenied" class="p-4 space-y-5 hidden">
+      <header class="flex items-center justify-between">
+        <h2 class="section-head" style="color: var(--accent-red);">GPS-Denied // Active</h2>
+        <span class="pill pill-red"><span class="dot pulse"></span>GPS-DENIED ACTIVE</span>
+      </header>
+
+      <!-- Frame with red accent -->
+      <div id="gpsFrame" class="bracket bracket-red panel gps-active-frame p-3">
+        <header class="flex items-center justify-between mb-3">
+          <span class="section-head" style="color: var(--accent-red);">// Orthophoto Upload</span>
+          <span class="micro num" style="color: var(--text-muted);">03 / 12</span>
+        </header>
+
+        <div class="space-y-1.5">
+          <div class="flex items-center gap-2.5 border hair px-2.5 py-2" style="background: var(--surface-0);">
+            <span class="w-6 h-6 flex items-center justify-center shrink-0 mono text-[10px]" style="background: var(--accent-cyan); color: #0A0D10; font-weight: 700;">P1</span>
+            <span class="mono text-[11px] flex-1 truncate">ortho_001.jpg</span>
+            <span class="num text-[10px]" style="color: var(--text-secondary);">48.8566, 2.3522</span>
+          </div>
+          <div class="flex items-center gap-2.5 border hair px-2.5 py-2" style="background: var(--surface-0);">
+            <span class="w-6 h-6 flex items-center justify-center shrink-0 mono text-[10px]" style="background: var(--accent-cyan); color: #0A0D10; font-weight: 700;">P2</span>
+            <span class="mono text-[11px] flex-1 truncate">ortho_002.jpg</span>
+            <span class="num text-[10px]" style="color: var(--text-secondary);">48.8612, 2.3601</span>
+          </div>
+          <div class="flex items-center gap-2.5 border hair px-2.5 py-2" style="background: var(--surface-0);">
+            <span class="w-6 h-6 flex items-center justify-center shrink-0 mono text-[10px]" style="background: var(--accent-cyan); color: #0A0D10; font-weight: 700;">P3</span>
+            <span class="mono text-[11px] flex-1 truncate">ortho_003.jpg</span>
+            <span class="num text-[10px]" style="color: var(--text-secondary);">48.8703, 2.3754</span>
+          </div>
+        </div>
+
+        <button class="w-full mt-2.5 py-2 mono text-[10px] uppercase tracking-[0.12em] border border-dashed flex items-center justify-center gap-2"
+                style="border-color: var(--border-raised); color: var(--text-secondary); background: transparent;">
+          <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 1 V9 M1 5 H9" stroke="currentColor" stroke-width="1.4"/></svg>
+          Upload Photos
+        </button>
+        <span class="br"></span>
+      </div>
+
+      <!-- Live GPS readout -->
+      <div class="bracket panel p-3">
+        <header class="flex items-center justify-between mb-2.5">
+          <span class="section-head">// Live GPS</span>
+          <span class="pill pill-green"><span class="dot pulse"></span>CONNECTED</span>
+        </header>
+        <div class="space-y-1.5 text-[12px]">
+          <div class="flex items-center justify-between py-1 border-b hair">
+            <span class="micro">Status</span>
+            <span class="mono" style="color: var(--accent-green);">CONNECTED · STREAMING</span>
+          </div>
+          <div class="flex items-center justify-between py-1 border-b hair">
+            <span class="micro">Latitude</span>
+            <span class="num">48.85660° N</span>
+          </div>
+          <div class="flex items-center justify-between py-1 border-b hair">
+            <span class="micro">Longitude</span>
+            <span class="num">02.35220° E</span>
+          </div>
+          <div class="flex items-center justify-between py-1 border-b hair">
+            <span class="micro">Satellites</span>
+            <span class="num" style="color: var(--accent-cyan);">12 / 14</span>
+          </div>
+          <div class="flex items-center justify-between py-1">
+            <span class="micro">Drift</span>
+            <span class="num" style="color: var(--accent-amber);">±2.4 M</span>
+          </div>
+        </div>
+        <span class="br"></span>
+      </div>
+
+      <!-- GPS Correction -->
+      <div class="bracket panel p-3">
+        <header class="flex items-center justify-between mb-2.5">
+          <span class="section-head">// GPS Correction</span>
+        </header>
+        <div class="space-y-2.5">
+          <div>
+            <label class="micro block mb-1.5">Waypoint #</label>
+            <input type="number" value="03" class="ipt ipt-num">
+          </div>
+          <div>
+            <label class="micro block mb-1.5">Corrected GPS</label>
+            <input type="text" value="48.86120, 2.36011" class="ipt ipt-num">
+          </div>
+          <button class="btn-primary w-full">Apply Correction</button>
+        </div>
+        <span class="br"></span>
+      </div>
+
+      <button onclick="setMode('fp')" class="btn-ghost w-full">‹ Back to Flight Params</button>
+    </section>
+
+    </div><!-- /.panel-body -->
+  </aside>
+
+  <!-- =========================================================== -->
+  <!-- MAP VIEW                                                      -->
+  <!-- =========================================================== -->
+  <main class="flex-1 relative overflow-hidden map-grid">
+
+    <!-- crosshairs -->
+    <div class="crosshair-x"></div>
+    <div class="crosshair-y"></div>
+
+    <!-- axis labels -->
+    <div class="map-axis-label" style="top: 8px; left: 12px;">SECTOR 04-K // ZOOM 17</div>
+    <div class="map-axis-label" style="top: 8px; left: 50%; transform: translateX(-50%);">— TARGET CORRIDOR —</div>
+    <div class="map-axis-label" style="bottom: 8px; left: 12px;">N 48.8566 // E 02.3522</div>
+    <div class="map-axis-label" style="bottom: 8px; right: 12px;">GRID 60M · WGS-84</div>
+
+    <!-- Compass rosette top-left -->
+    <div class="absolute top-12 left-4 w-20 h-20 flex items-center justify-center border hair bracket panel"
+         style="background: rgba(19,23,28,0.6); backdrop-filter: blur(2px);">
+      <svg width="60" height="60" viewBox="-30 -30 60 60" style="color: var(--accent-amber);">
+        <circle r="24" fill="none" stroke="currentColor" stroke-opacity="0.3" stroke-width="0.7"/>
+        <circle r="20" fill="none" stroke="currentColor" stroke-opacity="0.2" stroke-width="0.5"/>
+        <line x1="0" y1="-26" x2="0" y2="-20" stroke="currentColor" stroke-width="1.5"/>
+        <line x1="0" y1="20" x2="0" y2="26" stroke="currentColor" stroke-opacity="0.4" stroke-width="0.8"/>
+        <line x1="-26" y1="0" x2="-20" y2="0" stroke="currentColor" stroke-opacity="0.4" stroke-width="0.8"/>
+        <line x1="20" y1="0" x2="26" y2="0" stroke="currentColor" stroke-opacity="0.4" stroke-width="0.8"/>
+        <text x="0" y="-12" text-anchor="middle" font-family="JetBrains Mono" font-size="7" fill="currentColor" font-weight="700">N</text>
+        <polygon points="0,-16 -3,-8 0,-10 3,-8" fill="currentColor"/>
+      </svg>
+      <span class="br"></span>
+    </div>
+
+    <!-- SVG paths overlay -->
+    <svg class="absolute inset-0 w-full h-full" viewBox="0 0 800 600" preserveAspectRatio="none">
+      <defs>
+        <marker id="arrowCyan" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+          <path d="M0,0 L10,5 L0,10 z" fill="#36D6C5"/>
+        </marker>
+      </defs>
+      <!-- Original (planned) path — red dashed -->
+      <polyline points="150,450 250,350 350,280 450,320 550,250 650,200"
+                fill="none" stroke="#FF4756" stroke-width="1.5"
+                stroke-dasharray="5 4" opacity="0.85"/>
+      <!-- Corrected (live) path — cyan solid -->
+      <polyline points="150,460 255,358 360,290 455,328 555,260 650,210"
+                fill="none" stroke="#36D6C5" stroke-width="2"
+                marker-end="url(#arrowCyan)"/>
+      <!-- Correction ties (thin perpendicular linkers between original/corrected) -->
+      <g stroke="#36D6C5" stroke-width="0.6" stroke-dasharray="2 2" opacity="0.4">
+        <line x1="250" y1="350" x2="255" y2="358"/>
+        <line x1="350" y1="280" x2="360" y2="290"/>
+        <line x1="450" y1="320" x2="455" y2="328"/>
+        <line x1="550" y1="250" x2="555" y2="260"/>
+      </g>
+    </svg>
+
+    <!-- Waypoint markers on map -->
+    <!-- Start: diamond (green) -->
+    <div class="wp-marker-map" style="left:18.75%; top:75%;">
+      <div class="wp-diamond"></div>
+      <span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-green); letter-spacing: 0.1em;">WP-00 · START</span>
+    </div>
+    <!-- Intermediate: square handles -->
+    <div class="wp-marker-map" style="left:31.25%; top:58.3%;">
+      <div class="wp-square"></div>
+      <span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-cyan);">WP-01</span>
+    </div>
+    <div class="wp-marker-map" style="left:43.75%; top:46.7%;">
+      <div class="wp-square"></div>
+      <span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-cyan);">WP-02</span>
+    </div>
+    <div class="wp-marker-map" style="left:56.25%; top:53.3%;">
+      <div class="wp-square"></div>
+      <span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-cyan);">WP-03</span>
+      <span class="absolute -top-4 -left-1 mono text-[8px]" style="color: var(--accent-amber); letter-spacing: 0.1em;">CORRECTED</span>
+    </div>
+    <div class="wp-marker-map" style="left:68.75%; top:41.7%;">
+      <div class="wp-square"></div>
+      <span class="absolute top-3 left-3 mono text-[9px] num" style="color: var(--accent-cyan);">WP-04</span>
+    </div>
+    <!-- Finish: octagon (red) -->
+    <div class="wp-marker-map" style="left:81.25%; top:33.3%;">
+      <div class="wp-octagon"></div>
+      <span class="absolute top-3.5 left-3.5 mono text-[9px] num" style="color: var(--accent-red); letter-spacing: 0.1em;">WP-FN · TARGET</span>
+    </div>
+
+    <!-- ============ MAP HUD: TOP-RIGHT STATUS ============ -->
+    <div class="absolute top-4 right-4 w-[240px] bracket panel p-3" style="background: rgba(19,23,28,0.92); backdrop-filter: blur(4px);">
+      <header class="flex items-center justify-between mb-2.5 pb-2 border-b hair">
+        <span class="flex items-center gap-2 mono text-[10px]" style="color: var(--accent-cyan); letter-spacing: 0.14em;">
+          <span class="w-1.5 h-1.5 rounded-full pulse" style="background: var(--accent-cyan);"></span>
+          LIVE · CONNECTED
+        </span>
+        <span class="micro num" style="color: var(--text-muted);">FL02</span>
+      </header>
+      <div class="space-y-1">
+        <div class="flex items-center justify-between">
+          <span class="micro">Sat</span>
+          <span class="num text-[12px]" style="color: var(--accent-green);">12 / 14</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="micro">Lat</span>
+          <span class="num text-[12px]">48.85660° N</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="micro">Lon</span>
+          <span class="num text-[12px]">02.35220° E</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="micro">Alt</span>
+          <span class="num text-[12px]">320 M / AGL</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="micro">Hdg</span>
+          <span class="num text-[12px]" style="color: var(--accent-amber);">047° NE</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span class="micro">Spd</span>
+          <span class="num text-[12px]">11.4 M/S</span>
+        </div>
+        <div class="flex items-center justify-between pt-1.5 mt-1.5 border-t hair">
+          <span class="micro">Link</span>
+          <span class="num text-[11px]" style="color: var(--accent-green);">RSSI -52 DBM</span>
+        </div>
+      </div>
+      <span class="br"></span>
+    </div>
+
+    <!-- ============ MAP HUD: LEGEND BOTTOM-LEFT ============ -->
+    <div class="absolute bottom-12 left-4 w-[200px] bracket panel p-3" style="background: rgba(19,23,28,0.92);">
+      <header class="mb-2 pb-1.5 border-b hair">
+        <span class="section-head">// Map Legend</span>
+      </header>
+      <div class="space-y-1.5 text-[11px]">
+        <div class="flex items-center gap-2.5">
+          <svg width="22" height="6"><line x1="0" y1="3" x2="22" y2="3" stroke="#FF4756" stroke-width="1.5" stroke-dasharray="3 3"/></svg>
+          <span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Planned · Original</span>
+        </div>
+        <div class="flex items-center gap-2.5">
+          <svg width="22" height="6"><line x1="0" y1="3" x2="22" y2="3" stroke="#36D6C5" stroke-width="2"/></svg>
+          <span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Corrected · Live</span>
+        </div>
+        <div class="flex items-center gap-2.5 pt-1.5 border-t hair">
+          <div style="width:10px; height:10px; background: var(--accent-green); transform: rotate(45deg);"></div>
+          <span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Origin / Start</span>
+        </div>
+        <div class="flex items-center gap-2.5">
+          <div style="width:10px; height:10px; background: transparent; border: 1.5px solid var(--accent-cyan);"></div>
+          <span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Waypoint</span>
+        </div>
+        <div class="flex items-center gap-2.5">
+          <div style="width:11px; height:11px; background: var(--accent-red); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);"></div>
+          <span class="mono uppercase text-[10px]" style="letter-spacing: 0.1em;">Target / Finish</span>
+        </div>
+      </div>
+      <span class="br"></span>
+    </div>
+
+    <!-- ============ MAP TOOLBAR: RIGHT EDGE ============ -->
+    <div class="absolute top-1/2 right-4 -translate-y-1/2 flex flex-col gap-1.5">
+      <button class="w-8 h-8 flex items-center justify-center border hair panel mono text-[11px]" title="Zoom in" style="color: var(--text-primary);">+</button>
+      <button class="w-8 h-8 flex items-center justify-center border hair panel mono text-[11px]" title="Zoom out" style="color: var(--text-primary);">−</button>
+      <div class="w-8 h-px" style="background: var(--border-hair);"></div>
+      <button class="w-8 h-8 flex items-center justify-center border hair panel" title="Recenter" style="color: var(--accent-amber);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="8"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/></svg>
+      </button>
+      <button class="w-8 h-8 flex items-center justify-center border hair panel" title="Layers" style="color: var(--text-secondary);">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
+      </button>
+    </div>
+
+    <!-- ============ BOTTOM STATUS STRIP ============ -->
+    <div class="absolute bottom-0 left-0 right-0 h-7 flex items-center px-3 gap-4 border-t hair"
+         style="background: var(--surface-1);">
+      <span class="pill pill-green"><span class="dot pulse"></span>TELEMETRY · LIVE</span>
+      <span class="micro" style="color: var(--text-muted);">SSE</span>
+      <span class="micro num" style="color: var(--text-secondary);">FRAME 12,847 / 18,400</span>
+      <span class="micro" style="color: var(--text-muted);">·</span>
+      <span class="micro num" style="color: var(--text-secondary);">LAT 48.85660 N · LON 02.35220 E</span>
+      <span class="ml-auto micro num" style="color: var(--text-muted);">LAST PING +0.42S</span>
+    </div>
+  </main>
+
+</div>
+
+<script>
+  function setMode(mode) {
+    const fp = document.getElementById('flightParams');
+    const gps = document.getElementById('gpsDenied');
+    const tabFP = document.getElementById('tabFP');
+    const tabGPS = document.getElementById('tabGPS');
+    if (mode === 'gps') {
+      fp.classList.add('hidden');
+      gps.classList.remove('hidden');
+      tabFP.style.color = 'var(--text-secondary)';
+      tabFP.style.borderColor = 'transparent';
+      tabFP.style.background = 'transparent';
+      tabGPS.style.color = 'var(--text-primary)';
+      tabGPS.style.borderColor = 'var(--accent-red)';
+      tabGPS.style.background = 'var(--surface-1)';
+    } else {
+      gps.classList.add('hidden');
+      fp.classList.remove('hidden');
+      tabGPS.style.color = 'var(--text-secondary)';
+      tabGPS.style.borderColor = 'transparent';
+      tabGPS.style.background = 'transparent';
+      tabFP.style.color = 'var(--text-primary)';
+      tabFP.style.borderColor = 'var(--accent-amber)';
+      tabFP.style.background = 'var(--surface-1)';
+    }
+  }
+
+  function toggleParams() {
+    document.getElementById('paramsPanel').classList.toggle('collapsed');
+  }
+</script>
+
+</body>
+</html>

_docs/ui_design/v2/plugin/settings.html

@@ -0,0 +1,653 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AZAION // SETTINGS</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --surface-0:       #0A0D10;
+    --surface-1:       #13171C;
+    --surface-2:       #1A1F26;
+    --surface-input:   #0A0D10;
+    --border-hair:     #252B34;
+    --border-raised:   #3B4451;
+    --text-primary:    #E8ECF1;
+    --text-secondary:  #9AA4B2;
+    --text-muted:      #5B6573;
+    --accent-amber:    #FF9D3D;
+    --accent-cyan:     #36D6C5;
+    --accent-red:      #FF4756;
+    --accent-green:    #3DDC84;
+    --accent-blue:     #4E9EFF;
+  }
+  html, body { background: var(--surface-0); color: var(--text-primary); }
+  body {
+    font-family: 'IBM Plex Sans', system-ui, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
+  .num  { font-variant-numeric: tabular-nums; }
+
+  .micro {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    line-height: 1.4;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+  }
+  .section-heading {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--accent-amber);
+  }
+
+  /* Corner brackets — every major panel */
+  .bracket { position: relative; }
+  .bracket::before, .bracket::after,
+  .bracket > .br::before, .bracket > .br::after {
+    content: ''; position: absolute; width: 8px; height: 8px;
+    border-color: var(--accent-amber); border-style: solid; border-width: 0;
+    pointer-events: none;
+  }
+  .bracket::before  { top: -1px; left:  -1px; border-top-width: 1px;    border-left-width: 1px;  }
+  .bracket::after   { top: -1px; right: -1px; border-top-width: 1px;    border-right-width: 1px; }
+  .bracket > .br::before { bottom: -1px; left:  -1px; border-bottom-width: 1px; border-left-width: 1px;  }
+  .bracket > .br::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
+
+  .panel {
+    background: var(--surface-1);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+  }
+
+  /* Inputs */
+  .inp {
+    width: 100%;
+    background: var(--surface-input);
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    padding: 6px 10px;
+    height: 32px;
+    color: var(--text-primary);
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 12px;
+    outline: none;
+    transition: border-color .12s, box-shadow .12s;
+  }
+  .inp:focus {
+    border-color: var(--accent-amber);
+    box-shadow: 0 0 0 1px var(--accent-amber);
+  }
+  .inp.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
+  .inp::placeholder { color: var(--text-muted); }
+
+  /* Path input with folder-icon prefix */
+  .path-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .path-wrap .icon {
+    position: absolute;
+    left: 10px;
+    color: var(--text-muted);
+    display: flex; align-items: center;
+    pointer-events: none;
+  }
+  .path-wrap .inp {
+    padding-left: 30px;
+    padding-right: 70px;
+  }
+  .path-wrap .browse {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    height: 24px;
+    padding: 0 10px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    background: transparent;
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    cursor: pointer;
+    transition: color .12s, border-color .12s, background .12s;
+  }
+  .path-wrap .browse:hover {
+    color: var(--accent-amber);
+    border-color: var(--accent-amber);
+    background: rgba(255,157,61,0.06);
+  }
+
+  /* Buttons */
+  .btn {
+    display: inline-flex; align-items: center; gap: 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.10em;
+    text-transform: uppercase;
+    padding: 7px 14px;
+    border-radius: 2px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background .12s, color .12s, border-color .12s;
+    white-space: nowrap;
+  }
+  .btn-primary {
+    background: var(--accent-amber);
+    color: #0A0D10;
+    border-color: var(--accent-amber);
+  }
+  .btn-primary:hover { filter: brightness(1.05); }
+  .btn-secondary {
+    background: transparent;
+    color: var(--accent-amber);
+    border-color: var(--accent-amber);
+  }
+  .btn-secondary:hover { background: rgba(255,157,61,0.12); }
+  .btn-ghost {
+    background: transparent;
+    color: var(--text-secondary);
+    border-color: var(--border-hair);
+  }
+  .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-raised); }
+  .btn-danger-ghost {
+    background: transparent;
+    color: var(--accent-red);
+    border-color: rgba(255,71,86,0.5);
+  }
+  .btn-danger-ghost:hover { background: rgba(255,71,86,0.08); border-color: var(--accent-red); }
+
+  /* Chips for aircraft type */
+  .chip {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    padding: 2px 8px;
+    border-radius: 2px;
+    border: 1px solid;
+    background: transparent;
+  }
+  .chip .dot { width: 6px; height: 6px; border-radius: 50%; }
+  .chip-blue  { color: var(--accent-blue);  border-color: rgba(78,158,255,0.45); }
+  .chip-blue  .dot { background: var(--accent-blue); }
+  .chip-green { color: var(--accent-green); border-color: rgba(61,220,132,0.45); }
+  .chip-green .dot { background: var(--accent-green); }
+
+  /* Segmented language pills */
+  .seg {
+    display: inline-flex;
+    border: 1px solid var(--border-hair);
+    border-radius: 2px;
+    overflow: hidden;
+    background: var(--surface-input);
+  }
+  .seg button {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    padding: 7px 18px;
+    color: var(--text-secondary);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: background .12s, color .12s;
+  }
+  .seg button + button { border-left: 1px solid var(--border-hair); }
+  .seg button:hover { color: var(--text-primary); }
+  .seg button.active {
+    background: var(--accent-amber);
+    color: #0A0D10;
+    font-weight: 600;
+  }
+
+  /* Stars for default aircraft */
+  .star {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    color: var(--text-muted);
+    font-size: 18px;
+    line-height: 1;
+    padding: 4px;
+    transition: color .12s, transform .12s;
+  }
+  .star:hover { color: var(--accent-amber); }
+  .star.active { color: var(--accent-amber); }
+
+  /* Table */
+  table.ac { width: 100%; border-collapse: collapse; }
+  table.ac thead th {
+    text-align: left;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    font-weight: 500;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border-hair);
+    background: var(--surface-1);
+  }
+  table.ac tbody td {
+    padding: 0 14px;
+    height: 38px;
+    border-bottom: 1px solid var(--border-hair);
+    font-size: 13px;
+    color: var(--text-primary);
+  }
+  table.ac tbody tr:last-child td { border-bottom: 0; }
+  table.ac tbody tr:hover td { background: var(--surface-2); }
+  table.ac td.model { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
+  table.ac td.center { text-align: center; }
+
+  /* Header */
+  .topbar { height: 48px; border-bottom: 1px solid var(--border-hair); background: var(--surface-1); }
+  .logo {
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 700;
+    color: var(--accent-amber);
+    letter-spacing: 0.20em;
+    font-size: 14px;
+  }
+  .flight-pill {
+    height: 28px;
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 0 10px;
+    border: 1px solid var(--accent-amber);
+    background: var(--surface-1);
+    color: var(--text-primary);
+    border-radius: 2px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.10em;
+  }
+  .tab {
+    display: inline-flex; align-items: center;
+    height: 48px; padding: 0 14px;
+    font: 500 12px/1 'JetBrains Mono', monospace;
+    letter-spacing: 0.10em; text-transform: uppercase;
+    color: var(--text-secondary);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+  }
+  .tab:hover { color: var(--text-primary); }
+  .tab.active { color: var(--text-primary); border-bottom-color: var(--accent-amber); font-weight: 500; }
+
+  /* Live dot for status */
+  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); display: inline-block; animation: pulse 1.6s ease-in-out infinite; }
+  @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.85); } }
+
+  /* Icon buttons in header */
+  .ibtn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    border: 1px solid var(--border-hair); border-radius: 2px;
+    color: var(--text-secondary); background: transparent;
+    transition: color .12s, border-color .12s, background-color .12s;
+    cursor: pointer;
+  }
+  .ibtn:hover { color: var(--text-primary); border-color: var(--border-raised); background: var(--surface-1); }
+  .ibtn.active { color: var(--accent-amber); border-color: var(--accent-amber); background: rgba(255,157,61,0.08); }
+  .ibtn.danger:hover { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,71,86,0.08); }
+
+  .hairline { background: var(--border-hair); }
+
+  /* Sticky footer */
+  .footer-bar {
+    position: sticky;
+    bottom: 0;
+    background: linear-gradient(180deg, rgba(10,13,16,0) 0%, var(--surface-0) 50%);
+    padding-top: 16px;
+  }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-track { background: var(--surface-0); }
+  ::-webkit-scrollbar-thumb { background: var(--border-hair); border-radius: 0; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--border-raised); }
+
+  /* Tiny readout label rows */
+  .field-label {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 6px;
+  }
+  .field-hint {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin-top: 4px;
+  }
+
+  /* Unit suffix overlay for numeric inputs */
+  .num-wrap { position: relative; }
+  .num-wrap .suffix {
+    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    color: var(--text-muted);
+    pointer-events: none;
+  }
+  .num-wrap .inp { padding-right: 36px; }
+</style>
+</head>
+<body class="min-h-screen flex flex-col">
+
+<!-- ============ TOP BAR ============ -->
+<header class="topbar flex items-center px-4 gap-3 shrink-0">
+  <div class="logo">AZAION</div>
+
+  <span class="micro" style="color: var(--text-muted);">//</span>
+
+  <button class="flight-pill">
+    <span class="live-dot"></span>
+    <span class="mono" style="color: var(--text-primary);">FL-03</span>
+    <span style="color: var(--text-secondary); font-size: 10px;">▾</span>
+  </button>
+
+  <nav class="flex items-center self-stretch ml-3">
+    <a href="flights.html"          class="tab flex items-center">Flights</a>
+    <a href="annotations.html"      class="tab flex items-center">Annotations</a>
+    <a href="dataset_explorer.html" class="tab flex items-center">Dataset</a>
+    <a href="admin.html"            class="tab flex items-center">Admin</a>
+  </nav>
+
+  <div class="ml-auto flex items-center gap-2" style="font: 500 10px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase;">
+    <span class="live-dot"></span>
+    <span style="color: var(--accent-cyan);">LINK</span>
+    <span style="color: var(--border-raised);">|</span>
+    <span style="color: var(--text-secondary); text-transform: none; letter-spacing: 0;">user@azaion.com</span>
+    <span style="color: var(--border-raised); margin: 0 4px;">|</span>
+    <a href="settings.html" class="ibtn active" title="Settings">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+    </a>
+    <a href="#" class="ibtn danger" title="Sign out">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+    </a>
+  </div>
+</header>
+
+<!-- ============ MAIN GRID ============ -->
+<main class="flex-1 pt-5 px-6 pb-6 flex flex-col gap-5 overflow-y-auto">
+
+  <!-- ROW 1: Tenant / Directories / Aircrafts -->
+  <section class="flex gap-5 items-start">
+
+    <!-- TENANT CONFIGURATION -->
+    <div class="w-[300px] shrink-0">
+      <div class="flex items-center justify-between mb-2">
+        <span class="section-heading">TENANT&nbsp;CONFIGURATION</span>
+        <span class="micro">01</span>
+      </div>
+      <div class="bracket panel p-4">
+        <div class="space-y-3">
+
+          <div>
+            <div class="field-label">
+              <label class="micro">Military Unit</label>
+              <span class="mono text-[9px] text-[var(--text-muted)]">REQ</span>
+            </div>
+            <input class="inp" type="text" value="72nd Mechanized Brigade">
+          </div>
+
+          <div>
+            <div class="field-label">
+              <label class="micro">Name</label>
+            </div>
+            <input class="inp" type="text" value="Alpha Company">
+          </div>
+
+          <div class="grid grid-cols-2 gap-3">
+            <div>
+              <div class="field-label">
+                <label class="micro">Cam&nbsp;Width</label>
+                <span class="mono text-[9px] text-[var(--text-muted)]">PX</span>
+              </div>
+              <div class="num-wrap">
+                <input class="inp mono num" type="text" value="1920">
+                <span class="suffix">px</span>
+              </div>
+            </div>
+            <div>
+              <div class="field-label">
+                <label class="micro">Cam&nbsp;FoV</label>
+                <span class="mono text-[9px] text-[var(--text-muted)]">DEG</span>
+              </div>
+              <div class="num-wrap">
+                <input class="inp mono num" type="text" value="84.0">
+                <span class="suffix">°</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <span class="br"></span>
+      </div>
+    </div>
+
+    <!-- DIRECTORIES -->
+    <div class="w-[340px] shrink-0">
+      <div class="flex items-center justify-between mb-2">
+        <span class="section-heading">DIRECTORIES</span>
+        <span class="micro">02</span>
+      </div>
+      <div class="bracket panel p-4">
+        <div class="space-y-3">
+
+          <div>
+            <div class="field-label">
+              <label class="micro">Images&nbsp;Dir</label>
+              <span class="mono text-[9px] text-[var(--accent-green)]">MOUNTED</span>
+            </div>
+            <div class="path-wrap">
+              <span class="icon">
+                <!-- folder icon -->
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
+                </svg>
+              </span>
+              <input class="inp mono" type="text" value="/data/azaion/images">
+              <button class="browse" type="button">Browse</button>
+            </div>
+          </div>
+
+          <div>
+            <div class="field-label">
+              <label class="micro">Labels&nbsp;Dir</label>
+              <span class="mono text-[9px] text-[var(--accent-green)]">MOUNTED</span>
+            </div>
+            <div class="path-wrap">
+              <span class="icon">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
+                </svg>
+              </span>
+              <input class="inp mono" type="text" value="/data/azaion/labels">
+              <button class="browse" type="button">Browse</button>
+            </div>
+          </div>
+
+          <div>
+            <div class="field-label">
+              <label class="micro">Thumbnails&nbsp;Dir</label>
+              <span class="mono text-[9px] text-[var(--accent-amber)]">CACHE</span>
+            </div>
+            <div class="path-wrap">
+              <span class="icon">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h4.4l1.6 2H19.5A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5v-11Z"/>
+                </svg>
+              </span>
+              <input class="inp mono" type="text" value="/var/cache/azaion/thumbs">
+              <button class="browse" type="button">Browse</button>
+            </div>
+          </div>
+
+          <div class="mt-3 pt-3 border-t border-[var(--border-hair)] flex items-center justify-between">
+            <span class="micro">Storage&nbsp;Free</span>
+            <span class="mono num text-[11px] text-[var(--text-primary)]">412.8 / 960.0 GB</span>
+          </div>
+
+        </div>
+        <span class="br"></span>
+      </div>
+    </div>
+
+    <!-- AIRCRAFTS -->
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between mb-2">
+        <div class="flex items-center gap-3">
+          <span class="section-heading">AIRCRAFTS</span>
+          <span class="micro">03</span>
+          <span class="mono text-[10px] text-[var(--text-muted)]">·&nbsp;4&nbsp;REGISTERED</span>
+        </div>
+        <button class="btn btn-primary" type="button">
+          <span class="text-[14px] leading-none">+</span>
+          <span>Add&nbsp;Aircraft</span>
+        </button>
+      </div>
+
+      <div class="bracket panel overflow-hidden">
+        <table class="ac">
+          <thead>
+            <tr>
+              <th class="w-[44%]">Model</th>
+              <th>Type</th>
+              <th class="text-center w-24">Default</th>
+              <th class="w-12"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="model">DJI&nbsp;Mavic&nbsp;3&nbsp;Enterprise</td>
+              <td><span class="chip chip-green"><span class="dot"></span>Copter</span></td>
+              <td class="center"><button class="star active" title="Default">★</button></td>
+              <td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
+            </tr>
+            <tr>
+              <td class="model">Matrice&nbsp;300&nbsp;RTK</td>
+              <td><span class="chip chip-green"><span class="dot"></span>Copter</span></td>
+              <td class="center"><button class="star" title="Set default">☆</button></td>
+              <td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
+            </tr>
+            <tr>
+              <td class="model">Fixed-Wing&nbsp;Scout&nbsp;Mk.II</td>
+              <td><span class="chip chip-blue"><span class="dot"></span>Plane</span></td>
+              <td class="center"><button class="star" title="Set default">☆</button></td>
+              <td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
+            </tr>
+            <tr>
+              <td class="model">Leleka-100</td>
+              <td><span class="chip chip-blue"><span class="dot"></span>Plane</span></td>
+              <td class="center"><button class="star" title="Set default">☆</button></td>
+              <td class="center"><span class="mono text-[var(--text-muted)]">⋯</span></td>
+            </tr>
+          </tbody>
+        </table>
+        <span class="br"></span>
+      </div>
+    </div>
+
+  </section>
+
+  <!-- ROW 2: Language + Session -->
+  <section class="flex gap-5 items-start">
+
+    <!-- LANGUAGE -->
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between mb-2">
+        <div class="flex items-center gap-3">
+          <span class="section-heading">LANGUAGE</span>
+          <span class="micro">04</span>
+        </div>
+        <span class="micro">Locale&nbsp;·&nbsp;<span class="text-[var(--text-primary)]">EN-US</span></span>
+      </div>
+      <div class="bracket panel p-4">
+        <div class="flex items-center gap-6 flex-wrap">
+          <div class="seg" role="tablist">
+            <button class="active" type="button">EN</button>
+            <button type="button">UA</button>
+          </div>
+          <div class="flex flex-col">
+            <span class="micro">Affects all UI text</span>
+            <span class="mono text-[10px] text-[var(--text-muted)] mt-1">Detection class names also use the localized field from seed data.</span>
+          </div>
+          <div class="ml-auto flex items-center gap-2 mono text-[10px] text-[var(--text-muted)]">
+            <span class="live-dot" style="background:var(--accent-green)"></span>
+            <span>i18n&nbsp;BUNDLE&nbsp;<span class="text-[var(--text-secondary)] num">v2.4.1</span></span>
+          </div>
+        </div>
+        <span class="br"></span>
+      </div>
+    </div>
+
+    <!-- SESSION -->
+    <div class="w-[380px] shrink-0">
+      <div class="flex items-center justify-between mb-2">
+        <div class="flex items-center gap-3">
+          <span class="section-heading">SESSION</span>
+          <span class="micro">05</span>
+        </div>
+        <span class="micro text-[var(--accent-cyan)]">ACTIVE</span>
+      </div>
+      <div class="bracket panel p-4">
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex flex-col min-w-0">
+            <span class="micro">Last&nbsp;Login</span>
+            <span class="mono num text-[12px] text-[var(--text-primary)] mt-1">2026-05-16&nbsp;·&nbsp;08:42:11&nbsp;UTC</span>
+            <span class="mono text-[10px] text-[var(--text-muted)] mt-0.5 truncate">SRC&nbsp;10.42.13.7&nbsp;·&nbsp;TOKEN&nbsp;…f3a9c1</span>
+          </div>
+          <button class="btn btn-danger-ghost shrink-0" type="button">
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+              <polyline points="16 17 21 12 16 7"/>
+              <line x1="21" y1="12" x2="9" y2="12"/>
+            </svg>
+            Sign&nbsp;out&nbsp;everywhere
+          </button>
+        </div>
+        <span class="br"></span>
+      </div>
+    </div>
+
+  </section>
+
+  <!-- ============ STICKY FOOTER ============ -->
+  <div class="footer-bar mt-auto">
+    <div class="flex items-center gap-4 pt-4 border-t border-[var(--border-hair)]">
+      <div class="flex items-center gap-2 mono text-[10px] text-[var(--text-muted)] uppercase tracking-[0.14em]">
+        <span class="live-dot"></span>
+        <span>Unsaved&nbsp;changes&nbsp;detected&nbsp;in&nbsp;<span class="text-[var(--accent-amber)]">TENANT</span></span>
+      </div>
+      <div class="ml-auto flex items-center gap-3">
+        <button class="btn btn-ghost" type="button">Cancel</button>
+        <button class="btn btn-primary" type="button">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+          Save&nbsp;Changes
+        </button>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+</body>
+</html>

_docs/ui_design/v2/stitch/admin.html

@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>AZAION TACTICAL OPS - ADMIN</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        surface0: "#0A0D10",
+                        surface1: "#13171C",
+                        surface2: "#1A1F26",
+                        hairline: "#252B34",
+                        raised: "#3B4451",
+                        amber: "#FF9D3D",
+                        cyan: "#36D6C5",
+                        red: "#FF4756",
+                        green: "#3DDC84",
+                        blue: "#4E9EFF",
+                        textPrimary: "#E8ECF1",
+                        textSecondary: "#9AA4B2",
+                        textMuted: "#5B6573"
+                    },
+                    fontFamily: {
+                        headline: ["JetBrains Mono", "monospace"],
+                        mono: ["JetBrains Mono", "monospace"],
+                        body: ["IBM Plex Sans", "sans-serif"]
+                    },
+                    letterSpacing: {
+                        micro: "0.12em"
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        body {
+            background-color: #0A0D10;
+            color: #E8ECF1;
+            font-family: 'IBM Plex Sans', sans-serif;
+            background-image: 
+                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+            background-size: 60px 60px;
+        }
+        .mono-label {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 10px;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+        }
+        .tabular-nums {
+            font-variant-numeric: tabular-nums;
+        }
+        .bracket {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-color: #3B4451;
+        }
+        .bracket-tl { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
+        .bracket-tr { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }
+        .bracket-bl { bottom: -1px; left: -1px; border-bottom: 1px solid; border-left: 1px solid; }
+        .bracket-br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
+        
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+            font-size: 18px;
+        }
+    </style>
+</head>
+<body class="flex flex-col h-screen overflow-hidden">
+<!-- TopAppBar -->
+<header class="h-12 flex justify-between items-center px-4 z-50 bg-[#0A0D10] border-b border-[#252B34]">
+<div class="flex items-center gap-6">
+<span class="font-headline font-bold text-lg tracking-widest text-[#FF9D3D]">AZAION</span>
+<div class="flex items-center gap-1 px-2 py-1 bg-surface2 border border-hairline rounded cursor-pointer">
+<span class="mono-label text-amber">FL02</span>
+<span class="material-symbols-outlined text-amber">arrow_drop_down</span>
+</div>
+<nav class="flex gap-6 h-full">
+<a class="text-[#9AA4B2] font-mono text-[10px] tracking-[0.12em] hover:text-[#E8ECF1] flex items-center h-full" href="#">FLIGHTS</a>
+<a class="text-[#9AA4B2] font-mono text-[10px] tracking-[0.12em] hover:text-[#E8ECF1] flex items-center h-full" href="#">ANNOTATIONS</a>
+<a class="text-[#9AA4B2] font-mono text-[10px] tracking-[0.12em] hover:text-[#E8ECF1] flex items-center h-full" href="#">DATASET</a>
+<a class="text-[#FF9D3D] border-b-2 border-[#FF9D3D] pb-1 font-mono text-[10px] tracking-[0.12em] flex items-center h-full mt-[2px]" href="#">ADMIN</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="relative w-64">
+<input class="w-full bg-surface0 border border-hairline h-8 px-8 mono-label focus:border-amber focus:ring-0" placeholder="GLOBAL_SEARCH" type="text"/>
+<span class="material-symbols-outlined absolute left-2 top-1.5 text-textMuted">search</span>
+</div>
+<span class="material-symbols-outlined text-textSecondary hover:text-amber cursor-pointer">notifications</span>
+<span class="material-symbols-outlined text-textSecondary hover:text-amber cursor-pointer">settings</span>
+<div class="w-8 h-8 rounded-full bg-surface2 border border-hairline overflow-hidden">
+<img alt="OPERATOR_AVATAR" class="w-full h-full object-cover" data-alt="A professional headshot of a focused military drone operator in a high-tech control room environment. The lighting is low-key with cool blue and cyan accents reflected on his face from nearby monitors. He wears a tactical dark uniform. The aesthetic is clean, sharp, and highly technical, fitting a mission-critical command center atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBU5gvFwmb64UKSwL3Ij5pvazF60_m-h5ToNkDk0ZxBh-lKJJ_zcYTnt8CXFwykIaNV9ixI4LGYLsLBAZ_fXJ50IKjvIXutgApi3PcZHqYlJ_G9g7uArAAB1aY_2w3kTzJZQt1LeIu_8Tq5tBbmTkvt5noMKmA1bYt9TsAOLG8p4Xf-Hr0n0Vtd90FS4BI2-oIIzchTu-7Q-kw7XNzVlMJmIUs4dxQuznF-lVTHx5yfQttz8VjA2iAuimfey1NfHoid9LeeOtCHxzKe"/>
+</div>
+</div>
+</header>
+<main class="flex flex-1 overflow-hidden">
+<!-- LEFT COLUMN: DETECTION CLASSES -->
+<aside class="w-[340px] border-r border-hairline bg-surface1 flex flex-col">
+<div class="p-4 border-b border-hairline flex justify-between items-center">
+<h2 class="mono-label font-bold text-textPrimary">DETECTION CLASSES</h2>
+<button class="bg-amber text-surface0 px-3 py-1.5 rounded-sm mono-label font-bold hover:opacity-90 active:scale-95 transition-all">
+                    + ADD CLASS
+                </button>
+</div>
+<div class="p-4 border-b border-hairline">
+<div class="relative">
+<input class="w-full bg-surface0 border border-hairline h-8 px-8 mono-label focus:border-amber focus:ring-0" placeholder="SEARCH_CLASSES..." type="text"/>
+<span class="material-symbols-outlined absolute left-2 top-1.5 text-textMuted text-sm">filter_list</span>
+</div>
+</div>
+<div class="flex-1 overflow-y-auto">
+<table class="w-full text-left border-collapse">
+<tbody class="mono-label tabular-nums">
+<!-- Rows -->
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group px-4">
+<td class="pl-4 text-textMuted w-12">00</td>
+<td class="text-textPrimary">ArmorVehicle</td>
+<td class="w-8"><div class="w-3 h-3 bg-red"></div></td>
+<td class="pr-4 text-right opacity-0 group-hover:opacity-100 transition-opacity">
+<span class="material-symbols-outlined text-textMuted hover:text-amber cursor-pointer mr-2">edit</span>
+<span class="material-symbols-outlined text-textMuted hover:text-red cursor-pointer">delete</span>
+</td>
+</tr>
+<!-- TRUCK (Inline Edit Mode) -->
+<tr class="h-10 border-b border-hairline bg-surface2 border-l-2 border-l-amber">
+<td class="pl-4 text-amber w-12">01</td>
+<td>
+<input class="bg-surface0 border border-amber h-7 px-2 text-textPrimary text-[10px] w-32 mono-label focus:ring-0" type="text" value="Truck"/>
+</td>
+<td class="w-8"><div class="w-3 h-3 bg-amber"></div></td>
+<td class="pr-4 text-right">
+<span class="material-symbols-outlined text-amber cursor-pointer mr-2">check</span>
+<span class="material-symbols-outlined text-textMuted cursor-pointer">close</span>
+</td>
+</tr>
+<!-- Rest of the 19 rows -->
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">02</td><td class="text-textPrimary">Vehicle</td><td><div class="w-3 h-3 bg-blue"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">03</td><td class="text-textPrimary">Artillery</td><td><div class="w-3 h-3 bg-cyan"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">04</td><td class="text-textPrimary">Shadow</td><td><div class="w-3 h-3 bg-raised"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">05</td><td class="text-textPrimary">Trenches</td><td><div class="w-3 h-3 bg-textMuted"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">06</td><td class="text-textPrimary">MilitaryMan</td><td><div class="w-3 h-3 bg-green"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">07</td><td class="text-textPrimary">TyreTracks</td><td><div class="w-3 h-3 bg-raised"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">08</td><td class="text-textPrimary">AdditionArmoredTank</td><td><div class="w-3 h-3 bg-red"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">09</td><td class="text-textPrimary">Smoke</td><td><div class="w-3 h-3 bg-white"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">10</td><td class="text-textPrimary">Plane</td><td><div class="w-3 h-3 bg-blue"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">11</td><td class="text-textPrimary">Moto</td><td><div class="w-3 h-3 bg-amber"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">12</td><td class="text-textPrimary">CamouflageNet</td><td><div class="w-3 h-3 bg-green"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">13</td><td class="text-textPrimary">CamouflageBranches</td><td><div class="w-3 h-3 bg-green"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">14</td><td class="text-textPrimary">Roof</td><td><div class="w-3 h-3 bg-textSecondary"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">15</td><td class="text-textPrimary">Building</td><td><div class="w-3 h-3 bg-textSecondary"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">16</td><td class="text-textPrimary">Caponier</td><td><div class="w-3 h-3 bg-raised"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">17</td><td class="text-textPrimary">Ammo</td><td><div class="w-3 h-3 bg-red"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+<tr class="h-10 border-b border-hairline hover:bg-surface2 group"><td class="pl-4 text-textMuted">18</td><td class="text-textPrimary">Protect.Struct</td><td><div class="w-3 h-3 bg-cyan"></div></td><td class="pr-4 text-right opacity-0 group-hover:opacity-100"><span class="material-symbols-outlined text-textMuted mr-2">edit</span><span class="material-symbols-outlined text-textMuted">delete</span></td></tr>
+</tbody>
+</table>
+</div>
+</aside>
+<!-- CENTER COLUMN: MAIN SETTINGS -->
+<section class="flex-1 overflow-y-auto bg-surface0 p-6 flex flex-col gap-6">
+<!-- AI RECOGNITION SETTINGS -->
+<div class="bg-surface1 border border-hairline p-6 relative">
+<div class="bracket bracket-tl"></div><div class="bracket bracket-tr"></div><div class="bracket bracket-bl"></div><div class="bracket bracket-br"></div>
+<h3 class="mono-label text-textPrimary font-bold mb-6 flex items-center gap-2">
+<span class="material-symbols-outlined text-amber">psychology</span>
+                    AI RECOGNITION SETTINGS
+                </h3>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+<div class="flex justify-between items-center border-b border-hairline pb-4">
+<span class="mono-label text-textSecondary"># FRAMES_PER_SEC</span>
+<input class="w-16 bg-surface0 border border-hairline h-8 px-2 mono-label text-right focus:border-amber focus:ring-0" type="number" value="4"/>
+</div>
+<div class="flex justify-between items-center border-b border-hairline pb-4">
+<span class="mono-label text-textSecondary">MIN_SECONDS</span>
+<input class="w-16 bg-surface0 border border-hairline h-8 px-2 mono-label text-right focus:border-amber focus:ring-0" type="number" value="2"/>
+</div>
+<div class="flex justify-between items-center border-b border-hairline pb-4">
+<span class="mono-label text-textSecondary">MIN_CONFIDENCE</span>
+<div class="flex items-center gap-2">
+<input class="w-16 bg-surface0 border border-hairline h-8 px-2 mono-label text-right focus:border-amber focus:ring-0" type="number" value="25"/>
+<span class="mono-label text-textMuted">%</span>
+</div>
+</div>
+</div>
+</div>
+<!-- GPS DEVICE SETTINGS -->
+<div class="bg-surface1 border border-hairline p-6 relative">
+<div class="bracket bracket-tl"></div><div class="bracket bracket-tr"></div><div class="bracket bracket-bl"></div><div class="bracket bracket-br"></div>
+<h3 class="mono-label text-textPrimary font-bold mb-6 flex items-center gap-2">
+<span class="material-symbols-outlined text-cyan">location_on</span>
+                    GPS DEVICE SETTINGS
+                </h3>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
+<div class="flex flex-col gap-2">
+<span class="mono-label text-textMuted">IP_ADDRESS</span>
+<input class="w-full bg-surface0 border border-hairline h-8 px-3 mono-label focus:border-amber focus:ring-0 tabular-nums" type="text" value="192.168.1.100"/>
+</div>
+<div class="flex flex-col gap-2">
+<span class="mono-label text-textMuted">PORT</span>
+<input class="w-full bg-surface0 border border-hairline h-8 px-3 mono-label focus:border-amber focus:ring-0 tabular-nums" type="text" value="9001"/>
+</div>
+</div>
+<div class="flex flex-col gap-2">
+<span class="mono-label text-textMuted">PROTOCOL_SELECTION</span>
+<div class="flex gap-2">
+<button class="bg-amber text-surface0 px-4 py-1.5 mono-label font-bold border border-amber">NMEA</button>
+<button class="bg-surface0 text-textSecondary px-4 py-1.5 mono-label border border-hairline hover:border-raised">UBX</button>
+<button class="bg-surface0 text-textSecondary px-4 py-1.5 mono-label border border-hairline hover:border-raised">MAVLINK</button>
+</div>
+</div>
+</div>
+<!-- USER MANAGEMENT -->
+<div class="bg-surface1 border border-hairline flex-1 relative flex flex-col min-h-[300px]">
+<div class="bracket bracket-tl"></div><div class="bracket bracket-tr"></div><div class="bracket bracket-bl"></div><div class="bracket bracket-br"></div>
+<div class="p-6 border-b border-hairline flex justify-between items-center">
+<h3 class="mono-label text-textPrimary font-bold flex items-center gap-2">
+<span class="material-symbols-outlined text-textMuted">group</span>
+                        USER MANAGEMENT
+                    </h3>
+<button class="border border-amber text-amber px-3 py-1.5 rounded-sm mono-label hover:bg-amber/10 transition-all">
+                        + CREATE USER
+                    </button>
+</div>
+<div class="flex-1">
+<table class="w-full text-left">
+<thead>
+<tr class="bg-surface2 border-b border-hairline">
+<th class="px-6 py-3 mono-label text-textMuted font-medium">NAME</th>
+<th class="px-6 py-3 mono-label text-textMuted font-medium">EMAIL</th>
+<th class="px-6 py-3 mono-label text-textMuted font-medium">ROLE</th>
+<th class="px-6 py-3 mono-label text-textMuted font-medium text-right">STATUS</th>
+</tr>
+</thead>
+<tbody class="divide-y divide-hairline mono-label">
+<tr class="hover:bg-surface2 transition-colors">
+<td class="px-6 py-3 text-textPrimary">COMMANDER_ALPHA</td>
+<td class="px-6 py-3 text-textSecondary">alpha@azaion.mil</td>
+<td class="px-6 py-3">
+<span class="px-2 py-0.5 border border-red text-red rounded-full text-[9px]">ADMIN</span>
+</td>
+<td class="px-6 py-3 text-right">
+<span class="inline-block w-1.5 h-1.5 rounded-full bg-green mr-1"></span>
+<span class="text-green">ONLINE</span>
+</td>
+</tr>
+<tr class="hover:bg-surface2 transition-colors">
+<td class="px-6 py-3 text-textPrimary">OPERATOR_72</td>
+<td class="px-6 py-3 text-textSecondary">op72@azaion.mil</td>
+<td class="px-6 py-3">
+<span class="px-2 py-0.5 border border-amber text-amber rounded-full text-[9px]">OPERATOR</span>
+</td>
+<td class="px-6 py-3 text-right">
+<span class="inline-block w-1.5 h-1.5 rounded-full bg-green mr-1"></span>
+<span class="text-green">ONLINE</span>
+</td>
+</tr>
+<tr class="hover:bg-surface2 transition-colors">
+<td class="px-6 py-3 text-textPrimary">ANALYST_KAPPA</td>
+<td class="px-6 py-3 text-textSecondary">kappa@azaion.mil</td>
+<td class="px-6 py-3">
+<span class="px-2 py-0.5 border border-hairline text-textMuted rounded-full text-[9px]">VIEWER</span>
+</td>
+<td class="px-6 py-3 text-right">
+<span class="inline-block w-1.5 h-1.5 rounded-full bg-textMuted mr-1"></span>
+<span class="text-textMuted">OFFLINE</span>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</section>
+<!-- RIGHT COLUMN: DEFAULT AIRCRAFTS -->
+<aside class="w-[280px] border-l border-hairline bg-surface1 flex flex-col">
+<div class="p-4 border-b border-hairline">
+<h2 class="mono-label font-bold text-textPrimary">DEFAULT AIRCRAFTS</h2>
+</div>
+<div class="flex-1 p-2 flex flex-col gap-2">
+<!-- Aircraft Rows -->
+<div class="bg-surface2 border border-hairline p-3 group relative hover:border-raised transition-all cursor-pointer">
+<div class="flex justify-between items-start mb-2">
+<span class="px-1.5 py-0.5 bg-blue text-surface0 text-[9px] font-bold rounded-sm">P</span>
+<span class="material-symbols-outlined text-amber tabular-nums" style="font-variation-settings: 'FILL' 1;">star</span>
+</div>
+<div class="mono-label text-textPrimary font-bold mb-1">REAPER-MQ9</div>
+<div class="mono-label text-[9px] text-textMuted uppercase tracking-wider">LONG_RANGE_STRIKE</div>
+</div>
+<div class="bg-surface2 border border-hairline p-3 group relative hover:border-raised transition-all cursor-pointer">
+<div class="flex justify-between items-start mb-2">
+<span class="px-1.5 py-0.5 bg-green text-surface0 text-[9px] font-bold rounded-sm">C</span>
+<span class="material-symbols-outlined text-textMuted tabular-nums">star</span>
+</div>
+<div class="mono-label text-textPrimary font-bold mb-1">MAVIC_3_PRO</div>
+<div class="mono-label text-[9px] text-textMuted uppercase tracking-wider">TACTICAL_RECON</div>
+</div>
+<div class="bg-surface2 border border-hairline p-3 group relative hover:border-raised transition-all cursor-pointer">
+<div class="flex justify-between items-start mb-2">
+<span class="px-1.5 py-0.5 bg-amber text-surface0 text-[9px] font-bold rounded-sm">F</span>
+<span class="material-symbols-outlined text-textMuted tabular-nums">star</span>
+</div>
+<div class="mono-label text-textPrimary font-bold mb-1">SWITCHBLADE_600</div>
+<div class="mono-label text-[9px] text-textMuted uppercase tracking-wider">LOITERING_MUNITION</div>
+</div>
+<button class="w-full mt-4 border border-dashed border-hairline py-4 mono-label text-textMuted hover:text-amber hover:border-amber transition-all">
+                    + ADD AIRCRAFT
+                </button>
+</div>
+<div class="p-4 mt-auto border-t border-hairline bg-surface0/50">
+<div class="flex justify-between items-center mono-label text-[9px] mb-2">
+<span class="text-textMuted">SYSTEM_STATUS</span>
+<span class="text-green">OPTIMAL</span>
+</div>
+<div class="flex justify-between items-center mono-label text-[9px] mb-2">
+<span class="text-textMuted">STORAGE_USE</span>
+<span class="text-textPrimary">42.8 GB / 100 GB</span>
+</div>
+<div class="w-full bg-surface2 h-1 rounded-full overflow-hidden">
+<div class="bg-amber h-full w-[42%]"></div>
+</div>
+</div>
+</aside>
+</main>
+<!-- Footer Bar / Status -->
+<footer class="h-6 bg-surface2 border-t border-hairline flex items-center justify-between px-4">
+<div class="flex gap-4">
+<span class="mono-label text-[8px] text-textMuted">LAT: 48.8584° N</span>
+<span class="mono-label text-[8px] text-textMuted">LON: 2.2945° E</span>
+<span class="mono-label text-[8px] text-textMuted">ALT: 1,420M MSL</span>
+</div>
+<div class="flex items-center gap-4">
+<span class="mono-label text-[8px] text-cyan flex items-center gap-1">
+<span class="w-1.5 h-1.5 bg-cyan rounded-full"></span>
+                LIVE_FEED_SYNCED
+            </span>
+<span class="mono-label text-[8px] text-textMuted">VER: 2.4.0-STABLE</span>
+</div>
+</footer>
+</body></html>

_docs/ui_design/v2/stitch/annotations.html

@@ -0,0 +1,389 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>AZAION - ANNOTATIONS MISSION CONTROL</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&amp;family=IBM+Plex+Sans:wght@300;400;600&amp;family=Public+Sans:wght@400;700;900&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        surface: {
+                            0: "#0A0D10",
+                            1: "#13171C",
+                            2: "#1A1F26"
+                        },
+                        hairline: "#252B34",
+                        raised: "#3B4451",
+                        amber: "#FF9D3D",
+                        cyan: "#36D6C5",
+                        red: "#FF4756",
+                        green: "#3DDC84",
+                        blue: "#4E9EFF",
+                        onSurface: "#E8ECF1",
+                        onSurfaceMuted: "#9AA4B2",
+                        onSurfaceDim: "#5B6573"
+                    },
+                    borderRadius: {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    fontFamily: {
+                        headline: ["JetBrains Mono", "monospace"],
+                        mono: ["JetBrains Mono", "monospace"],
+                        body: ["IBM Plex Sans", "sans-serif"],
+                        display: ["Public Sans", "sans-serif"],
+                        label: ["JetBrains Mono", "monospace"]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+            font-size: 18px;
+            vertical-align: middle;
+        }
+        .tabular-nums { font-variant-numeric: tabular-nums; }
+        .grid-overlay {
+            background-image: 
+                linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
+            background-size: 60px 60px;
+        }
+        .corner-br-tl { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
+        .corner-br-tr { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
+        .corner-br-bl { position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
+        .corner-br-br { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
+    </style>
+</head>
+<body class="bg-surface-0 text-onSurface font-body selection:bg-amber selection:text-surface-0">
+<!-- TOP APP BAR -->
+<header class="flex justify-between items-center w-full px-4 h-12 z-50 bg-surface-0 border-b border-hairline sticky top-0">
+<div class="flex items-center gap-6">
+<div class="flex items-center gap-3">
+<span class="font-headline font-bold text-lg tracking-widest text-amber">AZAION</span>
+<div class="flex items-center bg-surface-1 border border-hairline px-2 py-0.5 rounded gap-2 hover:bg-surface-2 cursor-pointer transition-colors">
+<span class="font-mono text-[10px] tracking-[0.12em] text-cyan">FL03</span>
+<span class="material-symbols-outlined text-onSurfaceMuted text-xs">arrow_drop_down</span>
+</div>
+</div>
+<nav class="flex h-full items-center gap-6">
+<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">FLIGHTS</a>
+<a class="text-amber border-b-2 border-amber pb-1 font-mono text-[10px] tracking-[0.12em]" href="#">ANNOTATIONS</a>
+<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">DATASET</a>
+<a class="text-onSurfaceMuted font-mono text-[10px] tracking-[0.12em] hover:text-onSurface transition-colors" href="#">ADMIN</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-2">
+<button class="material-symbols-outlined text-onSurfaceMuted hover:text-amber transition-colors">notifications</button>
+<button class="material-symbols-outlined text-onSurfaceMuted hover:text-amber transition-colors">settings</button>
+</div>
+<div class="h-8 w-8 rounded-full border border-hairline overflow-hidden">
+<img alt="OPERATOR_AVATAR" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuASYqj8bWeEeCca3bmY7NxlGYCVcmdnDq3yHr_pfZTBas40iXPGGKH9abX9DL_udecDU2eIzbJ8XUvC59UxCerboKPAY33bxx8skyI6h4wuSW7R-PwRrOUAsU9v_yb6cLJAXxMHrIKdFoOPnSG-7ABapnWZNPrC2j95duK6YKey-O8E6cFlE1zVZVqHyemxjiI8oc7x73Fv8W64PvBPzgzVDBw6kYjiaNtdbO5jhoai44fer1uuD3ExqtUErNwL-BYI_qzO00RgvEO2"/>
+</div>
+</div>
+</header>
+<main class="flex h-[calc(100vh-48px)] overflow-hidden">
+<!-- LEFT SIDEBAR: MEDIA FILES & CLASSES -->
+<aside class="w-[250px] bg-surface-1 border-r border-hairline flex flex-col shrink-0 overflow-y-auto">
+<!-- MEDIA FILES SECTION -->
+<section class="p-4 border-b border-hairline relative">
+<div class="corner-br-tl"></div>
+<div class="corner-br-tr"></div>
+<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-4">MEDIA FILES</h3>
+<div class="space-y-1">
+<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
+<div class="flex items-center gap-2">
+<span class="px-1 border border-blue text-blue text-[8px] font-mono rounded-sm">PHOTO</span>
+<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Aerial_01</span>
+</div>
+<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:00</span>
+</div>
+<div class="flex items-center justify-between px-2 py-1.5 bg-surface-2 border-l-2 border-amber transition-colors cursor-pointer text-xs">
+<div class="flex items-center gap-2">
+<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
+<span class="font-body text-onSurface">Video 02</span>
+</div>
+<span class="font-mono text-[9px] text-amber tabular-nums">02:14</span>
+</div>
+<!-- Mock more rows -->
+<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
+<div class="flex items-center gap-2">
+<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
+<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Recon_Unit_B</span>
+</div>
+<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">05:41</span>
+</div>
+<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
+<div class="flex items-center gap-2">
+<span class="px-1 border border-blue text-blue text-[8px] font-mono rounded-sm">PHOTO</span>
+<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Border_P_44</span>
+</div>
+<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:00</span>
+</div>
+<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
+<div class="flex items-center gap-2">
+<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
+<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Strike_Log_09</span>
+</div>
+<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">01:12</span>
+</div>
+<div class="flex items-center justify-between px-2 py-1.5 hover:bg-surface-2 transition-colors cursor-pointer text-xs group">
+<div class="flex items-center gap-2">
+<span class="px-1 border border-amber text-amber text-[8px] font-mono rounded-sm">VIDEO</span>
+<span class="font-body text-onSurfaceMuted group-hover:text-onSurface">Thermal_HD</span>
+</div>
+<span class="font-mono text-[9px] text-onSurfaceDim tabular-nums">00:45</span>
+</div>
+</div>
+<div class="mt-4 relative">
+<input class="w-full bg-surface-0 border border-hairline text-xs font-mono px-3 py-2 focus:ring-1 focus:ring-amber focus:border-amber outline-none placeholder-onSurfaceDim text-onSurface" placeholder="SEARCH ASSETS..." type="text"/>
+<span class="material-symbols-outlined absolute right-2 top-2 text-onSurfaceDim text-sm">search</span>
+</div>
+</section>
+<!-- DETECTION CLASSES -->
+<section class="p-4 border-b border-hairline">
+<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-4">DETECTION CLASSES</h3>
+<div class="space-y-3">
+<div class="flex items-center justify-between group cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-3 h-3 bg-red"></div>
+<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">MilVeh</span>
+</div>
+<span class="text-[10px] font-mono text-onSurfaceDim">1</span>
+</div>
+<div class="flex items-center justify-between group cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-3 h-3 bg-green"></div>
+<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Truck</span>
+</div>
+<span class="text-[10px] font-mono text-onSurfaceDim">2</span>
+</div>
+<div class="flex items-center justify-between group cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-3 h-3 bg-blue"></div>
+<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Vehicle</span>
+</div>
+<span class="text-[10px] font-mono text-onSurfaceDim">3</span>
+</div>
+<div class="flex items-center justify-between group cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-3 h-3 bg-yellow-400"></div>
+<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Artillery</span>
+</div>
+<span class="text-[10px] font-mono text-onSurfaceDim">4</span>
+</div>
+<div class="flex items-center justify-between group cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-3 h-3 bg-magenta-500 bg-fuchsia-600"></div>
+<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Shadow</span>
+</div>
+<span class="text-[10px] font-mono text-onSurfaceDim">5</span>
+</div>
+<div class="flex items-center justify-between group cursor-pointer">
+<div class="flex items-center gap-3">
+<div class="w-3 h-3 bg-cyan"></div>
+<span class="text-xs font-mono text-onSurfaceMuted group-hover:text-onSurface">Trenches</span>
+</div>
+<span class="text-[10px] font-mono text-onSurfaceDim">6</span>
+</div>
+</div>
+</section>
+<!-- PHOTO MODE -->
+<section class="p-4 mt-auto">
+<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase mb-2">PHOTOMODE</h3>
+<div class="flex border border-hairline overflow-hidden h-8">
+<button class="flex-1 bg-amber text-surface-0 font-mono text-[9px] font-bold tracking-wider">REGULAR</button>
+<button class="flex-1 bg-surface-1 text-onSurfaceDim font-mono text-[9px] border-l border-hairline hover:bg-surface-2 transition-colors">WINTER</button>
+<button class="flex-1 bg-surface-1 text-onSurfaceDim font-mono text-[9px] border-l border-hairline hover:bg-surface-2 transition-colors">NIGHT</button>
+</div>
+</section>
+</aside>
+<!-- MAIN VIEWER -->
+<section class="flex-1 flex flex-col bg-surface-0 relative">
+<!-- VIEWER AREA -->
+<div class="flex-1 relative overflow-hidden group cursor-crosshair">
+<img class="w-full h-full object-cover grayscale-[0.2]" data-alt="A top-down aerial satellite view of a muddy dirt track winding through a dense coniferous forest with dark green pine trees. The image has a tactical drone-feed aesthetic with a subtle digital noise overlay and a technical grid. High-contrast lighting highlights the textures of the mud and the individual needles of the evergreens. Minimalist but detailed, following a military-grade intelligence visual style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuACEEDvgvY6EghK5wwUjyhV-MloxdbkAm6e6WWU6rFHfmfSM0PjLeVbyxe_oP4sk1JjaKSGE0znfRfEiW6q8WsNGvP7e5iH1eUueipOVFk8bDUFA7GdIOW3E2gxKSxc4zyv2lwVfXmABFesr8RD50odvKWtfGIS93sldZYrbZxcJ_hzEsYAVJtKGZG5rkOtcdy5AFGGHqsae8FkjhkNyR7--CHoNYgUPMsWphF6yBuS4m9Ya9QJ4o5ZsTd691ZXlE56XFDP-xuIxg9R"/>
+<div class="absolute inset-0 grid-overlay pointer-events-none"></div>
+<!-- Bounding Box 1 (Friendly/MilVeh) -->
+<div class="absolute top-[20%] left-[30%] w-[120px] h-[80px] border-2 border-cyan pointer-events-none">
+<div class="absolute -top-7 left-0 flex items-center gap-1.5 whitespace-nowrap bg-surface-0/80 px-2 py-0.5 border border-cyan/30">
+<svg fill="none" height="12" stroke="#36D6C5" stroke-width="2" viewbox="0 0 24 24" width="12">
+<rect height="12" rx="1" width="20" x="2" y="6"></rect>
+<path d="M12 6v12M2 12h20"></path>
+</svg>
+<div class="w-1.5 h-1.5 rounded-full bg-green animate-pulse"></div>
+<span class="font-mono text-[10px] text-cyan tabular-nums uppercase">Mil. vehicle 87%</span>
+</div>
+</div>
+<!-- Bounding Box 2 (Hostile/Truck) -->
+<div class="absolute top-[55%] left-[60%] w-[150px] h-[100px] border-2 border-red pointer-events-none">
+<div class="absolute -top-7 left-0 flex items-center gap-1.5 whitespace-nowrap bg-surface-0/80 px-2 py-0.5 border border-red/30">
+<svg fill="none" height="12" stroke="#FF4756" stroke-width="2" viewbox="0 0 24 24" width="12">
+<path d="M12 2L2 12l10 10 10-10L12 2z"></path>
+<path d="M12 7v10M7 12h10"></path>
+</svg>
+<div class="w-1.5 h-1.5 rounded-full bg-green"></div>
+<span class="font-mono text-[10px] text-red tabular-nums uppercase">Truck 94%</span>
+</div>
+</div>
+<!-- Cursor Label -->
+<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
+<div class="w-6 h-6 border-t border-l border-amber opacity-50 absolute -top-4 -left-4"></div>
+<div class="w-6 h-6 border-b border-r border-amber opacity-50 absolute -bottom-4 -right-4"></div>
+<div class="ml-4 -mt-4 px-2 py-0.5 bg-amber/20 border border-amber/40">
+<span class="font-mono text-[9px] text-amber font-bold tracking-widest">MilVeh</span>
+</div>
+</div>
+<!-- AI Running Banner -->
+<div class="absolute top-4 right-4 bg-surface-1/90 border border-hairline p-3 min-w-[240px]">
+<div class="corner-br-tl"></div><div class="corner-br-tr"></div><div class="corner-br-bl"></div><div class="corner-br-br"></div>
+<div class="flex items-center gap-2 mb-1">
+<div class="w-2 h-2 rounded-full bg-cyan animate-ping"></div>
+<span class="font-headline text-[10px] text-onSurface font-bold tracking-widest">AI DETECTION RUNNING</span>
+</div>
+<div class="font-mono text-[9px] text-onSurfaceMuted tabular-nums">23/50 FRAMES ANALYZED</div>
+<div class="font-mono text-[8px] text-onSurfaceDim mt-1 overflow-hidden truncate">LOG: SECTOR_B // THREAD_ID_771 // SIG_LOCK</div>
+</div>
+</div>
+<!-- VIDEO TOOLBAR -->
+<div class="bg-surface-1 border-t border-hairline h-24 flex flex-col">
+<div class="flex-1 flex items-center px-4 justify-between">
+<div class="flex items-center gap-6">
+<div class="flex items-center gap-4 text-onSurfaceMuted">
+<button class="material-symbols-outlined hover:text-onSurface">skip_previous</button>
+<button class="material-symbols-outlined hover:text-onSurface">fast_rewind</button>
+<button class="material-symbols-outlined text-amber scale-125">play_arrow</button>
+<button class="material-symbols-outlined hover:text-onSurface">fast_forward</button>
+<button class="material-symbols-outlined hover:text-onSurface">skip_next</button>
+</div>
+<div class="flex items-center gap-2 border-l border-hairline pl-6">
+<span class="text-[9px] font-mono text-onSurfaceDim">FRAME STEP:</span>
+<div class="flex gap-1">
+<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">1</button>
+<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">5</button>
+<button class="px-2 py-0.5 bg-amber text-surface-0 border border-amber text-[10px] font-mono font-bold">10</button>
+<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">30</button>
+<button class="px-2 py-0.5 bg-surface-2 border border-hairline text-[10px] font-mono hover:border-amber transition-colors">60</button>
+</div>
+</div>
+</div>
+<div class="flex items-center gap-2">
+<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-surface-2 transition-all">SAVE</button>
+<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-red/10 hover:text-red transition-all">DELETE</button>
+<button class="px-4 py-1.5 border border-hairline text-[10px] font-mono hover:bg-red/10 hover:text-red transition-all">DELETE ALL</button>
+<button class="px-4 py-1.5 bg-amber text-surface-0 border border-amber text-[10px] font-mono font-bold hover:opacity-90 transition-all">AI DETECT</button>
+<div class="flex items-center gap-2 ml-4 border-l border-hairline pl-4">
+<span class="material-symbols-outlined text-onSurfaceDim text-sm">volume_up</span>
+<div class="w-16 h-1 bg-hairline relative">
+<div class="absolute left-0 top-0 h-full w-[70%] bg-onSurfaceMuted"></div>
+</div>
+</div>
+</div>
+</div>
+<!-- STATUS BAR & SCRUBBER -->
+<div class="h-8 border-t border-hairline bg-surface-0 flex items-center px-4 justify-between">
+<div class="flex items-center gap-4">
+<span class="font-mono text-[10px] text-amber tabular-nums">00:12 / 02:14</span>
+<span class="text-[9px] text-onSurfaceDim font-body uppercase">Press 1–9 to select class · space to pause</span>
+</div>
+<div class="flex items-center gap-3">
+<div class="flex items-center gap-2 border border-green px-2 py-0.5 rounded-full">
+<div class="w-1.5 h-1.5 rounded-full bg-green"></div>
+<span class="font-mono text-[9px] text-green font-bold">READY</span>
+</div>
+</div>
+</div>
+<!-- Progress Scrubber -->
+<div class="h-1 bg-surface-1 relative cursor-pointer">
+<div class="absolute h-full bg-amber w-[35%] z-10 shadow-[0_0_10px_rgba(255,157,61,0.5)]"></div>
+</div>
+</div>
+</section>
+<!-- RIGHT SIDEBAR: ANNOTATIONS -->
+<aside class="w-[220px] bg-surface-1 border-l border-hairline flex flex-col shrink-0 overflow-y-auto">
+<div class="p-4 border-b border-hairline flex justify-between items-center">
+<h3 class="font-headline text-[10px] tracking-[0.12em] text-onSurfaceDim uppercase">ANNOTATIONS</h3>
+<span class="font-mono text-[10px] text-onSurfaceDim">128</span>
+</div>
+<div class="flex-1">
+<!-- Annotation Rows -->
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:08</span>
+<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_A</span>
+</div>
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:09</span>
+<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_B</span>
+</div>
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline bg-surface-2 border-l-2 border-amber transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-yellow-400 tabular-nums shrink-0">00:12</span>
+<span class="font-mono text-[10px] text-onSurface font-bold truncate">00:12 — Artillery</span>
+</div>
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-green/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-green tabular-nums shrink-0">00:15</span>
+<span class="font-mono text-[10px] text-onSurface truncate">Truck_01</span>
+</div>
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-green/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-green tabular-nums shrink-0">00:15</span>
+<span class="font-mono text-[10px] text-onSurface truncate">Truck_02</span>
+</div>
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-cyan/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-cyan tabular-nums shrink-0">00:22</span>
+<span class="font-mono text-[10px] text-onSurface truncate">Trench_Alpha</span>
+</div>
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-blue/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-blue tabular-nums shrink-0">00:28</span>
+<span class="font-mono text-[10px] text-onSurface truncate">Civ_Vehicle</span>
+</div>
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-fuchsia-600/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-fuchsia-400 tabular-nums shrink-0">00:31</span>
+<span class="font-mono text-[10px] text-onSurface truncate">Unknown_Shadow</span>
+</div>
+<div class="group flex items-center gap-3 px-3 py-2 border-b border-hairline hover:bg-surface-2 transition-colors cursor-pointer relative">
+<div class="absolute inset-0 bg-gradient-to-r from-red/10 to-transparent pointer-events-none"></div>
+<span class="font-mono text-[10px] text-red tabular-nums shrink-0">00:45</span>
+<span class="font-mono text-[10px] text-onSurface truncate">MilVeh_C</span>
+</div>
+</div>
+<div class="p-4 border-t border-hairline mt-auto">
+<button class="w-full border border-hairline py-2 text-[10px] font-mono text-onSurfaceDim hover:text-onSurface hover:bg-surface-2 transition-all uppercase tracking-widest">
+                    EXPORT DATA (.JSON)
+                </button>
+</div>
+</aside>
+</main>
+<!-- FOOTER PANEL OVERLAY -->
+<div class="fixed bottom-12 right-6 flex flex-col gap-2 pointer-events-none">
+<div class="bg-surface-1/90 border border-hairline p-2 pr-8 relative pointer-events-auto">
+<div class="corner-br-tl"></div><div class="corner-br-tr"></div><div class="corner-br-bl"></div><div class="corner-br-br"></div>
+<div class="flex items-center gap-2">
+<span class="font-mono text-[8px] text-onSurfaceDim">GPS:</span>
+<span class="font-mono text-[9px] text-cyan tabular-nums">48.2082° N, 16.3738° E</span>
+</div>
+<div class="flex items-center gap-2">
+<span class="font-mono text-[8px] text-onSurfaceDim">ALT:</span>
+<span class="font-mono text-[9px] text-cyan tabular-nums">1,240m AMSL</span>
+</div>
+</div>
+</div>
+</body></html>

_docs/ui_design/v2/stitch/dataset_explorer.html

@@ -0,0 +1,369 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>AZAION OPS - DATASET EXPLORER</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&amp;family=IBM+Plex+Sans:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        surface: {
+                            0: "#0A0D10",
+                            1: "#13171C",
+                            2: "#1A1F26"
+                        },
+                        hairline: "#252B34",
+                        raised: "#3B4451",
+                        amber: "#FF9D3D",
+                        cyan: "#36D6C5",
+                        red: "#FF4756",
+                        green: "#3DDC84",
+                        blue: "#4E9EFF",
+                        text: {
+                            primary: "#E8ECF1",
+                            secondary: "#9AA4B2",
+                            muted: "#5B6573"
+                        }
+                    },
+                    fontFamily: {
+                        headline: ["JetBrains Mono", "monospace"],
+                        display: ["JetBrains Mono", "monospace"],
+                        body: ["IBM Plex Sans", "sans-serif"],
+                        label: ["JetBrains Mono", "monospace"]
+                    },
+                    letterSpacing: {
+                        'technical': '0.12em',
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        body {
+            background-color: #0A0D10;
+            color: #E8ECF1;
+            font-family: 'IBM Plex Sans', sans-serif;
+        }
+        .font-mono-tabular {
+            font-family: 'JetBrains Mono', monospace;
+            font-variant-numeric: tabular-nums;
+        }
+        .bracket-tl::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
+        .bracket-tr::before { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
+        .bracket-bl::before { content: ''; position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-left: 1px solid #FF9D3D; }
+        .bracket-br::before { content: ''; position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-bottom: 1px solid #FF9D3D; border-right: 1px solid #FF9D3D; }
+        
+        .scanline {
+            background: linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.02) 50%);
+            background-size: 100% 4px;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body class="h-screen flex flex-col overflow-hidden">
+<!-- TopNavBar -->
+<header class="flex justify-between items-center px-4 w-full h-[48px] bg-[#0A0D10] border-b border-[#252B34] z-50">
+<div class="flex items-center gap-6">
+<span class="font-headline font-bold text-[#FF9D3D] tracking-widest text-lg">AZAION OPS</span>
+<div class="bg-surface-2 border border-hairline px-2 py-0.5 flex items-center gap-2 cursor-pointer hover:border-amber transition-colors">
+<span class="font-headline text-[10px] text-amber tracking-technical">FL03</span>
+<span class="material-symbols-outlined text-[14px] text-text-secondary">arrow_drop_down</span>
+</div>
+<nav class="flex gap-6 h-[48px] items-center">
+<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">FLIGHTS</a>
+<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">ANNOTATIONS</a>
+<a class="font-headline text-[10px] tracking-technical uppercase text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center" href="#">DATASET</a>
+<a class="font-headline text-[10px] tracking-technical uppercase text-[#9AA4B2] hover:text-[#FF9D3D] transition-colors h-full flex items-center" href="#">ADMIN</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-2 px-3 py-1 bg-amber/10 border border-amber/30">
+<span class="w-2 h-2 rounded-full bg-amber animate-pulse"></span>
+<span class="font-headline text-[10px] text-amber tracking-technical">MISSION READY</span>
+</div>
+<div class="flex gap-3 text-text-secondary">
+<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">notifications</span>
+<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">settings</span>
+<span class="material-symbols-outlined cursor-pointer hover:text-amber text-[20px]">account_circle</span>
+</div>
+</div>
+</header>
+<div class="flex flex-1 overflow-hidden">
+<!-- SideNavBar / Left Sidebar -->
+<aside class="w-64 bg-[#13171C] border-r border-[#252B34] flex flex-col h-full shrink-0">
+<div class="p-4 border-b border-hairline">
+<h3 class="font-headline text-[10px] tracking-technical text-text-muted mb-4 uppercase">DETECTION CLASSES</h3>
+<div class="space-y-2">
+<!-- Class Items -->
+<div class="flex items-center justify-between group cursor-crosshair">
+<div class="flex items-center gap-2">
+<div class="w-3 h-3 bg-cyan"></div>
+<span class="font-headline text-[11px] text-text-primary uppercase">MilVeh</span>
+</div>
+<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">124</span>
+</div>
+<div class="flex items-center justify-between group cursor-crosshair">
+<div class="flex items-center gap-2">
+<div class="w-3 h-3 bg-amber"></div>
+<span class="font-headline text-[11px] text-text-primary uppercase">Truck</span>
+</div>
+<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">087</span>
+</div>
+<div class="flex items-center justify-between group cursor-crosshair">
+<div class="flex items-center gap-2">
+<div class="w-3 h-3 bg-green"></div>
+<span class="font-headline text-[11px] text-text-primary uppercase">Vehicle</span>
+</div>
+<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">061</span>
+</div>
+<div class="flex items-center justify-between group cursor-crosshair opacity-50">
+<div class="flex items-center gap-2">
+<div class="w-3 h-3 bg-red"></div>
+<span class="font-headline text-[11px] text-text-primary uppercase">Artillery</span>
+</div>
+<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">032</span>
+</div>
+<div class="flex items-center justify-between group cursor-crosshair">
+<div class="flex items-center gap-2">
+<div class="w-3 h-3 bg-raised"></div>
+<span class="font-headline text-[11px] text-text-primary uppercase">Shadow</span>
+</div>
+<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">214</span>
+</div>
+<div class="flex items-center justify-between group cursor-crosshair">
+<div class="flex items-center gap-2">
+<div class="w-3 h-3 bg-blue"></div>
+<span class="font-headline text-[11px] text-text-primary uppercase">Trenches</span>
+</div>
+<span class="font-mono-tabular text-[11px] text-text-secondary bg-surface-2 px-1 border border-hairline">019</span>
+</div>
+</div>
+</div>
+<div class="p-4 border-b border-hairline">
+<div class="flex items-center justify-between mb-4">
+<span class="font-headline text-[10px] tracking-technical text-text-secondary uppercase">Objects Only</span>
+<button class="w-8 h-4 bg-surface-0 border border-hairline relative">
+<div class="absolute top-0 right-0 w-4 h-[14px] bg-amber"></div>
+</button>
+</div>
+<div class="relative">
+<span class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-text-muted text-[16px]">search</span>
+<input class="w-full bg-surface-0 border border-hairline h-8 pl-8 font-headline text-[10px] text-text-primary focus:ring-1 focus:ring-amber focus:border-amber outline-none" placeholder="FILTER BY ID..." type="text"/>
+</div>
+</div>
+<div class="p-4 flex-1">
+<div class="relative p-4 border border-hairline bg-surface-2 overflow-hidden">
+<div class="bracket-tl"></div><div class="bracket-tr"></div><div class="bracket-bl"></div><div class="bracket-br"></div>
+<h4 class="font-headline text-[10px] tracking-technical text-amber mb-3 uppercase">QUICK STATS</h4>
+<div class="space-y-2 font-mono-tabular text-[10px]">
+<div class="flex justify-between border-b border-hairline pb-1">
+<span class="text-text-muted">TOTAL</span>
+<span class="text-text-primary">01,842</span>
+</div>
+<div class="flex justify-between border-b border-hairline pb-1">
+<span class="text-text-muted">VALIDATED</span>
+<span class="text-text-primary text-green">01,504</span>
+</div>
+<div class="flex justify-between border-b border-hairline pb-1">
+<span class="text-text-muted">PENDING</span>
+<span class="text-text-primary text-amber">00,338</span>
+</div>
+</div>
+</div>
+</div>
+<div class="p-4 border-t border-hairline flex flex-col gap-2">
+<div class="flex items-center gap-3 px-3 py-2 hover:bg-surface-2 text-text-muted hover:text-text-primary transition-all cursor-pointer">
+<span class="material-symbols-outlined text-[18px]">build</span>
+<span class="font-headline text-[10px] tracking-technical">DIAGNOSTICS</span>
+</div>
+<button class="w-full border border-red text-red font-headline text-[10px] py-2 tracking-technical hover:bg-red/10 transition-all">TERMINATE SESSION</button>
+</div>
+</aside>
+<!-- Main Content Area -->
+<main class="flex-1 flex flex-col bg-surface-0 relative overflow-hidden">
+<!-- Filter Bar -->
+<div class="h-12 border-b border-hairline bg-surface-1 flex items-center px-4 justify-between shrink-0">
+<div class="flex items-center gap-4">
+<div class="flex items-center border border-hairline bg-surface-0 h-7 px-2">
+<span class="font-mono-tabular text-[11px] text-text-primary uppercase">2025-02-09</span>
+<span class="mx-2 text-text-muted">—</span>
+<span class="font-mono-tabular text-[11px] text-text-primary uppercase">2025-02-11</span>
+</div>
+<div class="flex items-center gap-2 border border-hairline bg-surface-0 h-7 px-3 cursor-pointer">
+<span class="w-2 h-2 rounded-full bg-amber"></span>
+<span class="font-headline text-[11px] text-text-primary">FL-03</span>
+<span class="material-symbols-outlined text-[14px]">arrow_drop_down</span>
+</div>
+<div class="h-4 w-px bg-hairline"></div>
+<div class="flex gap-2">
+<span class="px-2 h-6 border border-hairline text-text-muted font-headline text-[10px] flex items-center tracking-technical">NONE</span>
+<span class="px-2 h-6 border border-amber/30 bg-amber/10 text-amber font-headline text-[10px] flex items-center tracking-technical">CREATED</span>
+<span class="px-2 h-6 border border-blue text-blue font-headline text-[10px] flex items-center tracking-technical">EDITED</span>
+<span class="px-2 h-6 border border-green bg-green/10 text-green font-headline text-[10px] flex items-center tracking-technical">VALIDATED</span>
+</div>
+</div>
+<div class="flex gap-1">
+<button class="w-8 h-8 flex items-center justify-center border border-hairline text-text-secondary hover:border-amber"><span class="material-symbols-outlined text-[18px]">grid_view</span></button>
+<button class="w-8 h-8 flex items-center justify-center border border-hairline text-text-secondary hover:border-amber"><span class="material-symbols-outlined text-[18px]">list</span></button>
+</div>
+</div>
+<!-- Tab Strip -->
+<div class="flex border-b border-hairline bg-surface-1 px-4">
+<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-amber border-b-2 border-amber">ANNOTATIONS</button>
+<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-text-muted hover:text-text-primary transition-colors">EDITOR</button>
+<button class="h-10 px-6 font-headline text-[11px] tracking-technical uppercase text-text-muted hover:text-text-primary transition-colors">CLASS DISTRIBUTION</button>
+</div>
+<!-- Annotation Grid -->
+<div class="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-raised">
+<div class="grid grid-cols-6 gap-2">
+<!-- SELECTED TILE 1 -->
+<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
+<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
+<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
+</div>
+<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
+<div class="w-full h-full bg-gradient-to-br from-emerald-900/40 to-emerald-950/80 p-4">
+<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Overhead satellite imagery view of a tactical forest environment with dense pine trees and forest clearings, captured in a high-contrast cinematic military aesthetic with deep emerald and forest green tones. The lighting is diffused and moody, suggesting late afternoon surveillance conditions." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZwHF0AGwGxdwnLxfsEd3dpitJogOaQpNG9slAfON3bmZ4RJaRwEUqFug_t_9_jBBontbW--0jIzc3JP3FNa54HzGWTAW-YEyhtStHld5Y6fESKmeG1T0kMLcyUufABqLmiOHkbPTkrUTqd_SCbl9frdThLUJKzTCifR7e-P4Pp4Fth5EKHCuhQF6-G9iSFmBQSHhIwztSXdFc8icy9Hc78XowZg7ApF3FUb9J58fr_9tG1C0CMsQHQRxeibwqIL1wWjFL8JQX_clL"/>
+</div>
+<div class="absolute bottom-1 left-1">
+<div class="flex items-center gap-1 border border-green bg-green/10 px-1 py-0.5">
+<span class="w-1 h-1 rounded-full bg-green"></span>
+<span class="font-headline text-[8px] text-green uppercase">VALIDATED</span>
+</div>
+</div>
+</div>
+<!-- SEED ANNOTATION TILE -->
+<div class="aspect-square bg-surface-1 border border-red relative group cursor-pointer overflow-hidden">
+<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
+<div class="w-full h-full bg-gradient-to-br from-slate-700/40 to-slate-900/80 p-4">
+<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="High-altitude aerial reconnaissance photo of an industrial urban gray logistics yard with large warehouse buildings and parked military trucks, styled in a monochromatic tactical console aesthetic with cold gray and steel blue highlights. Hard shadows define the sharp geometric edges of the structures." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDoU_a9p0-IJp50fhCLTE-DwYSPqqwg7OpqZvedAnd9dt_IHLoKUqBlwqbMqAXh16APb9_SsVYqX8D5sTeN3YUgKCjS02xq0KQyJe8JZhzWcmIUt-0BEkJmYm7mC-GhbOgpBwJOzb_nW0v-dXd1jG8J8x3VN_vs1UB0rWTcKDej0DCD-Pu0G8l70gMrfS6YiYw3AFmeBkeHIkdhTG2p9R9AbNrw1TSOZ-dX3Ug4H58KFSSJSWIFOTK_zUpEe1Wt0qR5Ad9cc2KDyj3B"/>
+</div>
+<div class="absolute bottom-1 left-1">
+<div class="flex items-center gap-1 border border-amber/30 bg-amber/10 px-1 py-0.5">
+<span class="w-1 h-1 rounded-full bg-amber"></span>
+<span class="font-headline text-[8px] text-amber uppercase">CREATED</span>
+</div>
+</div>
+</div>
+<!-- STANDARD TILES (Loop representation) -->
+<div class="aspect-square bg-surface-1 border border-hairline relative group cursor-pointer overflow-hidden">
+<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">12 MAY · RD</div>
+<div class="w-full h-full bg-gradient-to-br from-orange-900/40 to-orange-950/80 p-4">
+<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Top-down thermal scan perspective of a vast desert expanse with shifting sand dunes and scattered brush, rendered in tactical desert tan and warm brown hues. The visual style is grainy and technical, mimicking a low-altitude drone feed under harsh midday sun." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0pqdeg1e8c_3U4DtQ-ZOfV6BmqEiXafEZh7NIYNbZQH9wvAvvhkK-yIHxXA9YW0qeX6pbNw5828CaeEEohxAslUJoxCCQDZctcD116r3hjk3xd2XfcWPjpsuwzAAncZ7Rn1G8X0NaStgmavXFXSU2GvygcODvB9WRZ810ECwdYNjG3Ta4Djwt8dQNPTggoYFKXKrQUmjKHy2tEVPpKFtAR2dlJvsWKUinJz45wbHNmYZrqF8y2C81Ir_-3CK_FO8IEaqkD6uxeJGV"/>
+</div>
+<div class="absolute bottom-1 left-1">
+<div class="flex items-center gap-1 border border-blue px-1 py-0.5">
+<span class="w-1 h-1 rounded-full bg-blue"></span>
+<span class="font-headline text-[8px] text-blue uppercase">EDITED</span>
+</div>
+</div>
+</div>
+<!-- Repeat for 18+ items -->
+<!-- tile 4 -->
+<div class="aspect-square bg-surface-1 border border-hairline relative group cursor-pointer overflow-hidden">
+<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">11 MAY · XC</div>
+<div class="w-full h-full bg-gradient-to-br from-pink-950/40 to-black p-4">
+<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Electronic surveillance view of a rocky coastline at dusk, featuring dark pink and deep purple lighting highlights on jagged cliff faces. The style is that of a specialized tactical sensor array with visible noise patterns and technical overlay characteristics." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBmWx_3z5QEWlHjjyY9V_44FP6IJeBOXAf_PNaQOG_1Czq3nV1-1VmC7F8c2s0DSTu22-fYpYBtpSIfW-kaw-0Vh7R04HgP4WMfiKLyQbkKB_hMJOACRRC-842y00IulZlEc8k0pgwhqEuuB05ryZSh9Ka-CPwOyyjk5-mrWSP-IQia7iOqNHAeUcBGrtBYlQ2KEroHs_hEUMo7O-0Lg7wAGSslxK-jY20kIpuU_Fg7_XXP-0l54aJdVetKR3RKX864vzk1CUJO00sK"/>
+</div>
+<div class="absolute bottom-1 left-1">
+<div class="flex items-center gap-1 border border-hairline px-1 py-0.5">
+<span class="w-1 h-1 rounded-full bg-text-muted"></span>
+<span class="font-headline text-[8px] text-text-muted uppercase">NONE</span>
+</div>
+</div>
+</div>
+<!-- SELECTED TILE 2 -->
+<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
+<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
+<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
+</div>
+<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">10 MAY · RD</div>
+<div class="w-full h-full bg-gradient-to-br from-blue-900/40 to-slate-900/80 p-4">
+<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Nadir drone view of a frozen arctic plain with deep snow drifts and blue ice fissures, styled in a cold white and cyan military imagery aesthetic. The lighting is bright and flat, characteristic of overcast polar surveillance missions." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4f1LSl-0OM7MAyUiSgDYQmqdSYe1togt8aSpmiSzl2z3MvkEMbslpDsFEL5ySzBDwBCaDb5SrRZcQDtv11duF2tPo86SkHD6HxnHZWHktpUtN67S3lGiIoJvbPzhTj4gdEbzvOzH2E8mTzvNQs8g6lz9KkpNwCFCN-CyzW0SoOJmHvaM3XKBgE7iNKQroGTnyqImiWOemd8pfBujP5djPswarBzfKgzNbmEU3KgXofVA0ZFb2oPZ5cDc5HWfGCad60NhTf906Ots_"/>
+</div>
+<div class="absolute bottom-1 left-1">
+<div class="flex items-center gap-1 border border-green bg-green/10 px-1 py-0.5">
+<span class="w-1 h-1 rounded-full bg-green"></span>
+<span class="font-headline text-[8px] text-green uppercase">VALIDATED</span>
+</div>
+</div>
+</div>
+<!-- tile 6 -->
+<div class="aspect-square bg-surface-1 border-2 border-amber relative group cursor-pointer overflow-hidden">
+<div class="absolute top-0 left-0 w-5 h-5 bg-amber flex items-center justify-center z-10">
+<span class="material-symbols-outlined text-surface-0 text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
+</div>
+<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">09 MAY · RD</div>
+<div class="w-full h-full bg-gradient-to-br from-gray-700/40 to-gray-900/80 p-4">
+<img class="w-full h-full object-cover mix-blend-overlay opacity-50" data-alt="Aerial drone camera feed showing an abandoned rural farming area with dilapidated barns and overgrown fields, captured in a stark urban gray and muted olive palette. Technical metadata overlays might be inferred by the precision framing and tactical perspective." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDd_sJhVwnkVBWWrM9DIzpU1MQUy2fRutHktUF4nU7H60J5RlwUJ3uETjgy9Q-TLgZGHgb6qujRL75JHJ4b-YfMr3Rwg0rDSX9XhC2jN-4eWu4aGpcvVqOe838jdKwWsmN8Xs8r1i5aZe5ThoJHgWkT4YzG9LO6wqYAe4Eut88IFfxDtW6QGCI4GmMFf9rwpNzgL1F1SNuBzG5FX_oSIuHPgBFm-0uMX21IU4Ni4erv85cVseLLT9nNNwuLl1R_JYwz63-6kD2acRp1"/>
+</div>
+<div class="absolute bottom-1 left-1">
+<div class="flex items-center gap-1 border border-blue px-1 py-0.5">
+<span class="w-1 h-1 rounded-full bg-blue"></span>
+<span class="font-headline text-[8px] text-blue uppercase">EDITED</span>
+</div>
+</div>
+</div>
+<!-- Fill grid with generic stylized tiles -->
+<div class="aspect-square bg-surface-1 border border-hairline relative group overflow-hidden">
+<div class="absolute top-1 right-1 px-1 bg-surface-1/80 text-text-muted font-mono-tabular text-[9px] z-10">08 MAY · RD</div>
+<div class="w-full h-full bg-surface-2 flex items-center justify-center">
+<div class="w-full h-full opacity-10 scanline absolute inset-0"></div>
+<span class="font-headline text-[8px] text-text-muted">IMG_DATA_007</span>
+</div>
+</div>
+<!-- Repeating pattern -->
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-red relative overflow-hidden">
+<div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div>
+<div class="absolute top-1 left-1 bg-red/20 px-1 font-headline text-[7px] text-red">SEED</div>
+</div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-blue-900/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-blue-900/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-emerald-900/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-orange-900/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-slate-700/30 to-black"></div></div>
+<div class="aspect-square bg-surface-1 border border-hairline relative overflow-hidden"><div class="w-full h-full bg-gradient-to-br from-gray-800/30 to-black"></div></div>
+</div>
+</div>
+<!-- Bottom Status Bar -->
+<footer class="h-12 border-t border-hairline bg-surface-1 flex items-center px-4 justify-between shrink-0">
+<div class="flex items-center gap-3">
+<button class="bg-amber text-surface-0 font-headline text-[10px] h-8 px-4 font-bold tracking-technical flex items-center gap-2 hover:opacity-90 active:scale-95 transition-all">
+                        VALIDATE (3)
+                    </button>
+<button class="border border-hairline text-text-secondary font-headline text-[10px] h-8 px-4 tracking-technical hover:text-amber transition-colors">
+                        REFRESH THUMBNAILS
+                    </button>
+</div>
+<div class="flex flex-col items-center">
+<span class="font-mono-tabular text-[11px] text-text-primary tracking-wide">ann_0247_FL03_117.jpg</span>
+<div class="w-32 h-0.5 bg-hairline mt-1 relative overflow-hidden">
+<div class="absolute inset-0 bg-amber w-1/3"></div>
+</div>
+</div>
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-[14px] text-text-muted">schedule</span>
+<span class="font-mono-tabular text-[10px] text-text-muted uppercase">Last scan: 14:22</span>
+</div>
+<div class="h-4 w-px bg-hairline"></div>
+<span class="font-mono-tabular text-[10px] text-amber">3 SELECTED</span>
+</div>
+</footer>
+</main>
+</div>
+</body></html>

_docs/ui_design/v2/stitch/flights.html

@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>AZAION Tactical Ops - FLIGHTS</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<style>
+        body {
+            font-family: 'IBM Plex Sans', sans-serif;
+            background-color: #0A0D10;
+            color: #E8ECF1;
+            margin: 0;
+            overflow: hidden;
+        }
+        .font-headline { font-family: 'JetBrains Mono', monospace; }
+        .tabular-nums { font-variant-numeric: tabular-nums; }
+        .scanline-overlay {
+            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
+            background-size: 100% 2px, 3px 100%;
+            pointer-events: none;
+        }
+        .grid-bg {
+            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+            background-size: 60px 60px;
+        }
+        /* Corner Brackets */
+        .corner-bracket {
+            position: relative;
+        }
+        .corner-bracket::before, .corner-bracket::after,
+        .corner-bracket > .bracket-bottom::before, .corner-bracket > .bracket-bottom::after {
+            content: '';
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-color: #FF9D3D;
+            border-style: solid;
+            pointer-events: none;
+        }
+        /* Top Left */
+        .corner-bracket::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
+        /* Top Right */
+        .corner-bracket::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
+        /* Bottom Left */
+        .bracket-bottom::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
+        /* Bottom Right */
+        .bracket-bottom::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
+
+        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: #13171C; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #252B34; }
+    </style>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        surface: {
+                            0: "#0A0D10",
+                            1: "#13171C",
+                            2: "#1A1F26"
+                        },
+                        hairline: "#252B34",
+                        amber: "#FF9D3D",
+                        cyan: "#36D6C5",
+                        red: "#FF4756",
+                        green: "#3DDC84"
+                    },
+                    fontFamily: {
+                        headline: ["JetBrains Mono", "monospace"],
+                        body: ["IBM Plex Sans", "sans-serif"]
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="h-screen flex flex-col">
+<!-- TopAppBar -->
+<header class="bg-[#13171C] border-b border-[#252B34] h-12 flex justify-between items-center px-4 z-50">
+<div class="flex items-center gap-6">
+<span class="font-headline text-lg font-bold tracking-tighter text-[#FF9D3D]">AZAION</span>
+<div class="flex items-center border border-amber px-2 py-0.5 rounded-sm gap-2 bg-surface-2 cursor-pointer">
+<span class="font-headline text-[10px] tracking-[0.12em] text-amber">FL02</span>
+<span class="material-symbols-outlined text-amber text-xs">arrow_drop_down</span>
+</div>
+<nav class="flex h-12 items-center">
+<a class="text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">FLIGHTS</a>
+<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">ANNOTATIONS</a>
+<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">DATASET</a>
+<a class="text-[#5B6573] hover:text-[#E8ECF1] hover:bg-[#1A1F26] h-full flex items-center px-4 font-headline text-[10px] tracking-[0.12em] uppercase transition-colors duration-150" href="#">ADMIN</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-2">
+<span class="font-headline text-[10px] tracking-[0.12em] text-cyan">SYSTEM_STATUS: OK</span>
+<div class="w-1.5 h-1.5 rounded-full bg-cyan shadow-[0_0_4px_#36D6C5]"></div>
+</div>
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-[#5B6573] text-lg hover:text-white cursor-pointer">settings</span>
+<span class="material-symbols-outlined text-[#5B6573] text-lg hover:text-white cursor-pointer">notifications</span>
+<div class="flex items-center gap-2 pl-2 border-l border-hairline">
+<span class="font-headline text-[10px] text-secondary">OPERATOR_042</span>
+<span class="material-symbols-outlined text-[#5B6573] text-xl">account_circle</span>
+</div>
+</div>
+</div>
+</header>
+<main class="flex-1 flex overflow-hidden">
+<!-- Column 1: Flights Sidebar -->
+<aside class="w-[200px] bg-surface-1 border-r border-hairline flex flex-col p-4 corner-bracket">
+<div class="bracket-bottom"></div>
+<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-4">FLIGHTS_INDEX</h2>
+<div class="flex-1 space-y-1 overflow-y-auto custom-scrollbar">
+<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer transition-colors">
+<div class="font-headline text-xs text-white">FL01</div>
+<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-24 08:30</div>
+</div>
+<div class="px-3 py-2 bg-surface-2 border-l-2 border-amber cursor-pointer">
+<div class="font-headline text-xs text-amber">FL02</div>
+<div class="font-headline text-[9px] text-amber/60 tracking-tighter">2023-11-24 10:15</div>
+</div>
+<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer">
+<div class="font-headline text-xs text-white">FL03</div>
+<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-24 14:00</div>
+</div>
+<div class="px-3 py-2 border border-transparent hover:bg-surface-2 cursor-pointer">
+<div class="font-headline text-xs text-white">FL04</div>
+<div class="font-headline text-[9px] text-muted tracking-tighter">2023-11-25 09:12</div>
+</div>
+</div>
+<div class="mt-4 pt-4 border-t border-hairline">
+<h3 class="font-headline text-[10px] tracking-[0.12em] text-muted mb-2">TELEMETRY_LOG</h3>
+<div class="bg-surface-0 border border-hairline p-2 flex items-center justify-between cursor-pointer">
+<span class="font-headline text-[10px] text-secondary">24_NOV_2023</span>
+<span class="material-symbols-outlined text-xs text-muted">calendar_today</span>
+</div>
+</div>
+<button class="mt-6 w-full border border-amber py-2 font-headline text-[10px] tracking-[0.12em] text-amber hover:bg-amber/10 transition-colors uppercase">
+                + NEW FLIGHT
+            </button>
+</aside>
+<!-- Column 2: Parameters & Waypoints -->
+<aside class="w-[260px] bg-surface-1 border-r border-hairline flex flex-col p-4 corner-bracket">
+<div class="bracket-bottom"></div>
+<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-4">FLIGHT_PARAMETERS</h2>
+<div class="space-y-4 mb-6">
+<div>
+<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">AIRCRAFT</label>
+<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white">DJI Mavic 3 Enterprise</div>
+</div>
+<div>
+<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">DEFAULT_HEIGHT</label>
+<div class="flex items-center gap-2">
+<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white flex-1 tabular-nums">100</div>
+<span class="font-headline text-[10px] text-muted">M</span>
+</div>
+</div>
+<div class="grid grid-cols-3 gap-2">
+<div>
+<label class="font-headline text-[9px] text-muted block mb-1">FOCAL</label>
+<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">24MM</div>
+</div>
+<div>
+<label class="font-headline text-[9px] text-muted block mb-1">SENSOR</label>
+<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">17.3MM</div>
+</div>
+<div>
+<label class="font-headline text-[9px] text-muted block mb-1">ALT</label>
+<div class="bg-surface-0 border border-hairline p-1 text-[10px] tabular-nums text-center">45M</div>
+</div>
+</div>
+<div>
+<label class="font-headline text-[10px] text-muted tracking-widest block mb-1">COMM_ADDR</label>
+<div class="bg-surface-0 border border-hairline px-2 py-1.5 text-xs text-white font-headline tabular-nums">192.168.1.1:8080</div>
+</div>
+</div>
+<div class="flex-1 flex flex-col min-h-0">
+<h2 class="font-headline text-[10px] tracking-[0.12em] text-amber mb-2">WAYPOINTS_V1</h2>
+<div class="flex-1 overflow-y-auto custom-scrollbar border border-hairline">
+<table class="w-full text-left border-collapse">
+<thead class="bg-surface-2 sticky top-0">
+<tr>
+<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">ID</th>
+<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">LABEL</th>
+<th class="font-headline text-[9px] p-2 border-b border-hairline text-muted">STATUS</th>
+</tr>
+</thead>
+<tbody class="text-[10px] font-headline">
+<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
+<td class="p-2 text-green">A1</td>
+<td class="p-2">START_POINT</td>
+<td class="p-2 text-green">LOCKED</td>
+</tr>
+<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
+<td class="p-2 text-amber">A2</td>
+<td class="p-2">TRANS_01</td>
+<td class="p-2 text-amber">READY</td>
+</tr>
+<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
+<td class="p-2 text-amber">A3</td>
+<td class="p-2">TRANS_02</td>
+<td class="p-2 text-amber">READY</td>
+</tr>
+<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
+<td class="p-2 text-amber">A4</td>
+<td class="p-2">TRANS_03</td>
+<td class="p-2 text-muted">PENDING</td>
+</tr>
+<tr class="border-b border-hairline hover:bg-surface-2 cursor-pointer">
+<td class="p-2 text-amber">A5</td>
+<td class="p-2">TRANS_04</td>
+<td class="p-2 text-muted">PENDING</td>
+</tr>
+<tr class="hover:bg-surface-2 cursor-pointer">
+<td class="p-2 text-red">A6</td>
+<td class="p-2">FINISH_LINE</td>
+<td class="p-2 text-muted">PENDING</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+<div class="grid grid-cols-2 gap-2 mt-4">
+<button class="border border-red text-red font-headline text-[10px] py-2 hover:bg-red/10 transition-colors">GPS-DENIED</button>
+<button class="border border-green text-green font-headline text-[10px] py-2 hover:bg-green/10 transition-colors">UPLOAD</button>
+</div>
+</aside>
+<!-- Column 3: Map View -->
+<section class="flex-1 relative bg-surface-0 grid-bg overflow-hidden">
+<div class="absolute inset-0 scanline-overlay"></div>
+<!-- Map Simulation (SVG Path) -->
+<svg class="absolute inset-0 w-full h-full opacity-60">
+<!-- Original Path (Red Dashed) -->
+<path d="M 200,600 L 400,450 L 550,500 L 700,300 L 900,350 L 1100,200" fill="none" stroke="#FF4756" stroke-dasharray="8,4" stroke-width="2"></path>
+<!-- Corrected Path (Cyan Solid) -->
+<path d="M 200,600 L 420,430 L 580,480 L 720,280 L 930,330 L 1100,200" fill="none" stroke="#36D6C5" stroke-width="2"></path>
+</svg>
+<!-- Waypoint Markers -->
+<div class="absolute" style="top: 600px; left: 200px; transform: translate(-50%, -50%);">
+<div class="w-4 h-4 bg-green border-2 border-white"></div>
+<span class="absolute top-6 left-1/2 -translate-x-1/2 font-headline text-[9px] text-green">START</span>
+</div>
+<div class="absolute" style="top: 430px; left: 420px; transform: translate(-50%, -50%);">
+<div class="w-3 h-3 bg-amber border border-white"></div>
+<span class="absolute top-4 left-1/2 -translate-x-1/2 font-headline text-[9px] text-amber">A2</span>
+</div>
+<div class="absolute" style="top: 480px; left: 580px; transform: translate(-50%, -50%);">
+<div class="w-3 h-3 bg-amber border border-white"></div>
+<span class="absolute top-4 left-1/2 -translate-x-1/2 font-headline text-[9px] text-amber">A3</span>
+</div>
+<div class="absolute" style="top: 280px; left: 720px; transform: translate(-50%, -50%);">
+<div class="w-3 h-3 bg-amber border border-white"></div>
+</div>
+<div class="absolute" style="top: 330px; left: 930px; transform: translate(-50%, -50%);">
+<div class="w-3 h-3 bg-amber border border-white"></div>
+</div>
+<div class="absolute" style="top: 200px; left: 1100px; transform: translate(-50%, -50%);">
+<div class="w-4 h-4 bg-red rotate-45 border-2 border-white"></div>
+<span class="absolute top-6 left-1/2 -translate-x-1/2 font-headline text-[9px] text-red">FINISH</span>
+</div>
+<!-- HUD (Top-Right) -->
+<div class="absolute top-6 right-6 p-4 bg-surface-1/80 border border-hairline corner-bracket backdrop-blur-sm min-w-[180px]">
+<div class="bracket-bottom"></div>
+<div class="flex items-center gap-2 mb-3">
+<div class="w-2 h-2 rounded-full bg-cyan animate-pulse"></div>
+<span class="font-headline text-[10px] tracking-widest text-white">LIVE • CONNECTED</span>
+</div>
+<div class="space-y-1 font-headline text-[11px] tabular-nums">
+<div class="flex justify-between">
+<span class="text-muted">LAT</span>
+<span class="text-white">48.856621</span>
+</div>
+<div class="flex justify-between">
+<span class="text-muted">LON</span>
+<span class="text-white">2.352212</span>
+</div>
+<div class="flex justify-between">
+<span class="text-muted">SAT</span>
+<span class="text-white">12_ACTIVE</span>
+</div>
+<div class="flex justify-between border-t border-hairline pt-1 mt-1">
+<span class="text-muted">ALT</span>
+<span class="text-cyan">45.28M</span>
+</div>
+</div>
+</div>
+<!-- Map Controls Overlay -->
+<div class="absolute top-6 left-6 flex flex-col gap-2">
+<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2">
+<span class="material-symbols-outlined text-sm">add</span>
+</button>
+<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2">
+<span class="material-symbols-outlined text-sm">remove</span>
+</button>
+<button class="w-8 h-8 bg-surface-1 border border-hairline flex items-center justify-center hover:bg-surface-2 mt-4">
+<span class="material-symbols-outlined text-sm">layers</span>
+</button>
+</div>
+<!-- Legend (Bottom-Left) -->
+<div class="absolute bottom-6 left-6 p-3 bg-surface-1/90 border border-hairline text-[10px] font-headline flex flex-col gap-2">
+<div class="flex items-center gap-2">
+<div class="w-2 h-2 rounded-full bg-red"></div>
+<span class="text-muted uppercase">Original path</span>
+</div>
+<div class="flex items-center gap-2">
+<div class="w-2 h-2 rounded-full bg-cyan"></div>
+<span class="text-muted uppercase">Corrected path</span>
+</div>
+</div>
+<!-- Compass Overlay -->
+<div class="absolute bottom-6 right-6 opacity-40">
+<svg height="80" viewbox="0 0 80 80" width="80">
+<circle cx="40" cy="40" fill="none" r="38" stroke="#252B34" stroke-width="1"></circle>
+<text fill="#5B6573" font-family="JetBrains Mono" font-size="8" text-anchor="middle" x="40" y="12">N</text>
+<path d="M 40,20 L 45,40 L 40,60 L 35,40 Z" fill="#FF9D3D"></path>
+</svg>
+</div>
+</section>
+</main>
+<!-- Contextual Footer / Status Bar -->
+<footer class="h-6 bg-[#13171C] border-t border-[#252B34] flex justify-between items-center px-4">
+<div class="flex items-center gap-4">
+<span class="font-headline text-[9px] text-muted">LOG_BUFFER: 100%</span>
+<span class="font-headline text-[9px] text-muted">FRAME_RATE: 60FPS</span>
+</div>
+<div class="flex items-center gap-4">
+<span class="font-headline text-[9px] text-muted">SECTOR_7_ACTIVE</span>
+<span class="font-headline text-[9px] text-amber uppercase">Security level: ALPHA</span>
+</div>
+</footer>
+</body></html>

_docs/ui_design/v2/stitch/settings.html

@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&amp;family=IBM+Plex+Sans:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<style>
+        body {
+            background-color: #0A0D10;
+            color: #E8ECF1;
+            font-family: 'IBM Plex Sans', sans-serif;
+            overflow-x: hidden;
+        }
+        .font-mono { font-family: 'JetBrains Mono', monospace; }
+        .font-headline { font-family: 'JetBrains Mono', monospace; }
+        
+        .corner-bracket {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-color: #FF9D3D;
+        }
+        .bracket-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
+        .bracket-tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
+        .bracket-bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
+        .bracket-br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
+
+        .scanline {
+            width: 100%;
+            height: 2px;
+            background: rgba(255, 157, 61, 0.03);
+            position: absolute;
+            animation: scan 8s linear infinite;
+            pointer-events: none;
+        }
+        @keyframes scan {
+            from { top: 0; }
+            to { top: 100%; }
+        }
+
+        .tabular-nums { font-variant-numeric: tabular-nums; }
+        
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 4px; height: 4px; }
+        ::-webkit-scrollbar-track { background: #0A0D10; }
+        ::-webkit-scrollbar-thumb { background: #252B34; }
+        ::-webkit-scrollbar-thumb:hover { background: #3B4451; }
+    </style>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        surface: {
+                            0: "#0A0D10",
+                            1: "#13171C",
+                            2: "#1A1F26"
+                        },
+                        hairline: "#252B34",
+                        raised: "#3B4451",
+                        primary: "#FF9D3D",
+                        cyan: "#36D6C5",
+                        red: "#FF4756",
+                        green: "#3DDC84",
+                        blue: "#4E9EFF",
+                        "on-primary": "#0A0D10"
+                    },
+                    borderRadius: {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "9999px"
+                    },
+                    fontFamily: {
+                        headline: ["JetBrains Mono"],
+                        body: ["IBM Plex Sans"],
+                        mono: ["JetBrains Mono"]
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-[#0A0D10] text-[#E8ECF1] antialiased min-h-screen pb-24">
+<!-- TopAppBar Shell -->
+<header class="fixed top-0 w-full h-[48px] z-50 bg-[#0A0D10] border-b border-[#252B34] flex justify-between items-center px-4">
+<div class="flex items-center gap-4">
+<span class="font-headline font-black text-lg tracking-tighter text-[#FF9D3D]">AZAION</span>
+<div class="flex items-center bg-[#13171C] border border-[#252B34] px-2 py-0.5 rounded-sm cursor-pointer hover:border-[#FF9D3D] transition-colors">
+<span class="font-mono text-[10px] tracking-widest text-[#FF9D3D]">FL02</span>
+<span class="material-symbols-outlined text-[14px] text-[#FF9D3D] ml-1">arrow_drop_down</span>
+</div>
+</div>
+<nav class="hidden md:flex h-full items-center">
+<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">FLIGHTS</a>
+<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">ANNOTATIONS</a>
+<a class="text-[#5B6573] hover:text-[#E8ECF1] h-full flex items-center px-4 transition-colors font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">DATASET</a>
+<a class="text-[#FF9D3D] border-b-2 border-[#FF9D3D] h-full flex items-center px-4 font-headline font-mono uppercase tracking-[0.12em] text-[10px] antialiased" href="#">ADMIN</a>
+</nav>
+<div class="flex items-center gap-4">
+<span class="font-mono text-[10px] text-[#9AA4B2] hidden sm:block">USER@AZAION.MIL</span>
+<div class="flex items-center gap-2">
+<button class="p-1 text-[#FF9D3D] active:opacity-80 transition-opacity">
+<span class="material-symbols-outlined text-[20px]" data-weight="fill">settings</span>
+</button>
+<button class="p-1 text-[#5B6573] hover:text-[#FF4756] active:opacity-80 transition-opacity">
+<span class="material-symbols-outlined text-[20px]">power_settings_new</span>
+</button>
+</div>
+</div>
+</header>
+<main class="mt-16 px-5 max-w-[1600px] mx-auto">
+<div class="scanline"></div>
+<!-- Row 1: Configurations -->
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-5 mb-5">
+<!-- 01 - Tenant Config -->
+<section class="lg:col-span-3 bg-[#13171C] border border-[#252B34] p-4 relative">
+<div class="corner-bracket bracket-tl"></div>
+<div class="corner-bracket bracket-tr"></div>
+<div class="corner-bracket bracket-bl"></div>
+<div class="corner-bracket bracket-br"></div>
+<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">01 — TENANT CONFIGURATION</h2>
+<div class="space-y-4">
+<div class="flex flex-col gap-1">
+<label class="font-mono text-[10px] text-[#5B6573] uppercase">MILITARY UNIT</label>
+<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-body" type="text" value="72nd Brigade"/>
+<span class="text-[9px] text-[#5B6573] font-mono">USED IN PDF EXPORT HEADERS</span>
+</div>
+<div class="flex flex-col gap-1">
+<label class="font-mono text-[10px] text-[#5B6573] uppercase">UNIT NAME</label>
+<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-body" type="text" value="Alpha Company"/>
+</div>
+<div class="grid grid-cols-2 gap-2">
+<div class="flex flex-col gap-1">
+<label class="font-mono text-[10px] text-[#5B6573] uppercase">DEF. WIDTH</label>
+<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-mono tabular-nums" type="text" value="1920"/>
+</div>
+<div class="flex flex-col gap-1">
+<label class="font-mono text-[10px] text-[#5B6573] uppercase">DEF. FOV</label>
+<input class="bg-[#0A0D10] border border-[#252B34] text-[#E8ECF1] h-8 px-2 text-sm focus:border-[#FF9D3D] focus:ring-0 outline-none font-mono tabular-nums" type="text" value="84"/>
+</div>
+</div>
+</div>
+</section>
+<!-- 02 - Directories -->
+<section class="lg:col-span-3 bg-[#13171C] border border-[#252B34] p-4 relative">
+<div class="corner-bracket bracket-tl"></div>
+<div class="corner-bracket bracket-tr"></div>
+<div class="corner-bracket bracket-bl"></div>
+<div class="corner-bracket bracket-br"></div>
+<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">02 — DIRECTORIES</h2>
+<div class="space-y-4">
+<div class="flex flex-col gap-1">
+<label class="font-mono text-[10px] text-[#5B6573] uppercase">IMAGES PATH</label>
+<div class="flex">
+<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
+<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
+                                /mnt/nas/azaion/images/
+                            </div>
+<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
+</div>
+<div class="flex items-center gap-1 mt-1">
+<div class="w-1.5 h-1.5 rounded-full bg-[#3DDC84]"></div>
+<span class="text-[9px] text-[#3DDC84] font-mono">MOUNTED (NVME_01)</span>
+</div>
+</div>
+<div class="flex flex-col gap-1">
+<label class="font-mono text-[10px] text-[#5B6573] uppercase">LABELS PATH</label>
+<div class="flex">
+<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
+<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
+                                /mnt/nas/azaion/labels/
+                            </div>
+<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
+</div>
+</div>
+<div class="flex flex-col gap-1">
+<label class="font-mono text-[10px] text-[#5B6573] uppercase">THUMBNAILS</label>
+<div class="flex">
+<div class="bg-[#0A0D10] border border-[#252B34] border-r-0 flex-1 h-8 px-2 text-xs flex items-center text-[#9AA4B2] font-mono overflow-hidden">
+<span class="material-symbols-outlined text-[14px] mr-2 text-[#5B6573]">folder</span>
+                                /var/www/azaion/thumbs/
+                            </div>
+<button class="bg-[#1A1F26] border border-[#252B34] hover:bg-[#3B4451] transition-colors text-[9px] font-mono px-3 text-[#E8ECF1]">BROWSE</button>
+</div>
+</div>
+</div>
+</section>
+<!-- 03 - Aircrafts -->
+<section class="lg:col-span-6 bg-[#13171C] border border-[#252B34] p-4 relative flex flex-col">
+<div class="corner-bracket bracket-tl"></div>
+<div class="corner-bracket bracket-tr"></div>
+<div class="corner-bracket bracket-bl"></div>
+<div class="corner-bracket bracket-br"></div>
+<div class="flex justify-between items-center mb-4">
+<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] uppercase">03 — AIRCRAFTS</h2>
+<button class="bg-[#FF9D3D] text-[#0A0D10] font-mono font-bold text-[9px] px-3 py-1 rounded-sm hover:opacity-90 active:scale-95 transition-all flex items-center gap-1">
+<span class="material-symbols-outlined text-[14px]">add</span>
+                        ADD AIRCRAFT
+                    </button>
+</div>
+<div class="overflow-x-auto">
+<table class="w-full text-left border-collapse">
+<thead>
+<tr class="border-b border-[#252B34]">
+<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase">MODEL</th>
+<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase text-center">TYPE</th>
+<th class="font-mono text-[10px] text-[#5B6573] py-2 uppercase text-right">DEFAULT</th>
+</tr>
+</thead>
+<tbody class="text-sm">
+<tr class="hover:bg-[#1A1F26] transition-colors group">
+<td class="py-3 font-medium text-[#E8ECF1]">DJI Mavic 3</td>
+<td class="py-3">
+<div class="flex justify-center">
+<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#4E9EFF] rounded-full">
+<div class="w-1 h-1 rounded-full bg-[#4E9EFF]"></div>
+<span class="text-[9px] font-mono text-[#4E9EFF]">PLANE</span>
+</div>
+</div>
+</td>
+<td class="py-3 text-right">
+<button class="text-[#FF9D3D]">
+<span class="material-symbols-outlined text-[18px]" data-weight="fill">star</span>
+</button>
+</td>
+</tr>
+<tr class="hover:bg-[#1A1F26] transition-colors group">
+<td class="py-3 font-medium text-[#E8ECF1]">Matrice 300 RTK</td>
+<td class="py-3">
+<div class="flex justify-center">
+<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#3DDC84] rounded-full">
+<div class="w-1 h-1 rounded-full bg-[#3DDC84]"></div>
+<span class="text-[9px] font-mono text-[#3DDC84]">COPTER</span>
+</div>
+</div>
+</td>
+<td class="py-3 text-right">
+<button class="text-[#5B6573] hover:text-[#FF9D3D]">
+<span class="material-symbols-outlined text-[18px]">star</span>
+</button>
+</td>
+</tr>
+<tr class="hover:bg-[#1A1F26] transition-colors group">
+<td class="py-3 font-medium text-[#E8ECF1]">Autel EVO II Dual</td>
+<td class="py-3">
+<div class="flex justify-center">
+<div class="flex items-center gap-1.5 px-2 py-0.5 border border-[#3DDC84] rounded-full">
+<div class="w-1 h-1 rounded-full bg-[#3DDC84]"></div>
+<span class="text-[9px] font-mono text-[#3DDC84]">COPTER</span>
+</div>
+</div>
+</td>
+<td class="py-3 text-right">
+<button class="text-[#5B6573] hover:text-[#FF9D3D]">
+<span class="material-symbols-outlined text-[18px]">star</span>
+</button>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+</section>
+</div>
+<!-- Row 2: Misc -->
+<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+<!-- 04 - Language -->
+<section class="bg-[#13171C] border border-[#252B34] p-4 relative">
+<div class="corner-bracket bracket-tl"></div>
+<div class="corner-bracket bracket-tr"></div>
+<div class="corner-bracket bracket-bl"></div>
+<div class="corner-bracket bracket-br"></div>
+<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">04 — LANGUAGE</h2>
+<div class="flex border border-[#252B34] w-fit">
+<button class="px-6 py-2 font-mono text-xs bg-[#FF9D3D] text-[#0A0D10] font-bold">EN</button>
+<button class="px-6 py-2 font-mono text-xs text-[#9AA4B2] hover:bg-[#1A1F26] transition-colors">UA</button>
+</div>
+</section>
+<!-- 05 - Session -->
+<section class="bg-[#13171C] border border-[#252B34] p-4 relative">
+<div class="corner-bracket bracket-tl"></div>
+<div class="corner-bracket bracket-tr"></div>
+<div class="corner-bracket bracket-bl"></div>
+<div class="corner-bracket bracket-br"></div>
+<h2 class="font-mono text-[10px] tracking-[0.12em] text-[#FF9D3D] mb-4 uppercase">05 — SESSION</h2>
+<div class="flex items-center justify-between">
+<div>
+<button class="border border-[#FF4756] text-[#FF4756] font-mono text-[10px] px-4 py-2 hover:bg-[#FF4756] hover:text-[#0A0D10] transition-all uppercase">
+                            Sign out everywhere
+                        </button>
+</div>
+<div class="text-right">
+<p class="font-mono text-[9px] text-[#5B6573] uppercase">LAST LOGIN: 2023-10-24 14:32:01</p>
+<p class="font-mono text-[9px] text-[#5B6573] uppercase">IP: 192.168.1.104 (LOCAL)</p>
+</div>
+</div>
+</section>
+</div>
+</main>
+<!-- Footer Shell -->
+<footer class="fixed bottom-0 left-0 right-0 z-50 bg-[#0A0D10] flex flex-row-reverse items-center gap-4 p-4 border-t border-[#252B34] h-14">
+<button class="bg-[#FF9D3D] text-[#0A0D10] font-bold px-6 py-1.5 rounded-sm font-headline font-mono text-[10px] tracking-[0.12em] uppercase active:scale-[0.98] transition-transform">
+            SAVE CHANGES
+        </button>
+<button class="border border-[#252B34] text-[#9AA4B2] px-6 py-1.5 rounded-sm font-headline font-mono text-[10px] tracking-[0.12em] uppercase hover:border-[#3B4451] hover:text-[#E8ECF1] active:scale-[0.98] transition-transform">
+            CANCEL
+        </button>
+<div class="mr-auto">
+<div class="flex items-center gap-2 border border-[#FF9D3D] bg-transparent px-3 py-1 rounded-full">
+<div class="w-1.5 h-1.5 rounded-full bg-[#FF9D3D] animate-pulse"></div>
+<span class="font-mono text-[9px] text-[#FF9D3D] uppercase font-bold tracking-wider">UNSAVED CHANGES IN TENANT</span>
+</div>
+</div>
+<div class="hidden lg:block">
+<span class="font-mono text-[9px] text-[#5B6573] uppercase tracking-[0.12em]">SYSTEM STATUS: OPTIMAL // ENCRYPTION AES-256</span>
+</div>
+</footer>
+<script>
+        // Subtle atmosphere: Interactive input highlights
+        const inputs = document.querySelectorAll('input');
+        inputs.forEach(input => {
+            input.addEventListener('focus', () => {
+                input.parentElement.closest('section').style.borderColor = '#FF9D3D';
+            });
+            input.addEventListener('blur', () => {
+                input.parentElement.closest('section').style.borderColor = '#252B34';
+            });
+        });
+
+        // Simulating unsaved changes logic
+        const originalValues = Array.from(inputs).map(i => i.value);
+        inputs.forEach((input, idx) => {
+            input.addEventListener('input', () => {
+                const statusPill = document.querySelector('.mr-auto .border');
+                if(input.value !== originalValues[idx]) {
+                    statusPill.classList.remove('opacity-0');
+                    statusPill.classList.add('opacity-100');
+                }
+            });
+        });
+    </script>
+</body></html>

src/auth/AuthContext.tsx

@@ -16,22 +16,6 @@ export function useAuth() {
   return useContext(AuthContext)
 }
 
-// React 18+ StrictMode double-invokes effects in dev (mount → cleanup → mount),
-// and the backend rotates the refresh cookie on every successful POST. Two
-// concurrent bootstraps would race the rotation and leave the second one with
-// a stale cookie. The module-scoped in-flight promise lets the second mount
-// await the first's network round-trip instead of duplicating it. Risk 4 in
-// AZ-510 spec.
-let bootstrapInflight: Promise<AuthUser | null> | null = null
-
-/**
- * Test-only hook to clear the module-scoped in-flight bootstrap promise
- * between Vitest tests. Production never imports this — it exists because
- * Vitest does not reset module state between tests, so a test that mocks the
- * bootstrap to never-resolve would otherwise leak a permanently-pending
- * promise that subsequent tests would await forever. Wired into
- * `tests/setup.ts` afterEach. Safe-no-op when nothing is in flight.
- */
 export function __resetBootstrapInflightForTests(): void {
   bootstrapInflight = null
 }