/* lifted verbatim from DFO-DGMIND-Flight-Ops-v1_0_3_DEV060.html — style block 3 — do not edit */

  /* ─── Brand palette (mirror CL in constants.js) ─────────────────────────── */
  :root {
    --cl-navy:   #1B3A5C;
    --cl-blue:   #1E5A8C;
    --cl-teal:   #1D9E75;
    --cl-purple: #534AB7;
    --cl-coral:  #D85A30;
    --cl-amber:  #EF9F27;
    --cl-red:    #E24B4A;
    --cl-green:  #639922;
    --cl-pink:   #D4537E;
    --cl-gray:   #888780;

    /* Status accents (used in badges) */
    --status-owner:  #1a7f37;
    --status-shared: #8250df;
    --warn-bg:       #a05a00;   /* READ-ONLY / UNSAVED pill background */

    /* Spacing / radius / type scale — keep these constant across apps */
    --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px;
    --statusbar-h: 26px;
    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 14px;
    --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12px; --fs-lg: 13px; --fs-xl: 20px;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ─── Theme tokens · LIGHT (exact THEMES.light) ────────────────────────── */
    --th-bg:      #ffffff;
    --th-bg2:     #f7f7f5;
    --th-bg3:     #fafaf8;
    --th-card:    #fafaf8;
    --th-header:  #f7f7f5;
    --th-border:  #eeeeee;
    --th-borders: #dddddd;
    --th-hover:   #f0f0ee;
    --th-block:   #f4f6f8;
    --th-rowE:    #ffffff;
    --th-rowO:    #fafaf8;
    --th-input:   #ffffff;
    --th-inputB:  #dddddd;
    --th-text:    #333333;
    --th-text2:   #666666;
    --th-textm:   #999999;
    --th-accent:  #1B3A5C;
  }

  /* ─── Theme tokens · DARK (exact THEMES.dark) ───────────────────────────── */
  [data-theme="dark"] {
    --th-bg:      #1a1a2e;
    --th-bg2:     #16213e;
    --th-bg3:     #1e1e38;
    --th-card:    #16213e;
    --th-header:  #16213e;
    --th-border:  #2a2a4a;
    --th-borders: #3a3a5a;
    --th-hover:   #252548;
    --th-block:   #202046;
    --th-rowE:    #1a1a2e;
    --th-rowO:    #1e1e38;
    --th-input:   #1e1e38;
    --th-inputB:  #3a3a5a;
    --th-text:    #e0e0e0;
    --th-text2:   #a0a0b0;
    --th-textm:   #777777;
    --th-accent:  #5b8fb9;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    font-family: var(--font);
    font-size: var(--fs-md);
    color: var(--th-text);
    background: var(--th-bg);
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
  a { color: var(--cl-navy); }
  :focus-visible { outline: 2px solid var(--th-accent); outline-offset: 1px; }

  /* ═══ CHROME · the real app is THREE stacked pieces ═════════════════════════
     1. shell top-bar  → server.js renderAppShell, rendered OUTSIDE the app
        iframe (Inter font, translucent white over a blue gradient).
     2. PMM header bar → App.jsx, 46px, inside the iframe (--th-* tokens).
     3. PMM sidebar    → App.jsx, DGM-PMM header + PROJECT group (single group; no WORKSPACE).
     Do not collapse these into one bar — they are separate documents. */

  /* ─── 1 · shell top-bar (server.js) ─────────────────────────────────────── */
  .shell-topbar {
    position: relative; z-index: 200;                 /* sits above the app frame so the account menu overlays everything */
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 19px;                               /* left gutter aligns the home icon with the collapsed sidebar's app icon */
    background: rgba(255,255,255,0.78); backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(15,23,42,0.06);
    font-family: var(--font);
  }
  .shell-brand { display: flex; align-items: center; gap: 12px; }
  .shell-back { display: inline-flex; align-items: center; gap: 6px; color: var(--cl-navy); font-size: 15px; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
  .shell-div { width: 1px; height: 22px; background: rgba(15,23,42,0.15); flex-shrink: 0; margin-left: 7px; }   /* lands on the collapsed sidebar edge (≈54px) */
  .shell-modstrip { display: inline-flex; align-items: center; gap: 6px; }
  .shell-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: none; border: 1px dashed rgba(30,58,138,0.35); color: var(--pal-blue-67); cursor: pointer; }
  .shell-add:hover { background: rgba(30,58,138,0.08); }
  .shell-mod { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: none; border: 1px solid rgba(15,23,42,0.12); color: var(--pal-blue-65); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .shell-mod:hover { background: var(--pal-blue-04); color: var(--cl-navy); }
  .shell-mod.active { background: var(--cl-navy); border-color: var(--cl-navy); color: var(--pal-white); }
  .shell-mod.active:hover { background: var(--cl-navy); color: var(--pal-white); }
  .shell-user { display: flex; align-items: center; gap: 16px; }
  .shell-ms { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: none; border: 1px solid transparent; color: var(--pal-blue-65); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .shell-ms:hover { background: var(--pal-blue-04); color: var(--cl-navy); }
  .shell-ctrl { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: none; border: 1px solid transparent; color: var(--pal-blue-65); cursor: pointer; }
  .shell-ctrl:hover { background: var(--pal-blue-04); color: var(--cl-navy); }
  .shell-ctrl.active { background: var(--cl-navy); border-color: var(--cl-navy); color: var(--pal-white); }   /* Active-Chip colours while the AI panel is open */
  .shell-ctrl.active:hover { background: var(--cl-navy); color: var(--pal-white); }
  .shell-ctrl.notif { position: relative; }
  .notif-dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--cl-red); border: 1.5px solid var(--pal-white); }
  [data-theme="dark"] .notif-dot { border-color: var(--pal-blue-88); }
  /* DGMIND AI Assistant — full-browser-width docked panel, toggled by the shell AI icon.
     When open it does NOT overlay content: the app frame is shortened by its height (see body.assistant-open),
     so the main scrollbar and the bottom status bar stop at the top of the panel. */
  .dgm-assistant { position: fixed; left: 0; right: 0; bottom: var(--statusbar-h, 26px); width: 100%; z-index: 150; height: var(--assistant-h, 300px);
    background: var(--th-bg2); border-top: 1px solid var(--th-borders); box-shadow: 0 -8px 28px rgba(0,0,0,.12);
    display: flex; flex-direction: column; }
  body.assistant-open .pmm-app { height: calc(100% - 62px - var(--statusbar-h, 26px) - var(--assistant-h, 300px)); }
  /* Drag the top edge to resize the panel height. */
  .dgm-assistant-grip { position: absolute; top: 0; left: 0; right: 0; height: 7px; cursor: ns-resize; }
  .dgm-assistant-grip::after { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 42px; height: 3px; border-radius: 2px; background: var(--th-borders); }
  .dgm-assistant-grip:hover::after { background: var(--cl-navy); }
  .dgm-assistant-head .ai-model { height: 26px; padding: 0 6px; font-size: var(--fs-sm); }
  .dgm-assistant-head .ai-cost { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
    background: var(--th-block); border: 1px solid var(--th-border); color: var(--cl-navy); white-space: nowrap; }
  .dgm-assistant-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--th-border);
    font-weight: 700; font-size: 13px; color: var(--cl-navy); }
  .dgm-assistant-head .ttl svg { vertical-align: -3px; margin-right: 6px; }
  .dgm-assistant-head .grow { flex: 1; }
  .dgm-assistant-body { padding: 16px; color: var(--th-text2); font-size: var(--fs-md); overflow-y: auto; }
  .dgm-assistant-input { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--th-border); }
  .dgm-assistant-input input { flex: 1; }


  /* Create-a-New-List trigger (left of the pre-defined-filter selector). */
  .dgm-toolbar .lb-open { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: 1px solid var(--th-inputB); background: var(--th-input); color: var(--cl-navy); border-radius: var(--r-sm); cursor: pointer; margin-right: 4px; }
  .dgm-toolbar .lb-open:hover { background: var(--th-hover); }

  /* Create-a-New-List builder modal. */
  .lb-modal { width: 720px; max-width: 94vw; height: 82vh; }
  .lb-body { flex: 1; display: flex; min-height: 0; }
  .lb-nav { width: 200px; flex-shrink: 0; border-right: 1px solid var(--th-border); padding: 16px 12px; }
  .lb-nav-h { font-size: var(--fs-sm); font-weight: 700; color: var(--th-text); margin-bottom: 10px; }
  .lb-nav-i { display: block; padding: 7px 10px; font-size: 13px; color: var(--th-text2); border-left: 2px solid transparent; cursor: pointer; }
  .lb-nav-i.active { color: var(--cl-navy); font-weight: 600; border-left-color: var(--cl-navy); }
  .lb-main { flex: 1; overflow-y: auto; }
  .lb-sec { padding: 0 0 8px; }
  .lb-sec-h { background: var(--th-header); padding: 8px 20px; font-size: var(--fs-sm); font-weight: 700; color: var(--cl-navy); }
  .lb-sec-h .muted { font-weight: 400; margin-left: 8px; }
  .lb-body-pad { padding: 14px 20px; }
  .lb-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .lb-row > label { width: 150px; flex-shrink: 0; text-align: right; font-size: 13px; color: var(--th-text2); }
  .lb-row > input, .lb-row > select { flex: 1; }
  .lb-cond-lbl { font-size: 13px; font-weight: 600; color: var(--th-text); margin: 8px 0 6px; }
  .lb-cond-lbl .muted { font-weight: 400; }
  .lb-cond-rule { height: 1px; background: var(--th-border); margin: 8px 0 12px; }
  .lb-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
  .lb-col { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 12px; color: var(--th-text);
    background: var(--th-block); border: 1px solid var(--th-border); border-radius: var(--r-sm); }
  .lb-col .h { color: var(--th-textm); cursor: grab; }
  .lb-col .req { color: var(--cl-red); }
  .lb-col .x { margin-left: auto; background: none; border: none; color: var(--th-textm); cursor: pointer; font-size: 13px; }
  .lb-foot { flex-shrink: 0; display: flex; align-items: center; gap: 20px; padding: 14px 20px; border-top: 1px solid var(--th-border); }
  .lb-foot .chk-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--th-text2); cursor: pointer; }
  .lb-foot .grow { flex: 1; }
  .shell-name { color: var(--pal-blue-67); font-weight: 500; font-size: 13px; cursor: pointer; }
  .shell-name:hover { text-decoration: underline; }
  .shell-logout { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.6); border: 1px solid rgba(30,58,138,0.15); color: var(--pal-blue-67); font: inherit; font-size: 13px; cursor: pointer; }
  .shell-logout:hover { background: rgba(30,58,138,0.1); color: var(--cl-navy); }
  [data-theme="dark"] .shell-topbar { background: rgba(20,27,42,0.85); border-bottom-color: rgba(255,255,255,0.09); }
  [data-theme="dark"] .shell-back { color: var(--pal-blue-29); }
  [data-theme="dark"] .shell-ms, [data-theme="dark"] .shell-ctrl { color: var(--pal-blue-23); }
  [data-theme="dark"] .shell-ms:hover, [data-theme="dark"] .shell-ctrl:hover { background: rgba(255,255,255,0.08); color: var(--pal-white); }
  [data-theme="dark"] .shell-mod { color: var(--pal-blue-23); border-color: rgba(255,255,255,0.14); }
  [data-theme="dark"] .shell-mod:hover { background: rgba(255,255,255,0.08); color: var(--pal-white); }
  [data-theme="dark"] .shell-mod.active { background: var(--pal-blue-46); border-color: var(--pal-blue-46); color: var(--pal-white); }
  [data-theme="dark"] .shell-mod.active:hover { background: var(--pal-blue-46); color: var(--pal-white); }
  [data-theme="dark"] .shell-div { background: rgba(255,255,255,0.16); }
  [data-theme="dark"] .shell-name { color: var(--pal-blue-09); }
  [data-theme="dark"] .shell-logout { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--pal-blue-09); }

  /* ─── 2 + 3 · PMM app: sidebar | (header + content) ─────────────────────── */
  .pmm-app { display: flex; height: calc(100% - 62px - var(--statusbar-h, 26px)); }
  .pmm-sidebar { width: 220px; flex-shrink: 0; background: var(--th-bg2); border-right: 1px solid var(--th-border); display: flex; flex-direction: column; }
  .pmm-sidebar-head { height: 46px; box-sizing: border-box; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--th-border); }
  .pmm-sidebar-head .toggle { background: none; border: none; cursor: pointer; padding: 4px; color: var(--th-textm); display: inline-flex; }
  .pmm-sidebar-head .brand { font-size: 12px; color: var(--th-accent); font-weight: 700; letter-spacing: .5px; }
  .pmm-nav { flex: 1; padding: 8px; overflow-y: auto; min-height: 0; }
  .pmm-sec { padding: 4px 10px 6px; font-size: 9px; color: var(--th-textm); font-weight: 700; letter-spacing: .8px; }
  .pmm-sec.divided { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--th-border); }
  .pmm-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--th-text2); cursor: pointer; font-size: 13px; margin-bottom: 2px; white-space: nowrap; }
  .pmm-nav-item:hover { background: var(--th-hover); }
  .pmm-nav-item.active { background: var(--th-block); color: var(--th-accent); font-weight: 600; }
  .pmm-nav-item svg { flex-shrink: 0; }
  .pmm-navfoot { border-top: 1px solid var(--th-border); padding: 8px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
  .pmm-footbtn { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 6px; cursor: pointer; color: var(--th-text2); }
  .pmm-footbtn:hover { background: var(--th-hover); }
  .pmm-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--th-bg); }
  .pmm-header { height: 46px; box-sizing: border-box; padding: 0 16px; display: flex; align-items: center; gap: 10px; background: var(--th-bg2); border-bottom: 1px solid var(--th-border); }
  .pmm-header .hdr-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
  .pmm-header .swbtn { display: flex; align-items: center; justify-content: center; width: 28px; height: 24px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--th-text2); cursor: pointer; flex-shrink: 0; }
  .pmm-header .swbtn:hover { background: var(--th-hover); }
  .pmm-header .swbtn.on { background: var(--th-block); border-color: var(--th-accent); color: var(--th-accent); }
  .pmm-header .folder { display: flex; align-items: center; justify-content: center; width: 28px; height: 24px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--th-text2); cursor: pointer; flex-shrink: 0; }
  .pmm-header .folder:hover { background: var(--th-hover); }
  .pmm-header .doc { flex: 0 1 auto; text-align: center; color: var(--cl-green); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pmm-header .actions { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: flex-end; }
  .pmm-hbtn { display: flex; align-items: center; justify-content: center; width: 28px; height: 24px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--th-text2); cursor: pointer; }
  .pmm-hbtn:hover { background: var(--th-hover); }
  .pmm-viewer { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; color: var(--th-textm); }
  .pmm-viewer .av { width: 20px; height: 20px; border-radius: 50%; background: var(--cl-navy); color: var(--pal-white); display: grid; place-items: center; font-size: 10px; font-weight: 600; }

  /* ─── App-header v2.0.0 · view switcher & controls ──────────────────────────
     View-switcher buttons (Dashboard · Record list · Kanban · Calendar · Folder)
     and the Resource Centre button form ONE radio group. The active one adopts the
     Active-Chip colours (navy fill / white glyph); the centre identity is blanked
     while a view is active. ＋ / Search / History are popover toggles that "frame"
     while their menu is open and revert on outside-click or a second click. */
  .pmm-header .swbtn.chip-on,
  .pmm-header .folder.chip-on,
  .pmm-header .pmm-hbtn.chip-on { background: var(--cl-navy); border-color: var(--cl-navy); color: var(--pal-white); }
  .pmm-header .swbtn.chip-on:hover,
  .pmm-header .folder.chip-on:hover,
  .pmm-header .pmm-hbtn.chip-on:hover { background: var(--cl-navy); filter: brightness(1.12); }
  .pmm-header .pmm-hbtn.framed { border-color: var(--cl-navy); background: var(--th-block); color: var(--cl-navy); }

  /* Auxiliary selector beside the centre label — Kanban sort picklist / Calendar D-M-Y stepper */
  .pmm-header .hdr-aux { display: none; align-items: center; gap: 6px; flex-shrink: 0; }
  .pmm-header .hdr-aux.show { display: inline-flex; }
  .pmm-header .hdr-aux select { padding: 2px 6px; font-size: var(--fs-md); height: 24px; }
  .pmm-header .hdr-aux .step { display: inline-flex; align-items: center; gap: 2px; }
  .pmm-header .hdr-aux .step button { width: 20px; height: 22px; padding: 0; border: 1px solid var(--th-inputB); background: var(--th-input); color: var(--th-text2); border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
  .pmm-header .hdr-aux .step button:hover { background: var(--th-hover); }
  .pmm-header .hdr-aux .step span { min-width: 30px; text-align: center; font-size: var(--fs-md); color: var(--th-text); }

  /* Header popover menus (＋ create · search · recent) */
  .hdr-menu-anchor { position: relative; display: inline-flex; }
  .hdr-pop { position: absolute; top: 32px; right: 0; min-width: 216px; background: var(--th-bg); border: 1px solid var(--th-borders); border-radius: var(--r-lg); box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 6px; z-index: 40; display: none; }
  .hdr-pop.open { display: block; }
  .hdr-pop.left { left: 0; right: auto; }
  .hdr-pop .sec { padding: 6px 10px 2px; font-size: 9px; font-weight: 700; letter-spacing: .6px; color: var(--th-textm); text-transform: uppercase; }
  .hdr-pop .row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-md); font-size: var(--fs-lg); color: var(--th-text); cursor: pointer; white-space: nowrap; }
  .hdr-pop .row:hover { background: var(--th-hover); }
  .hdr-pop .row svg { color: var(--cl-green); flex-shrink: 0; }
  .hdr-pop input { width: 100%; margin: 4px 0 2px; }
  /* Viewer menu (person actions) — neutral icons, non-hover name header */
  #popViewer .row svg { color: var(--th-text2); }
  .hdr-pop .row.head { cursor: default; font-weight: 600; color: var(--th-text); }
  .hdr-pop .row.head:hover { background: none; }

  /* ─── Bottom docked panes: Project Chat (toggled by header chat button) sits ABOVE
       the DGMIND AI Assistant pane. Both are flex children of .pmm-main, so .dgm-content
       (flex:1) keeps them pinned to the bottom. ── */
  .pmm-chat { flex-shrink: 0; max-height: 42%; display: flex; flex-direction: column; background: var(--th-bg2); border-top: 1px solid var(--th-border); }
  .pmm-chat-head { padding: 8px 16px 2px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .3px; color: var(--cl-blue); }
  .pmm-chat-body { flex: 1; overflow-y: auto; min-height: 56px; padding: 8px 16px; font-size: var(--fs-md); color: var(--th-textm); }
  .pmm-chat-input { display: flex; gap: 8px; padding: 8px 16px 12px; }
  .pmm-chat-input input { flex: 1; }
  .pmm-assistant { flex-shrink: 0; background: var(--th-bg2); border-top: 1px solid var(--th-border); }
  .pmm-assistant-bar { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: none; border: none; cursor: pointer; font: inherit; font-size: var(--fs-md); font-weight: 600; color: var(--cl-purple); }
  .pmm-assistant-bar:hover { background: var(--th-hover); }
  .pmm-assistant-bar svg { color: var(--cl-purple); flex-shrink: 0; }
  .pmm-assistant-bar .hint { margin-left: auto; font-weight: 400; font-size: var(--fs-sm); color: var(--th-textm); }

  /* ─── v3 · shell user avatar + account menu (replaces name + Sign out) ──── */
  .shell-usermenu-anchor { position: relative; display: inline-flex; }
  .shell-avatar { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; }
  .shell-avatar .av { width: 30px; height: 30px; border-radius: 50%; background: var(--cl-navy); color: var(--pal-white); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
  .user-menu { position: absolute; top: 40px; right: 0; width: 238px; background: var(--pal-white); border: 1px solid rgba(15,23,42,0.12); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); z-index: 60; display: none; overflow: hidden; }
  .user-menu.open { display: block; }
  .user-menu-head { padding: 14px 16px 12px; text-align: center; border-bottom: 1px solid rgba(15,23,42,0.08); position: relative; }
  .user-menu-head .um-top { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
  .user-menu-head .um-top button { background: none; border: none; cursor: pointer; color: var(--pal-blue-65); display: inline-flex; padding: 2px; }
  .user-menu-head .av.lg { width: 56px; height: 56px; border-radius: 50%; background: var(--cl-navy); color: var(--pal-white); display: grid; place-items: center; font-size: 20px; font-weight: 700; margin: 2px auto 8px; }
  .user-menu-head .um-name { font-size: 14px; font-weight: 700; color: var(--pal-blue-85); }
  .user-menu-head .um-email { font-size: 12px; color: var(--pal-grey-54); margin-top: 1px; }
  .user-menu-head .um-status { font-size: 12px; color: var(--status-owner); margin-top: 6px; }
  .user-menu-rows { padding: 6px; }
  .user-menu-rows .row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 13px; color: var(--pal-blue-74); cursor: pointer; }
  .user-menu-rows .row:hover { background: var(--pal-blue-04); }
  .user-menu-rows .row svg { color: var(--pal-grey-54); flex-shrink: 0; }
  [data-theme="dark"] .user-menu { background: var(--pal-blue-84); border-color: rgba(255,255,255,0.14); }
  [data-theme="dark"] .user-menu-head { border-bottom-color: rgba(255,255,255,0.10); }
  [data-theme="dark"] .user-menu-head .um-name { color: var(--pal-blue-09); }
  [data-theme="dark"] .user-menu-rows .row { color: var(--pal-blue-16); }
  [data-theme="dark"] .user-menu-rows .row:hover { background: rgba(255,255,255,0.08); }

  /* ─── v3 · collapsible sidebar — the collapse handle is now the app icon ── */
  .pmm-sidebar-head .app-icon-btn { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; }
  .pmm-sidebar.collapsed { width: 54px; }
  .pmm-sidebar.collapsed .brand,
  .pmm-sidebar.collapsed .pmm-sec { display: none; }
  .pmm-sidebar.collapsed .pmm-sidebar-head { justify-content: center; padding: 0; gap: 0; }
  .pmm-sidebar.collapsed .pmm-nav-item { justify-content: center; gap: 0; font-size: 0; }
  .pmm-sidebar.collapsed .pmm-navfoot { justify-content: center; }

  /* ─── v3 · app-header dividers + refresh hourglass ─────────────────────── */
  .pmm-header .hdr-vline { width: 1px; height: 20px; background: var(--th-borders); margin: 0 4px; flex-shrink: 0; }
  .pmm-hbtn.refreshing svg { display: none; }
  .pmm-hbtn.refreshing::after { content: "\231B"; font-size: 13px; line-height: 1; }

  /* ─── v3 · record view — back link · record actions · in-record tabs · checkbox ── */
  .rec-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--cl-navy); cursor: pointer; background: none; border: none; padding: 0; margin-right: 4px; }
  .rec-back:hover { text-decoration: underline; }
  .rec-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: var(--sp-4); }   /* below the search bar, RIGHT-aligned */
  /* Record status chip — sits on the title row (centred), sized to harmonise with the record title. */
  .dgm-viewtitle .rec-status { font-size: 13px; font-weight: 700; letter-spacing: .4px; padding: 3px 14px; border-radius: 20px; color: var(--status-owner); background: rgba(26,127,55,.12); }
  .rec-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--th-border); margin-bottom: var(--sp-4); flex-wrap: wrap; }
  .rec-tab { padding: 8px 14px; font-size: 13px; color: var(--th-text2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
  .rec-tab:hover { color: var(--cl-navy); }
  .rec-tab.active { color: var(--cl-navy); font-weight: 600; border-bottom-color: var(--cl-navy); }
  .chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-md); color: var(--th-text); user-select: none; padding: 6px 0; }
  .chk input { position: absolute; opacity: 0; width: 0; height: 0; }
  .chk .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--th-inputB); display: inline-grid; place-items: center; flex-shrink: 0; background: var(--th-input); }
  .chk input:checked + .box { background: var(--cl-navy); border-color: var(--cl-navy); }
  .chk input:checked + .box::after { content: "\2713"; color: var(--pal-white); font-size: 11px; font-weight: 700; line-height: 1; }
  .chk input:focus-visible + .box { outline: 2px solid var(--th-accent); outline-offset: 1px; }
  .chk .unit { color: var(--th-textm); font-size: var(--fs-sm); }

  /* ─── v3 · hover key-info preview card (mouse-over a record / KPI card) ── */
  .hover-preview { position: fixed; z-index: 70; min-width: 220px; max-width: 300px; background: var(--th-bg); border: 1px solid var(--th-borders); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px 12px; font-size: 12px; color: var(--th-text); pointer-events: none; display: none; }
  .hover-preview.show { display: block; }
  .hover-preview .hp-type { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--th-textm); margin-bottom: 2px; }
  .hover-preview .hp-title { font-weight: 700; color: var(--cl-navy); margin-bottom: 4px; }
  .hover-preview .hp-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
  .hover-preview .hp-row .k { color: var(--th-text2); }
  .modal-head h2 .mh-icon { color: var(--cl-navy); vertical-align: -2px; margin-right: 6px; }

  .dgm-content { flex: 1; overflow: auto; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; background: var(--th-bg); }

  /* ─── ViewTitle ─────────────────────────────────────────────────────────── */
  .dgm-viewtitle { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-shrink: 0; }
  .dgm-viewtitle .icon { color: var(--cl-navy); display: grid; place-items: center; }
  .dgm-viewtitle h1 { margin: 0; font-size: 16px; font-weight: 600; color: var(--cl-navy); }
  .dgm-viewtitle .sub { font-size: var(--fs-sm); color: var(--th-textm); }
  /* v2.0.0: search is ALWAYS visible, right-aligned on the title row (above the count/Refresh/New
     row); Undo/Redo appear after the title only in individual-record view. */
  .dgm-viewtitle .grow { flex: 1; }
  .dgm-viewtitle .title-undo { display: none; gap: 4px; margin-left: 4px; }
  .dgm-viewtitle .title-undo.show { display: inline-flex; }
  .dgm-toolbar .predef-filter { height: 28px; cursor: pointer; margin-right: 2px; }
  .dgm-viewtitle .dgm-search { flex: 0 1 300px; max-width: 300px; min-width: 170px; }

  /* ─── Toolbar ───────────────────────────────────────────────────────────── */
  .dgm-toolbar { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); flex-shrink: 0; flex-wrap: wrap; }
  .dgm-search { position: relative; flex: 1; max-width: 320px; min-width: 200px; }
  .dgm-search svg { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--th-textm); }
  .dgm-search input { width: 100%; padding: 6px 8px 6px 28px; }
  input, select, textarea {
    font-family: var(--font); font-size: var(--fs-md);
    border: 1px solid var(--th-inputB); border-radius: var(--r-md);
    background: var(--th-input); color: var(--th-text); outline: none; padding: 6px 8px;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--th-accent); }
  .dgm-count { font-size: var(--fs-sm); color: var(--th-text2); }

  /* ─── Buttons (Btn: default / primary / danger · small) ─────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 6px 12px; border-radius: var(--r-md); font-size: var(--fs-md);
    font-family: var(--font); cursor: pointer;
    border: 1px solid var(--th-border); background: var(--th-card); color: var(--th-text);
  }
  .btn:hover { background: var(--th-hover); }
  .btn.small { padding: 4px 10px; font-size: var(--fs-sm); }
  .btn.primary { background: var(--cl-navy); border-color: var(--cl-navy); color: var(--pal-white); }
  .btn.primary:hover { filter: brightness(1.1); }
  .btn.danger { background: var(--cl-red); border-color: var(--cl-red); color: var(--pal-white); }
  .btn.danger:hover { filter: brightness(1.1); }
  .icon-action {
    background: none; border: none; cursor: pointer; padding: var(--sp-1);
    margin-left: 2px; border-radius: var(--r-sm); vertical-align: middle; color: var(--th-text2);
  }
  .icon-action:hover { background: var(--th-hover); }

  /* ─── Badges & chips ────────────────────────────────────────────────────── */
  .badge { font-size: var(--fs-sm); font-weight: 600; padding: 2px 8px; border-radius: 20px; }
  .badge.owner  { color: var(--status-owner);  background: rgba(26,127,55,.10); }
  .badge.shared { color: var(--status-shared); background: rgba(130,80,223,.10); }
  .badge.warn   { color: var(--pal-white); background: var(--warn-bg); font-weight: 700; letter-spacing: .5px; border-radius: 3px; }
  .star { color: var(--cl-amber); }
  .chip {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500;
    border: 1px solid var(--cl-navy); background: var(--th-input); color: var(--cl-navy); cursor: pointer;
  }
  .chip.active { background: var(--cl-navy); color: var(--pal-white); }
  .chip.dashed { border-style: dashed; border-color: var(--th-textm); color: var(--th-text2); }
  .chip .count { opacity: .7; font-size: var(--fs-xs); }

  /* ─── ComingSoon (deferred-feature affordance) ──────────────────────────── */
  .coming-soon { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: .3px; text-transform: uppercase; color: var(--th-textm, var(--pal-grey-40)); background: var(--th-bg3, var(--pal-amber-02)); border: 1px solid var(--th-border, var(--pal-grey-07)); border-radius: 4px; user-select: none; }
  .coming-wrap { display: inline-flex; align-items: center; opacity: .45; cursor: not-allowed; }

  /* ─── Table (sortable, sticky header, striped) ──────────────────────────── */
  .dgm-table-wrap { flex: 1; overflow: auto; border: 1px solid var(--th-border); border-radius: var(--r-lg); }
  table.dgm { width: 100%; border-collapse: collapse; font-size: var(--fs-md); table-layout: fixed; }
  table.dgm thead th {
    position: sticky; top: 0; z-index: 1; vertical-align: top;
    padding: var(--sp-2) var(--sp-3); text-align: left;
    color: var(--cl-navy); background: var(--th-header);
    border-bottom: 2px solid var(--th-borders); user-select: none; overflow: hidden;
  }
  /* Two-tier header: label + sort on TOP, filter field on the BOTTOM (aligned across all columns). */
  table.dgm thead .th-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 46px; }
  table.dgm thead .th-label { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; line-height: 1.15; }
  table.dgm thead .th-sort { display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: .78; flex-shrink: 0; cursor: pointer; color: var(--th-textm); font-size: 11px; }
  table.dgm thead .th-sort .up, table.dgm thead .th-sort .dn { opacity: .4; }
  table.dgm thead .th-sort.asc .up, table.dgm thead .th-sort.desc .dn { opacity: 1; color: var(--cl-navy); }
  table.dgm thead .th-filter { width: 100%; height: 24px; padding: 2px 6px; font-size: var(--fs-md);
    border: 1px solid var(--th-inputB); background: var(--th-input); color: var(--th-text); border-radius: var(--r-sm); }
  table.dgm thead .th-filter::placeholder { color: var(--th-textm); }
  /* Column resize handle — a light-grey vertical bar at the right edge of each header cell. */
  table.dgm thead th .col-resize { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
  table.dgm thead th .col-resize::before { content: ""; position: absolute; right: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--th-borders); }
  table.dgm thead th .col-resize:hover::before, table.dgm thead th .col-resize.dragging::before { background: var(--cl-navy); width: 2px; right: 2px; }
  body.col-resizing { cursor: col-resize; user-select: none; }
  table.dgm tbody td { padding: var(--sp-3) var(--sp-4); color: var(--th-text); border-bottom: 1px solid var(--th-border); }
  table.dgm tbody tr:nth-child(odd)  td { background: var(--th-rowO); }
  table.dgm tbody tr:nth-child(even) td { background: var(--th-rowE); }
  table.dgm tbody tr.open td { background: var(--th-block); }
  table.dgm tbody tr.selected td { background: var(--th-hover); }
  /* Leading utility columns (tick-box + location) — fixed width, NO separators, NO resize handles.
     The header tick-box is centred so it lines up with the per-row tick-boxes below it. */
  table.dgm thead th:first-child .th-inner { min-height: 0; justify-content: center; }
  table.dgm thead th:first-child .th-label { justify-content: center; }
  table.dgm th:first-child, table.dgm td:first-child,
  table.dgm th:nth-child(2), table.dgm td:nth-child(2) { padding-left: 2px; padding-right: 2px; }
  /* Icon-only location filter — a compact custom dropdown (native <option> can't hold icons). */
  .loc-sel { position: relative; display: inline-flex; align-items: center; gap: 0; cursor: pointer; height: 24px; padding: 0;
    border: 1px solid var(--th-inputB); background: var(--th-input); border-radius: var(--r-sm); }
  .loc-cur { display: inline-flex; }
  .loc-cx { color: var(--th-textm); flex-shrink: 0; margin-left: -1px; }
  .loc-menu { position: fixed; min-width: 0; background: var(--th-bg); border: 1px solid var(--th-border);
    border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 3px; display: none; z-index: 80; }
  .loc-menu.open { display: block; }
  .loc-it { display: flex; align-items: center; justify-content: center; padding: 5px; border-radius: 4px; cursor: pointer; }
  .loc-it:hover { background: var(--th-hover); }
  .loc-it .loc-ic { display: inline-flex; }
  /* Actions header label sits over the right-aligned row icons. */
  table.dgm thead th:last-child .th-label { justify-content: flex-end; }
  /* Actions column packed to its narrowest — tight icon buttons, minimal cell padding. */
  table.dgm th:last-child, table.dgm td:last-child { padding-left: 3px; padding-right: 8px; }
  table.dgm tbody td:last-child .icon-action { padding: 3px; margin-left: 0; }
  /* In-cell list fields are compact and harmonised with the status chips' height. */
  table.dgm tbody td select { height: 22px; padding: 0 6px; font-size: var(--fs-sm); border-radius: 6px; max-width: 100%; }
  table.dgm tbody td.rec-cell { cursor: pointer; }
  table.dgm tbody td.rec-cell:hover { text-decoration: underline; text-decoration-color: var(--th-borders); }
  .muted { color: var(--th-text2); }
  .updated { font-size: var(--fs-xs); color: var(--th-textm); margin-top: 1px; }

  /* ─── Section card / DefRow (detail panels) ─────────────────────────────── */
  .card { border: 1px solid var(--th-border); border-radius: var(--r-lg); background: var(--th-card); padding: var(--sp-4); }
  .card .card-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--cl-navy); margin-bottom: var(--sp-4); }
  .defrow { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: var(--sp-3); font-size: var(--fs-md); align-items: baseline; padding: 3px 0; }
  .defrow .k { color: var(--th-text2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .3px; }

  /* ─── Modal ─────────────────────────────────────────────────────────────── */
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; place-items: center; z-index: 500; }
  .scrim.open { display: grid; }
  .modal { width: 640px; max-width: 92vw; max-height: 85vh; background: var(--th-bg); border: 1px solid var(--th-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
  .modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--th-border); flex-shrink: 0; }
  .modal-head .grow { flex: 1; }
  .modal-head .mh-loc { color: var(--th-textm); font-size: 15px; }
  .modal-head .mh-title { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--th-text); }
  .modal-body { padding: 16px 24px 24px; overflow-y: auto; }
  .modal-foot { display: flex; gap: var(--sp-3); justify-content: flex-end; padding: var(--sp-5); border-top: 1px solid var(--th-border); }
  .field { border: 1px solid var(--th-border); border-radius: var(--r-lg); padding: 8px 12px; margin-bottom: 14px; }
  .field label { display: block; font-size: var(--fs-sm); color: var(--th-textm); text-transform: uppercase; letter-spacing: .5px; font-weight: 500; margin-bottom: var(--sp-1); }
  .field input, .field select { width: 100%; }
  .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); }

  /* ─── Toast ─────────────────────────────────────────────────────────────── */
  .toast { position: fixed; bottom: calc(var(--statusbar-h, 26px) + var(--sp-3)); left: 50%; transform: translateX(-50%); z-index: 220; background: var(--cl-navy); color: var(--pal-white); padding: 10px 16px; border-radius: var(--r-md); font-size: var(--fs-md); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  /* ── Persistent bottom status bar (v04) — full window width; overridden by the AI Assistant / Chat panels ── */
  .dgm-statusbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--statusbar-h, 26px); z-index: 120;
    display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4);
    background: var(--th-bg2); border-top: 1px solid var(--th-border);
    font-size: var(--fs-sm); color: var(--th-textm); }
  .dgm-statusbar .grow { flex: 1; }
  .dgm-statusbar .sb-save { display: flex; align-items: center; gap: 6px; color: var(--cl-green); font-weight: 600; }
  .dgm-statusbar .sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-green); flex-shrink: 0; }
  .dgm-statusbar .sb-meta { color: var(--th-textm); }
  .dgm-statusbar .sb-whatsnew { color: var(--cl-blue); text-decoration: none; font-weight: 600; }
  .dgm-statusbar .sb-whatsnew:hover { text-decoration: underline; }
  /* ── What's New window (v04) — release notes opened from the status-bar link ── */
  .wn-modal { width: 720px; max-width: 92vw; max-height: 85vh; background: var(--th-bg); border: 1px solid var(--th-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
  .wn-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--th-border); flex-shrink: 0; }
  .wn-head .wn-ttl { flex: 1; font-size: 18px; font-weight: 700; color: var(--th-text); }
  .wn-body { overflow-y: auto; padding: 20px 24px 28px; background: var(--th-bg2); }
  .wn-doc { font-family: var(--font-mono)"Cascadia Code", Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.6; color: var(--th-text); }
  .wn-doc h3 { margin: 24px 0 10px; font-size: 13px; font-weight: 700; color: var(--cl-navy); }
  .wn-doc h3:first-child { margin-top: 0; }
  .wn-doc h4 { margin: 16px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--cl-blue); }
  .wn-doc p { margin: 0 0 4px; color: var(--th-textm); }

  /* ─── Reference page scaffolding (not part of the app) ──────────────────── */
  .ref-section { margin-top: var(--sp-6); }
  .ref-section > h3 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .4px; color: var(--th-textm); border-bottom: 1px solid var(--th-border); padding-bottom: var(--sp-2); }
  .ref-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; margin: var(--sp-4) 0; }
  .swatch { width: 92px; }
  .swatch .chip-color { height: 44px; border-radius: var(--r-md); border: 1px solid var(--th-border); }
  .swatch .lbl { font-size: var(--fs-xs); margin-top: var(--sp-1); color: var(--th-text2); }
  .swatch .hex { font-size: var(--fs-xs); color: var(--th-textm); }

/* ── carried forward from DFO's pre-v04 base (superseded by v04 .mh-title/.th-sort but kept as harmless fallbacks) ── */
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--th-text); flex: 1; }
table.dgm thead th.sortable { cursor: pointer; }

/* == DFO option-specific additions (namespaced .dfo-*) == */

.dfo-seg{display:flex;gap:8px;margin:10px 0 12px;flex-wrap:wrap}
.dfo-pill{font-size:12px;font-weight:600;padding:6px 16px;border-radius:16px;border:1px solid var(--th-borders);background:var(--th-bg);color:var(--th-text2);cursor:pointer;user-select:none}
.dfo-pill:hover{border-color:var(--th-accent);color:var(--th-accent)}
.dfo-pill.on{background:var(--th-accent);border-color:var(--th-accent);color:var(--pal-white)}
.dfo-kpis{display:flex;gap:10px;margin:0 0 12px}
.dfo-kpi{flex:1 1 0;min-width:0;border:1px solid var(--th-border);border-radius:8px;padding:10px 12px;background:var(--th-card)}
.dfo-kpi .v{font-size:22px;font-weight:700;color:var(--th-accent)}
.dfo-kpi .l{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--th-textm);text-transform:uppercase;margin-top:2px}
.dfo-boardwrap{flex:1;display:flex;gap:12px;overflow:hidden;min-height:0}
.dfo-board{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;overflow-x:auto;min-height:0}
.dfo-lane{background:var(--th-bg2);border:1px solid var(--th-border);border-radius:8px;display:flex;flex-direction:column;min-width:190px;overflow:hidden}
.dfo-lanehead{padding:8px 10px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--th-text2);border-bottom:1px solid var(--th-border);display:flex;justify-content:space-between;align-items:center}
.dfo-lanebody{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.dfo-cardk{background:var(--th-bg);border:1px solid var(--th-border);border-radius:8px;padding:8px 10px;cursor:pointer;position:relative}
.dfo-cardk:hover{border-color:var(--th-accent)}
.dfo-cardk .id{font-size:11px;font-weight:700;color:var(--th-accent)}
.dfo-cardk .t{font-size:12px;color:var(--th-text);margin:3px 0}
.dfo-cardk .m{font-size:10px;color:var(--th-textm);display:flex;gap:8px;flex-wrap:wrap}
.dfo-cardk .more{display:none;margin-top:7px;border-top:1px dashed var(--th-border);padding-top:6px;font-size:11px;color:var(--th-text2);line-height:1.6}
.dfo-cardk.expanded .more{display:block}
.dfo-rail{width:270px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.dfo-alert{display:flex;gap:8px;padding:8px;border:1px solid var(--th-border);border-radius:8px;background:var(--th-bg);font-size:11px;align-items:flex-start}
.dfo-alert .dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.dfo-gantt{border:1px solid var(--th-border);border-radius:8px;background:var(--th-bg);margin-bottom:12px}
.dfo-gantthead{padding:8px 12px;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--th-textm);text-transform:uppercase;border-bottom:1px solid var(--th-border);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dfo-dutyrow{display:grid;grid-template-columns:170px 1fr;align-items:center;border-bottom:1px solid var(--th-border);font-size:11px}
.dfo-dutyrow:last-child{border-bottom:none}
.dfo-dutyrow .who{padding:7px 12px;color:var(--th-text2)}
.dfo-dutytrack{position:relative;height:26px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 1px),var(--th-border) calc(100%/12 - 1px),var(--th-border) calc(100%/12))}
.dfo-bar{position:absolute;top:5px;height:16px;border-radius:4px;font-size:9px;color:var(--pal-white);display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap}
.dfo-dview{display:none;flex-direction:column;overflow:hidden;flex:1;min-height:0}
.dfo-dview.on{display:flex}
.dfo-calctl{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.dfo-set{display:flex;flex-direction:column;gap:3px}
.dfo-set .l{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--th-textm)}
.dfo-set select,.dfo-set input[type=range]{font:inherit;font-size:11px;padding:4px 6px;border:1px solid var(--th-inputB);border-radius:5px;background:var(--th-input);color:var(--th-text)}
.dfo-chipgrp{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.dfo-calgrid{flex:1;overflow:auto;border:1px solid var(--th-border);border-radius:8px;min-height:220px}
.dfo-caltable{border-collapse:collapse;width:100%;min-width:760px}
.dfo-caltable th{position:sticky;top:0;background:var(--th-header);font-size:10px;font-weight:700;color:var(--th-text2);text-transform:uppercase;letter-spacing:.3px;padding:6px;border:1px solid var(--th-border)}
.dfo-caltable td{border:1px solid var(--th-border);padding:2px 4px;font-size:10px;color:var(--th-textm);vertical-align:top;position:relative}
.dfo-ev{border-radius:4px;color:var(--pal-white);font-size:9px;padding:2px 5px;margin:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfo-view{display:none;flex-direction:column;height:100%;overflow:hidden}.dfo-view.active{display:flex}
.dfo-back{cursor:pointer;color:var(--th-accent);font-size:12px;font-weight:600;margin-right:8px}
.dfo-tabs{display:flex;gap:2px;border-bottom:1px solid var(--th-border);margin:10px 0 0;padding:0 2px;flex-wrap:wrap}
.dfo-tab{padding:7px 12px;font-size:11px;font-weight:600;color:var(--th-text2);cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:6px 6px 0 0;white-space:nowrap}
.dfo-tab:hover{background:var(--th-hover)}
.dfo-tab.active{background:var(--th-bg);border-color:var(--th-border);color:var(--th-accent);position:relative;top:1px}
.dfo-pane{display:none;padding:12px 2px;overflow:auto;flex:1;min-height:0}
.dfo-pane.active{display:block}
.dfo-kv{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--th-border);font-size:12px;gap:12px}
.dfo-kv b{color:var(--th-text);text-align:right}.dfo-kv span{color:var(--th-textm)}
.dfo-kpicard{border:1px solid var(--th-border);border-radius:8px;background:var(--th-card);margin-bottom:4px}
.dfo-kpicard .head{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--th-textm);cursor:pointer;user-select:none}
.dfo-kpicard .body{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 22px;padding:0 12px 10px}
.dfo-kpicard.closed .body{display:none}

.dfo-menu{position:absolute;background:var(--th-bg);border:1px solid var(--th-borders);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:20;min-width:210px;padding:4px;display:none}
.dfo-menu.open{display:block}
.dfo-menu .mi{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:12px;color:var(--th-text);padding:7px 10px;border-radius:5px;cursor:pointer}
.dfo-menu .mi:hover{background:var(--th-hover)}
.dfo-menu .mn{font-size:10px;color:var(--th-textm);padding:2px 10px 6px;line-height:1.5}

.dfo-colmain{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.dfo-kpirow{border-bottom:1px solid var(--th-border);background:var(--th-bg2);flex-shrink:0}
.dfo-kpihead{display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--th-textm);cursor:pointer;user-select:none}
.dfo-kpigrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0 12px 10px}
.dfo-kpigrid.hidden{display:none}
.dfo-kpi{border:1px solid var(--th-border);border-radius:8px;background:var(--th-card);padding:6px 10px;min-width:0}
.dfo-kpi .l{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--th-textm)}
.dfo-kpi .v{font-size:13px;font-weight:700;color:var(--th-accent);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dfo-kpi .s{font-size:9px;color:var(--th-text2);margin-top:1px}
.dfo-map{flex:1;position:relative;background:var(--th-bg3);overflow:hidden;min-height:120px}
.dfo-palette{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:2px;background:var(--th-bg);border:1px solid var(--th-borders);border-radius:8px;padding:5px;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:5}
.dfo-ptool{width:36px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:6px;color:var(--th-text2);cursor:pointer;font-size:13px}
.dfo-ptool:hover{background:var(--th-hover)}
.dfo-ptool.active{background:var(--th-block);color:var(--th-accent);outline:1px solid var(--th-accent)}
.dfo-mapbar{position:absolute;top:12px;left:60px;right:12px;display:flex;gap:5px;align-items:flex-start;z-index:4;flex-wrap:wrap}
.dfo-mapbar select{font:inherit;font-size:11px;padding:4px 7px;border-radius:6px;border:1px solid var(--th-borders);background:var(--th-bg);color:var(--th-text)}
.dfo-layer{font-size:10px;font-weight:600;padding:3px 8px;border-radius:14px;border:1px solid var(--th-borders);background:var(--th-bg);color:var(--th-text2);cursor:pointer;user-select:none;white-space:nowrap}
.dfo-layer.on{border-color:var(--th-accent);color:var(--th-accent);background:var(--th-block)}
.dfo-menu{position:absolute;background:var(--th-bg);border:1px solid var(--th-borders);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:20;min-width:230px;padding:4px;display:none}
.dfo-menu.open{display:block}
.dfo-menu .mi{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:12px;color:var(--th-text);padding:7px 10px;border-radius:5px;cursor:pointer}
.dfo-menu .mi:hover{background:var(--th-hover)}
.dfo-menu .mh{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--th-textm);padding:6px 10px 3px}
.dfo-menu .mn{font-size:10px;color:var(--th-textm);padding:2px 10px 6px;line-height:1.5}
.dfo-menu .row{display:flex;gap:6px;align-items:center;padding:4px 10px;font-size:11px;color:var(--th-text2)}
.dfo-menu .row input{width:64px;font:inherit;font-size:11px;padding:3px 5px;border:1px solid var(--th-inputB);border-radius:4px;background:var(--th-input);color:var(--th-text)}
.dfo-divider{height:7px;flex-shrink:0;background:var(--th-bg2);border-top:1px solid var(--th-border);border-bottom:1px solid var(--th-border);cursor:row-resize;display:flex;align-items:center;justify-content:center}
.dfo-divider::after{content:"";width:44px;height:3px;border-radius:2px;background:var(--th-borders)}
.dfo-fpl{flex-shrink:0;display:flex;flex-direction:column;background:var(--th-bg);overflow:hidden;height:300px}
.dfo-fplhead{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--th-border);font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--th-accent);text-transform:uppercase;flex-wrap:wrap}
.dfo-fplset{display:flex;gap:10px;align-items:flex-end;padding:8px 12px;border-bottom:1px solid var(--th-border);flex-wrap:wrap;background:var(--th-bg2)}
.dfo-set{display:flex;flex-direction:column;gap:2px}
.dfo-set .l{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--th-textm)}
.dfo-set input,.dfo-set select{font:inherit;font-size:11px;padding:4px 6px;border:1px solid var(--th-inputB);border-radius:5px;background:var(--th-input);color:var(--th-text);width:auto;min-width:64px}
.dfo-set .cmp{font-size:11px;color:var(--th-text2)}.dfo-set .cmp b{color:var(--th-accent)}
.dfo-fplscroll{flex:1;overflow:auto}
.dfo-fpl table{border-collapse:collapse;min-width:1450px;width:100%}
.dfo-fpl th{position:sticky;top:0;z-index:1;background:var(--th-header);padding:6px 8px;text-align:left;font-size:9px;font-weight:700;color:var(--cl-navy);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--th-border);white-space:nowrap}
html[data-theme="dark"] .dfo-fpl th{color:var(--th-accent)}
.dfo-fpl td{padding:5px 8px;font-size:11px;color:var(--th-text);border-bottom:1px solid var(--th-border);white-space:nowrap}
.dfo-checks{display:flex;gap:6px;align-items:center;padding:5px 12px;border-top:1px solid var(--th-border);background:var(--th-bg2);flex-wrap:wrap;font-size:10px}
.dfo-chk{display:inline-flex;align-items:center;gap:4px;font-weight:600;padding:2px 8px;border-radius:12px}
.dfo-mode{display:inline-flex;border:1px solid var(--th-borders);border-radius:14px;overflow:hidden;background:var(--th-bg)}
.dfo-mode button{border:none;background:none;font:inherit;font-size:10px;font-weight:700;padding:4px 10px;color:var(--th-text2);cursor:pointer}
.dfo-mode button.on{background:var(--th-accent);color:var(--pal-white)}
.dfo-legend{position:absolute;bottom:10px;left:12px;background:var(--th-bg);border:1px solid var(--th-border);border-radius:6px;padding:5px 9px;font-size:10px;color:var(--th-text2);z-index:3;display:flex;gap:10px;flex-wrap:wrap;max-width:70%}
.dfo-leg{display:flex;align-items:center;gap:4px}
.dfo-sw{width:13px;height:3px;border-radius:2px;display:inline-block}

.dfo-feas{display:inline-flex;gap:4px;align-items:center}
.dfo-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dfo-tabs{display:flex;gap:2px;border-bottom:1px solid var(--th-border);margin:10px 0 0;padding:0 2px;align-items:flex-end}
.dfo-tab{padding:8px 14px;font-size:12px;font-weight:600;color:var(--th-text2);cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:6px 6px 0 0}
.dfo-tab:hover{background:var(--th-hover)}
.dfo-tab.active{background:var(--th-bg);border-color:var(--th-border);color:var(--th-accent);position:relative;top:1px}
.dfo-tab.right{margin-left:auto}
.dfo-tab.link{color:var(--th-accent)}
.dfo-pane{display:none;padding:14px 2px;overflow:auto;flex:1;min-height:0}
.dfo-pane.active{display:flex;flex-direction:column}
.dfo-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dfo-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.dfo-kv{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--th-border);font-size:12px}
.dfo-kv b{color:var(--th-text)}.dfo-kv span{color:var(--th-text2)}
.dfo-view{display:none;flex-direction:column;height:100%;overflow:hidden}.dfo-view.active{display:flex}
.dfo-back{cursor:pointer;color:var(--th-accent);font-size:12px;font-weight:600;margin-right:8px}
.dfo-mse{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--th-border);font-size:12px}
.dfo-mse input{width:auto}
.dfo-mse .w{margin-left:auto;color:var(--th-text2);font-size:11px}
.dfo-iframe{flex:1;min-height:420px;border:1px solid var(--th-border);border-radius:8px;width:100%}
.dfo-warn{font-size:11px;font-weight:600;color:var(--warn-bg);background:var(--pal-amber-08);border-radius:6px;padding:6px 9px;margin-top:8px;display:none}
.dfo-warn.on{display:block}
[data-theme="dark"] .dfo-warn{background:var(--pal-amber-85);color:var(--pal-amber-08)}
.dfo-tlmkpis{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px}
.dfo-tkpi{border:1px solid var(--th-border);border-radius:8px;background:var(--th-card);padding:8px 10px}
.dfo-tkpi .v{font-size:16px;font-weight:700;color:var(--th-accent)}
.dfo-tkpi .l{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--th-textm);margin-top:2px}
.dfo-simgrid{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:12px}
.dfo-plan{border:1px solid var(--th-border);border-radius:8px;background:var(--th-bg3);overflow:hidden;position:relative}
.dfo-plan .cap{position:absolute;top:6px;left:9px;font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--th-textm);text-transform:uppercase}

.dfo-navdiv{border-top:1px solid var(--th-borders);margin:8px 6px}
.dfo-sbfoot{border-top:1px solid var(--th-border);padding:8px 12px;display:flex;gap:6px}
.dfo-zoom{position:absolute;right:12px;bottom:100px;display:flex;flex-direction:column;gap:4px;z-index:5}
.dfo-zoom button{width:30px;height:30px;border-radius:6px;border:1px solid var(--th-borders);background:var(--th-bg);color:var(--th-text2);font-size:15px;cursor:pointer}
.dfo-zoom button:hover{background:var(--th-hover)}
.dfo-fplset .rightgrp{margin-left:auto;display:flex;gap:10px}
.dfo-drag{cursor:grab;color:var(--th-textm);font-size:13px;user-select:none}
.dfo-bin{cursor:pointer;color:var(--cl-red);background:none;border:none;font-size:13px;padding:2px}
tr.dfo-dragover td{border-top:2px solid var(--th-accent)}
.dfo-simgrid2{display:grid;grid-template-columns:1.15fr 1fr;grid-auto-rows:minmax(220px,auto);gap:12px}
.dfo-gv{border:1px solid var(--th-border);border-radius:8px;background:var(--pal-blue-94);position:relative;overflow:hidden;display:flex;flex-direction:column}
.dfo-gv .vp{flex:1;position:relative;min-height:150px}
.dfo-gv .osd{position:absolute;inset:0;color:var(--pal-green-33);font-family:var(--font-mono);font-size:9px;padding:6px 8px;pointer-events:none}
.dfo-gvtabs{display:flex;border-top:1px solid var(--pal-blue-82);background:var(--pal-blue-91)}
.dfo-gvtab{flex:1;text-align:center;padding:6px 0;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--pal-grey-46);cursor:pointer;text-transform:uppercase}
.dfo-gvtab.active{color:var(--pal-green-33);border-top:2px solid var(--pal-green-33)}
.dfo-gvpane{display:none;background:var(--pal-blue-91);color:var(--pal-blue-18);font-size:11px;padding:8px 10px;max-height:150px;overflow:auto}
.dfo-gvpane.active{display:block}
.dfo-gvpane .dfo-kv{border-bottom-color:var(--pal-blue-82)}
.dfo-gvpane .dfo-kv span{color:var(--pal-grey-46)}.dfo-gvpane .dfo-kv b{color:var(--pal-blue-18)}
.dfo-gvpane input[type=range]{width:100%}
.dfo-eagrid{display:grid;grid-template-columns:250px 1fr;gap:14px;flex:1;min-height:0}
.dfo-ealist{border:1px solid var(--th-border);border-radius:8px;padding:8px;overflow-y:auto;background:var(--th-card)}
.dfo-ealist label{display:flex;gap:7px;align-items:center;font-size:11px;padding:4px 2px;color:var(--th-text2)}
.dfo-pv-viewport{background:var(--pal-blue-94-2)}
.dfo-pv-osd{position:absolute;inset:0;pointer-events:none;font-family:var(--font-mono)"Menlo",monospace;color:var(--pal-green-13);text-shadow:0 0 3px rgba(0,0,0,.9)}
.dfo-pv-osd .rib{position:absolute;left:0;right:0;display:flex;gap:18px;justify-content:center;font-size:11px;letter-spacing:.5px}
.dfo-pv-osd .rib.top{top:8px}.dfo-pv-osd .rib.bot{bottom:8px}
.dfo-pv-osd .rib b{font-weight:700;color:var(--pal-green-04)}
.dfo-pv-osd .corner{position:absolute;font-size:10px;line-height:1.5}
.dfo-pv-osd .corner.tl{top:28px;left:12px}.dfo-pv-osd .corner.tr{top:28px;right:12px;text-align:right}
.dfo-pv-osd .corner.bl{bottom:30px;left:12px}.dfo-pv-osd .corner.br{bottom:30px;right:12px;text-align:right}
.dfo-pv-osd .rec{color:var(--pal-red-35);font-weight:700}
.dfo-pv-osd .rec .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pal-red-35);margin-right:4px;animation:pvblink 1.1s steps(1) infinite}
@keyframes pvblink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.dfo-pv-osd .rec .dot{animation:none}}
.dfo-pv-osd svg.reticle{position:absolute;inset:0;width:100%;height:100%}
.dfo-gvpane.light{background:var(--th-bg2);color:var(--th-text);max-height:230px}
.dfo-gvpane.light .dfo-kv{border-bottom-color:var(--th-border)}
.dfo-gvpane.light .dfo-kv span{color:var(--th-text2)}.dfo-gvpane.light .dfo-kv b{color:var(--th-text)}
.dfo-pv-slider{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:var(--th-text2)}
.dfo-pv-slider input[type=range]{flex:1}
.dfo-pv-slider .val{font-family:var(--font-mono);font-size:11px;color:var(--th-accent);min-width:56px;text-align:right}
.dfo-pv-slider select{font:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--th-inputB);border-radius:5px;background:var(--th-input);color:var(--th-text)}
.dfo-pv-note{font-size:10px;color:var(--th-textm);line-height:1.5;padding:6px 2px}
.dfo-docktabs{display:flex;border-top:1px solid var(--th-border);background:var(--th-bg2)}
.dfo-simgrid2 .dfo-gv{background:var(--th-bg)}
.dfo-simgrid2 .dfo-gv .vp{min-height:240px}
.dfo-eachart{border:1px solid var(--th-border);border-radius:8px;background:var(--th-bg);position:relative;min-height:300px}
.dfo-setval{display:inline-block;font-size:11px;font-weight:700;color:var(--th-accent);padding:4px 6px;border:1px solid transparent;border-radius:5px;background:var(--th-bg3)}
.dfo-gvbar{padding:6px 10px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--th-text2);background:var(--th-bg2);border-top:1px solid var(--th-border);cursor:pointer;user-select:none}
.dfo-gvbar .car{display:inline-block;width:12px}
.dfo-gvbox.collapsed{display:none}
.dfo-gvbox.rdonly input,.dfo-gvbox.rdonly select,.dfo-gvbox.rdonly .btn{pointer-events:none;opacity:.55}
.dfo-addleg td{padding:6px 8px;background:var(--th-bg2)}
tr.dfo-activeleg td{background:var(--th-block)!important;color:var(--th-accent);font-weight:600}
.dgm th{vertical-align:top}
table.dgm th.dfo-hasfilter{position:relative;padding-bottom:32px}
.dfo-fwrap{position:absolute;left:6px;right:6px;bottom:5px;margin:0;display:flex;align-items:center}
.dfo-fwrap .fx{position:absolute;right:4px;font-size:10px;font-weight:700;color:var(--cl-red);cursor:pointer;display:none;background:var(--th-input);padding:0 2px}
.dfo-fwrap input:not(:placeholder-shown)+.fx{display:block}
.dfo-fwrap input{width:100%;box-sizing:border-box;font:inherit;font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;padding:2px 4px;border:1px solid var(--th-inputB);border-radius:4px;background:var(--th-input);color:var(--th-text)}
th .dfo-sort{position:absolute;top:9px;right:7px;margin:0;font-size:9px;line-height:.75;letter-spacing:-1px;color:var(--th-textm);cursor:pointer;user-select:none}
th .dfo-sort.on{color:var(--th-accent)}
.dfo-colgrip{position:absolute;top:4px;right:-1px;width:0;border-right:1px solid var(--th-borders);height:calc(100% - 8px);cursor:col-resize;z-index:2;padding-left:4px}
.dfo-colgrip:hover{border-right:2px solid var(--th-accent)}
.modal .field{display:flex;flex-direction:column;gap:3px}
.modal .field > .lbl{min-height:13px}
.modal .grid2{align-items:start}
.dfo-linked{position:relative}
.dfo-cellin{width:100%;box-sizing:border-box;font:inherit;font-size:11px;padding:2px 4px;border:1px solid var(--th-inputB);border-radius:4px;background:var(--th-input);color:var(--th-text)}
#fpltbl td{vertical-align:middle}
.dfo-mav{position:relative}
.dfo-mav .lx{display:none;position:absolute;top:2px;right:2px;color:var(--cl-red);font-size:10px;font-weight:700;cursor:pointer;background:var(--th-bg);border-radius:3px;padding:0 3px}
.dfo-mav:hover .lx{display:block}
.dfo-linked .lx{display:none;position:absolute;top:2px;right:2px;color:var(--cl-red);font-size:10px;font-weight:700;cursor:pointer;background:var(--th-bg);border-radius:3px;padding:0 3px}
.dfo-linked:hover .lx{display:block}
.dfo-resruler{display:flex;justify-content:space-between;font-size:9px;color:var(--th-text2);border-bottom:1px solid var(--th-borders);padding:2px 4px;margin-bottom:6px;font-family:var(--font-mono)}
.chip.pill{border-radius:16px;font-weight:600;padding:5px 14px}
.chip.pill.active{background:var(--cl-navy);border-color:var(--cl-navy);color:var(--pal-white)}
html[data-theme="dark"] .chip.pill.active{background:var(--th-accent);border-color:var(--th-accent);color:var(--pal-blue-91-2)}
.dfo-hunit{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--th-text2);margin-left:12px;text-transform:none}
.dfo-calctl .dfo-set > .l{white-space:nowrap;min-height:13px;display:block}
.dfo-calctl{align-items:flex-end}
.dfo-hunit select{font:inherit;font-size:11px;font-weight:400;padding:3px 5px;border:1px solid var(--th-inputB);border-radius:5px;background:var(--th-input);color:var(--th-text);text-transform:none;letter-spacing:0}
.dfo-hlink{font-size:12px;font-weight:600;color:var(--th-accent);cursor:pointer;margin-left:14px;white-space:nowrap}
.dfo-hlink:hover{text-decoration:underline}
.dfo-vbar{display:inline-block;width:1px;height:20px;background:var(--th-borders);margin:0 12px 0 14px;vertical-align:middle}

/* ==== v04 compliance: column-header label font + tick-box definition (M0332 v04) ==== */
.dgm thead th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; line-height: 1.15; }
.dgm thead th.sortable { text-transform: uppercase; }
.dgm input[type="checkbox"], .dfo-view input[type="checkbox"], .modal input[type="checkbox"], .scrim input[type="checkbox"] {
  accent-color: var(--cl-navy); width: 16px; height: 16px; cursor: pointer; vertical-align: middle; flex-shrink: 0; }
.dgm input[type="checkbox"]:disabled, .dfo-view input[type="checkbox"]:disabled, .modal input[type="checkbox"]:disabled, .scrim input[type="checkbox"]:disabled { opacity: .5; cursor: default; }

/* v04: light-grey vertical dividers between table-header columns */
.dgm thead th { border-right: 1px solid var(--th-borders); }
.dgm thead th:last-child { border-right: none; }
/* v04: tighten dashboard title -> segment spacing */
#view-Dashboard .dgm-viewtitle { margin-bottom: 6px; }
.dfo-seg { margin-top: 0; }

/* v04: Actions column at the end of each list table (open in new tab / edit / delete) */
.dfo-actcol{white-space:nowrap}
.dfo-actcell{white-space:nowrap;text-align:right}
.dfo-act{border:none;background:none;cursor:pointer;font-size:13px;line-height:1;padding:2px 5px;vertical-align:middle;color:var(--th-textm)}
.dfo-act.open{color:var(--cl-blue)}
.dfo-act.del{color:var(--cl-red)}
.dfo-act:hover{filter:brightness(1.2)}

/* v04: reserve room at the right of each header cell so the label never overlaps the top-right sort control */
table.dgm thead th { padding-right: 32px; }

/* v04: location icon column (2nd column of every record list) */
.dfo-loccol,.dfo-loccell{width:24px;text-align:center;padding-left:2px;padding-right:2px}
.dfo-locic{color:var(--th-textm);font-size:13px;cursor:default}

/* v04: per-cell location selector (globe + caret) opening a shared provider menu */
.dfo-locsel{display:inline-flex;align-items:center;gap:1px;border:1px solid transparent;background:none;border-radius:4px;padding:1px 2px;cursor:pointer;color:var(--th-textm);line-height:0}
.dfo-locsel:hover{background:var(--th-hover);border-color:var(--th-border)}
.dfo-locglyph{display:inline-flex}
.dfo-loccaret{font-size:8px;line-height:1;color:var(--th-textm)}
.dfo-loccol,.dfo-loccell{width:40px;text-align:center;padding-left:2px;padding-right:2px}
#dfoLocMenu{position:fixed;z-index:12000;display:none;background:var(--th-bg);border:1px solid var(--th-border);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:4px;min-width:158px}
#dfoLocMenu.open{display:block}
.dfo-locitem{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;text-align:left;padding:6px 8px;border-radius:6px;cursor:pointer;font:inherit;font-size:12px;color:var(--th-text)}
.dfo-locitem:hover{background:var(--th-hover)}
.dfo-locitem .dfo-locic{display:inline-flex}
/* v04: no vertical divider around the tick-box and location columns */
.dgm thead th:first-child, .dgm thead th.dfo-loccol { border-right:none; }

/* DEV013 - the planning controls stay put while the grid scrolls.
   The unit selector, date navigation, status chips and hourly scale were
   scrolling out of view with the grid, so a user deep in a month lost the
   controls needed to change unit or filter. Colour comes from theme tokens
   only, per PG-MGL-001. */
.plan-stick{position:sticky;top:0;z-index:8;background:var(--th-bg);padding:6px 0 2px 0}
/* The sticky toolbar sticks to the top of its scrolling ancestor, which sits
   above the tab row, so a few pixels of agenda were showing through the gap
   between the tab row and the toolbar. This strip paints that gap in the same
   theme colour rather than guessing an offset that would differ per theme. */
.plan-stick::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px;background:var(--th-bg);pointer-events:none}
.plan-wrap .card-title{position:sticky;top:0;z-index:5;background:var(--th-card)}

/* v04 record interaction: hover card + current-tab record window */
#dfoHoverCard{position:fixed;z-index:13000;display:none;max-width:280px;background:var(--th-bg);border:1px solid var(--th-border);border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.18);padding:8px 10px;font-size:12px;color:var(--th-text);pointer-events:none}
#dfoHoverCard.open{display:block}
#dfoHoverCard .hc-title{font-weight:700;color:var(--th-accent);margin-bottom:4px}
#dfoHoverCard .hc-row{display:flex;justify-content:space-between;gap:14px;padding:1px 0}
#dfoHoverCard .hc-row span{color:var(--th-textm)}
#dfoRecWin{position:fixed;z-index:600;display:none;inset:60px 12px 12px 232px;background:var(--th-bg);border:1px solid var(--th-border);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.22);flex-direction:column;overflow:hidden}
#dfoRecWin.open{display:flex}
#dfoRecWin .rw-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--th-border)}
#dfoRecWin .rw-title{font-weight:700;color:var(--th-accent)}
#dfoRecWin .rw-body{padding:14px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;align-content:start}
#dfoRecWin .rw-kv{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--th-borders);padding:4px 0}
#dfoRecWin .rw-kv span{color:var(--th-textm)}

/* v04 page title: match .dgm-viewtitle h1 (h2 was inheriting the browser default -> wrong colour/size + extra top gap) */
.dgm-viewtitle h2{margin:0;font-size:16px;font-weight:600;color:var(--cl-navy);}
/* v04 list tables: size columns to content, never overlap the corner sort triangle, scroll horizontally if wider than the screen */
.dgm-table-wrap{overflow-x:auto;}
.dgm-table-wrap table.dgm{table-layout:auto;width:auto;min-width:100%;}
.dgm-table-wrap table.dgm thead th{white-space:nowrap;}
/* current-tab record window body: plain block so cloned record forms lay out correctly */
#dfoRecWin .rw-body{display:block;}
#dfoRecWin .rw-body .rw-kvgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;}
#dfoRecWin .rw-body .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0;}

/* mouseover box — match v04 .hover-preview (picture 4) */
#dfoHoverCard{position:fixed;z-index:13000;min-width:220px;max-width:300px;background:var(--th-bg);border:1px solid var(--th-borders);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:10px 12px;font-size:12px;color:var(--th-text);pointer-events:none;display:none;}
#dfoHoverCard.open{display:block;}
#dfoHoverCard .hp-type{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--th-textm);margin-bottom:2px;}
#dfoHoverCard .hp-title{font-weight:700;color:var(--cl-navy);margin-bottom:4px;}
#dfoHoverCard .hp-row{display:flex;justify-content:space-between;gap:12px;padding:1px 0;}
#dfoHoverCard .hp-row .k{color:var(--th-text2);}

/* dashboard icon active state (picture 2) + greyed record-view switchers on the Apps-level dashboard */
.pmm-header .swbtn[data-view="dashboard"].on{background:var(--cl-navy);border-color:var(--cl-navy);color:var(--pal-white);}
.pmm-header .swbtn.dfo-dim{opacity:.35;pointer-events:none;}

/* row location = read-only symbol (filter lives in the header only) */
.dfo-locsymbol{display:inline-flex;align-items:center;justify-content:center;color:var(--th-textm);}
/* view-switcher active state = solid navy (picture 2), for dashboard AND list */
.pmm-header .swbtn.on{background:var(--cl-navy);border-color:var(--cl-navy);color:var(--pal-white);}

/* close X sits on the right of any modal/overlay title row (GUI general rule) */
.modal-head .pmm-hbtn{margin-left:auto;}
.dfo-idlink{color:var(--th-accent);font-weight:600;cursor:pointer;}
.dfo-idlink:hover{text-decoration:underline;}
.dfo-locsymbol{display:inline-block;vertical-align:middle;}

/* kanban mode */
.dfo-kb{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding:4px 2px;}
.dfo-kbcol{min-width:212px;max-width:250px;background:var(--th-block);border:1px solid var(--th-border);border-radius:10px;padding:8px;flex:0 0 auto;}
.dfo-kbcol .kb-head{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--th-text2);margin:2px 4px 8px;}
.kb-n{color:var(--th-textm);font-weight:600;}
.dfo-kbcard{background:var(--th-card);border:1px solid var(--th-borders);border-radius:8px;padding:8px 10px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.dfo-kbcard:hover{border-color:var(--th-accent);}
.kbc-id{font-weight:700;color:var(--cl-navy);font-size:12px;margin-bottom:4px;}
.kbc-kv{display:flex;justify-content:space-between;gap:10px;font-size:11px;}
.kbc-kv span{color:var(--th-text2);} .kbc-kv b{font-weight:500;text-align:right;}
/* calendar mode */
.dfo-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-h{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--th-textm);text-align:center;padding:2px;}
.cal-d{min-height:74px;background:var(--th-card);border:1px solid var(--th-border);border-radius:8px;padding:4px;}
.cal-off{background:transparent;border-color:transparent;}
.cal-today{border-color:var(--th-accent);box-shadow:inset 0 0 0 1px var(--th-accent);}
.cal-n{font-size:10px;color:var(--th-textm);font-weight:600;}
.cal-chip{display:block;font-size:10px;font-weight:600;color:var(--pal-white);background:var(--cl-blue);border-radius:5px;padding:1px 5px;margin-top:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-chip:hover{background:var(--cl-navy);}
.cal-uns{margin-top:10px;font-size:11px;color:var(--th-text2);}
.cal-uns .dfo-idlink{margin-right:10px;}

/* selected-row highlight (tick box) */
table.dgm tbody tr.dfo-selrow td{background:var(--th-hover);}

.cal-period{font-size:13px;font-weight:700;color:var(--cl-navy);margin:2px 0 8px;}

.kbc-id{position:relative}.kb-prio{float:right;font-size:9px;font-weight:700;padding:1px 7px;border-radius:8px;color:var(--pal-white);margin-left:6px;letter-spacing:.3px}.kb-prio.high{background:var(--cl-red)}.kb-prio.medium{background:var(--cl-amber)}.kb-prio.low{background:var(--th-textm)}
.dfo-welcome{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:6000;background:var(--cl-navy);color:var(--pal-white);padding:10px 14px 10px 12px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.28);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;animation:dfoWelIn .35s ease}.dfo-welcome.out{opacity:0;transform:translateX(-50%) translateY(-8px);transition:all .4s ease}.dfo-welcome .pmm-hbtn{color:var(--pal-white);margin-left:4px}@keyframes dfoWelIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.flt-stsel{font-size:11px;padding:1px 4px;border:1px solid var(--th-borders);border-radius:5px;background:var(--th-bg)}.flt-stsel-set{border-color:var(--cl-blue)}.flt-stmenu{position:fixed;z-index:6000;background:var(--th-bg);border:1px solid var(--th-border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:170px;overflow:hidden}.flt-stmenu-h{font-size:10px;font-weight:700;color:var(--th-text2);padding:6px 10px;border-bottom:1px solid var(--th-borders);text-transform:uppercase;letter-spacing:.4px}.flt-stmenu-i{padding:7px 10px;font-size:12px;cursor:pointer}.flt-stmenu-i:hover{background:var(--th-bg2)}
.dfo-kpi-gear{margin-left:auto;position:relative}
.dfo-kpi-badge{position:absolute;top:-4px;right:-4px;background:var(--cl-navy);color:var(--pal-white);font-size:9px;border-radius:8px;padding:0 4px;line-height:14px}
.dfo-kpi-pop{position:fixed;z-index:14000;display:none;min-width:224px;background:var(--th-bg);border:1px solid var(--th-border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px}
.dfo-kpi-pop.open{display:block}
.dfo-kpi-pop .kpi-pop-h{font-size:11px;font-weight:600;color:var(--th-textm);padding:4px 6px}
.dfo-kpi-pop .kpi-pop-row{display:flex;align-items:center;gap:8px;padding:4px 6px;font-size:13px;cursor:pointer;border-radius:4px}
.dfo-kpi-pop .kpi-pop-row:hover{background:var(--th-hover)}
.dfo-kpi-pop .kpi-pop-row.dis{opacity:.5;cursor:default}
.dfo-kpi-pop .kpi-pop-f{border-top:1px solid var(--th-border);margin-top:4px;padding-top:4px;text-align:right}
.dfo-kpi-strip{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px 0}
.dfo-kpi-tile{min-width:118px;background:var(--th-bg2);border:1px solid var(--th-border);border-radius:8px;padding:8px 12px}
.dfo-kpi-tile .kpi-t-label{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--th-textm);font-weight:600}
.dfo-kpi-tile .kpi-t-val{font-size:20px;font-weight:700;color:var(--cl-navy)}
.dfo-kpi-tile .kpi-t-sub{font-size:10px;color:var(--th-textm)}

.dfo-kpi-pop .kpi-drag{cursor:grab;color:var(--th-textm);font-size:12px;margin-right:2px;user-select:none}
.dfo-kpi-pop .kpi-pop-row.sel{background:var(--th-bg2)}
.dfo-kpi-pop .kpi-pop-row.sel:active{cursor:grabbing}
.dfo-kpi-pop .kpi-pop-sub{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--th-textm);font-weight:600;padding:6px 6px 2px}
.dfo-kpi-pop .kpi-pop-empty{font-size:12px;color:var(--th-textm);padding:4px 6px}
th.dfo-coldrag{cursor:grab}
th.dfo-coldrag.dragging{opacity:.45}
th.dfo-coldrag.dragover{box-shadow:inset 2px 0 0 0 var(--cl-navy)}

.kbc-stbtn{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;line-height:1}
.kbc-stbtn:hover{filter:brightness(0.96)}

.dfo-kpi-erp{background:var(--pal-red-07) !important;border:1px solid var(--cl-red,var(--pal-red-58)) !important}
.dfo-kpi-erp .v{color:var(--cl-red,var(--pal-red-58)) !important}
.dfo-kpi-erp .l{color:var(--pal-red-59) !important;font-weight:700}
.dfo-erp-flag{display:inline-block;background:var(--cl-red,var(--pal-red-58));color:var(--pal-white);font-size:9px;font-weight:700;border-radius:6px;padding:1px 5px;margin-left:6px;vertical-align:middle;letter-spacing:.3px}
tr.dfo-erp-row td{background:var(--pal-red-02)}
.dgm tbody tr.dfo-erp-row td,table.dgm tr.dfo-erp-row td,tr.dfo-erp-row td{background:var(--pal-red-02) !important}

.dfo-dutyrow.dfo-erp-frame{outline:2px solid var(--cl-red,var(--pal-red-58));outline-offset:-2px;border-radius:6px;background:var(--pal-red-02)}
.dfo-dutyrow.dfo-erp-frame .who{font-weight:600}

.dfo-kbcol.dfo-kbcol-erp{border:2px solid var(--cl-red,var(--pal-red-58));border-radius:8px;background:var(--pal-red-02)}
.dfo-kbcol.dfo-kbcol-erp .kb-head{background:var(--cl-red,var(--pal-red-58));color:var(--pal-white);border-radius:6px 6px 0 0;padding:4px 8px}
.dfo-kbcard.dfo-erp-card{border:1px solid var(--cl-red,var(--pal-red-58)) !important;box-shadow:0 0 0 1px var(--cl-red,var(--pal-red-58)) inset}
.dfo-ev.dfo-erp-ev,.cal-chip.dfo-erp-ev{background:var(--cl-red,var(--pal-red-58)) !important;color:var(--pal-white) !important;border-color:var(--cl-red,var(--pal-red-58)) !important}
.dfo-idlink.dfo-erp-ev{background:var(--cl-red,var(--pal-red-58)) !important;color:var(--pal-white) !important;padding:1px 6px;border-radius:4px}


/* the app is a full-viewport shell: no document-level scrolling, ever */
html,body{overflow:hidden!important;height:100%;scrollbar-width:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(120,130,140,.45);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:rgba(120,130,140,.7);}
*{scrollbar-width:thin;}
.dfo-fwrap .dfo-ffsel{width:100%;font:inherit;font-size:10px;padding:1px 3px;border:1px solid var(--th-inputB);border-radius:4px;background:var(--th-input);color:var(--th-text);}
/* thin scrollbars stay visible on content panes (header strips have no scroll context) */
#view-RecPage .dfo-kv b[contenteditable="true"],#grecmodal .dfo-kv b[contenteditable="true"]{font-weight:400;display:inline-block;min-width:220px;}
.pmm-hbtn.icon-on{color:var(--th-accent)!important;}
.scrim .modal.full{width:96vw!important;max-width:none!important;height:92vh!important;max-height:none!important;display:flex;flex-direction:column;}
.scrim .modal.full .modal-body{flex:1;overflow:auto;max-height:none!important;}
.nr-rte{min-height:120px;height:auto;max-height:none;overflow:visible;padding:8px 10px;border:1px solid var(--th-border);border-top:0;border-radius:0 0 8px 8px;}
.nr-rte:empty:before{content:attr(data-ph);color:var(--th-text2);}
b.nr-edit{display:inline-block;min-width:200px;font-weight:400;border:1px solid var(--th-border);border-radius:6px;padding:3px 8px;background:var(--th-bg);}
b.nr-edit:empty:before{content:attr(data-ph);color:var(--th-text2);}
#grecmodal .modal-body:not(.win-edit-on) .dfo-kv input,#grecmodal .modal-body:not(.win-edit-on) .dfo-kv select,#grecmodal .modal-body:not(.win-edit-on) .dfo-kv textarea{pointer-events:none;background:transparent;border-color:transparent;-webkit-appearance:none;appearance:none;}
#grecmodal .modal-body b.win-editing{border:1px solid var(--th-border);border-radius:6px;padding:2px 6px;background:var(--th-bg);}
.win-linkedit{display:none;}
#dv-calendar .dfo-calctl,#dv-resources .dfo-calctl{padding-left:12px;padding-right:12px;}
/* CCR: every chip block starts and ends with a vertical grey line */
.dfo-chipgrp{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.dfo-chipgrp::before,.dfo-chipgrp::after{content:"";width:1px;align-self:stretch;min-height:18px;background:var(--th-border);}
/* chip block label first letter aligned with the first chip's left edge (bar 1px + gap 6px) */
.dfo-set:has(> .dfo-chipgrp) > .l{padding-left:7px;}
/* consecutive chip blocks share a single vertical line */
.dfo-set:has(> .dfo-chipgrp) + .dfo-set:has(> .dfo-chipgrp) .dfo-chipgrp::before{display:none;}
.dfo-chipgrp + .dfo-chipgrp::before{display:none;}
/* shift+click must not select chip text */
.chip{user-select:none;-webkit-user-select:none;-ms-user-select:none;}
/* calctl: align set labels on one line (lower the scale block to the Date block) */
#dv-calendar .dfo-calctl,#dv-resources .dfo-calctl{align-items:flex-end;}
#dv-calendar .dfo-calctl input[type=range],#dv-resources .dfo-calctl input[type=range]{height:26px;margin:0;}
/* grey section cards + inter-section spacing inside all superimposed windows */
.scrim .modal{background:var(--th-bg2);color:var(--th-text);}
.scrim .modal .card{background:var(--th-bg);border:1px solid var(--th-border);margin-bottom:10px;}
.scrim .modal .card:last-child{margin-bottom:0;}
#grecmodal .modal-body{padding:14px 16px;}
#grecmodal .rp-g2{margin-top:0;}
.dfo-tabs{display:flex;gap:2px;border-bottom:1px solid var(--th-border);margin:10px 0 0;padding:0 2px;flex-wrap:wrap;align-items:center;}
.dfo-tab{padding:8px 12px;font-size:12px;font-weight:400;color:var(--th-text2);cursor:pointer;border:0;background:none;border-bottom:2px solid transparent;border-radius:0;white-space:nowrap;top:0;}
.dfo-tab:hover{background:none;color:var(--th-accent);}
.dfo-tab.active{background:none;border-color:transparent;border-bottom:2px solid var(--th-accent);color:var(--th-accent);font-weight:600;position:static;top:0;}
.dfo-tab.right{margin-left:auto;}
.dfo-tab.link{color:var(--th-accent);}
.dfo-rte{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-bottom:0;padding:4px;border:1px solid var(--th-inputB);border-radius:6px 6px 0 0;background:var(--th-bg);}
.dfo-rte .rte-b{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 5px;font-size:12px;border:1px solid transparent;border-radius:4px;background:none;color:var(--th-text);cursor:pointer;}
.dfo-rte .rte-b:hover{background:var(--th-hover);border-color:var(--th-border);}
.dfo-rte .rte-b svg{width:16px;height:16px;display:block;}
.dfo-rte .rte-sel{height:26px;font:inherit;font-size:11px;padding:0 4px;border:1px solid var(--th-inputB);border-radius:4px;background:var(--th-input);color:var(--th-text);max-width:96px;}
.dfo-rte .rte-sep{width:1px;height:18px;background:var(--th-border);margin:0 4px;}
#view-RecPage{overflow:hidden;scrollbar-width:none;}
#view-RecPage::-webkit-scrollbar{width:0!important;height:0!important;}
#view-RecPage .rp{display:flex;flex-direction:column;height:100%;min-height:0;}
#view-RecPage .rp-r1{display:flex;align-items:center;gap:12px;padding:2px 2px 6px;}
#view-RecPage .rp-head-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 0;}
#view-RecPage .rp-r1-mid{flex:0 0 auto;display:flex;justify-content:center;}
#view-RecPage .rp-search{flex:1 1 0;display:flex;justify-content:flex-end;}
#view-RecPage .rp-search .dgm-search{max-width:280px;width:100%;}
#view-RecPage .rp-back{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--th-accent);cursor:pointer;white-space:nowrap;}
#view-RecPage .rp-back:hover{color:var(--th-accent);text-decoration:underline;}
.rp-back:visited,.rp-back:active,.rp-back:focus{color:var(--th-accent);}
#view-RecPage .rp-ico{display:inline-flex;color:var(--th-accent);}
#view-RecPage .rp-title{margin:0;font-size:16px;font-weight:600;color:var(--th-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-RecPage .rp-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
#view-RecPage .rp-vsep{width:1px;height:20px;background:var(--th-border);margin:0 2px;}
.rp-pill{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:5px 12px;border-radius:11px;background:var(--pal-blue-05);color:var(--th-text2);white-space:nowrap;}
.rp-pill.ok{background:var(--pal-green-08);color:var(--pal-green-70);}
.rp-pill.warn{background:var(--pal-amber-11);color:var(--pal-amber-73);}
.rp-pill.info{background:var(--pal-blue-06);color:var(--cl-blue);}
#view-RecPage .rp-tabs{display:flex;gap:2px;border-bottom:1px solid var(--th-border);overflow:visible;flex-wrap:wrap;flex-shrink:0;align-items:center;}
#view-RecPage .rp-tabs .rp-actions{margin:2px 0 4px;}
#view-RecPage .rp-tab{border:0;background:none;font:inherit;font-size:12px;color:var(--th-text2);padding:9px 12px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:0;}
#view-RecPage .rp-tab:hover{color:var(--th-accent);}
#view-RecPage .rp-tab.on{color:var(--th-accent);font-weight:600;border-bottom-color:var(--th-accent);}
#view-RecPage .rp-body{flex:1 1 auto;min-height:0;overflow:auto;padding:16px 2px 8px;}
#view-RecPage .rp-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
#view-RecPage .rp-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;}
#view-RecPage .rp-g2>*{min-width:0;}
#view-RecPage .rp-body>.rp-g3+.rp-g3{margin-top:14px;}
#view-RecPage .rp-g3>*{min-width:0;}
@media(max-width:1180px){#view-RecPage .rp-g3{grid-template-columns:repeat(2,minmax(0,1fr));}}
#view-RecPage .rp-stub{color:var(--th-text2);font-size:12px;padding:6px 0;}
#view-RecPage .dfo-idlink{color:var(--th-accent);cursor:pointer;border-bottom:1px dotted var(--th-accent);}
#view-RecPage .dfo-idlink:hover{opacity:.8;}
#view-RecPage .dfo-kv{gap:14px;align-items:center;}
#grecmodal .dfo-kv,#view-RecPage .dfo-kv{align-items:center;}
#view-RecPage .dfo-kv>span{flex:0 0 auto;white-space:nowrap;}
#view-RecPage .dfo-kv>b{min-width:0;overflow-wrap:anywhere;word-break:break-word;text-align:right;}
#view-RecPage .dfo-kv b.rp-edit{cursor:text;border-radius:3px;}
#view-RecPage .dfo-kv b.rp-edit:hover{box-shadow:inset 0 -1px 0 var(--th-borders);}
#view-RecPage .dfo-kv b.rp-edit:focus{outline:1px solid var(--th-accent);background:rgba(30,90,140,.06);padding:0 3px;}
#view-RecPage .rp-ctl{font:inherit;font-size:12px;font-weight:400;padding:2px 6px;border:1px solid var(--th-inputB);border-radius:5px;background:var(--th-input);color:var(--th-text);max-width:210px;}
#view-RecPage .dfo-kv b:has(select),#view-RecPage .dfo-kv b:has(.rp-multi),#view-RecPage .dfo-kv b:has(.rp-loc),#view-RecPage .dfo-kv b:has(.rp-dttz){font-weight:400;}
#view-RecPage .rp-multi{position:relative;display:inline-block;}
#view-RecPage .rp-multibtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:400;}
#view-RecPage .rp-mmenu{position:absolute;right:0;top:28px;min-width:250px;max-height:220px;overflow:auto;z-index:60;display:none;}
#view-RecPage .rp-mmenu.open{display:block;}
#view-RecPage .dfo-mi{display:flex;align-items:center;gap:8px;padding:4px 8px;font-size:12px;white-space:nowrap;cursor:pointer;font-weight:400;}
#view-RecPage .dfo-mi:hover{background:var(--th-hover);}
#view-RecPage .rp-rte{border:1px solid var(--th-inputB);border-top:0;border-radius:0 0 6px 6px;padding:8px 10px;font-size:12px;min-height:52px;background:var(--th-input);color:var(--th-text);overflow-wrap:anywhere;word-break:break-word;}
#view-RecPage .rp-rte:focus{outline:none;box-shadow:inset 0 0 0 1px var(--th-accent);}
#view-RecPage .rp-photo{width:118px;height:92px;border:1px dashed var(--th-borders);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--th-textm);overflow:hidden;flex-shrink:0;background:var(--th-bg);}
#view-RecPage .rp-photo:hover{border-color:var(--th-accent);color:var(--th-accent);}
#view-RecPage .rp-photo-ph{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;}
/* location selector (existing OS/AOO + pick on map) */
.rp-loc{display:inline-flex;align-items:center;gap:6px;}
.rp-mapbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;border:1px solid var(--th-inputB);border-radius:5px;background:var(--th-input);color:var(--th-accent);cursor:pointer;flex-shrink:0;}
.rp-mapbtn:hover{background:var(--th-hover);}
.rp-dttz{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
/* synthetic map */
.rp-map{position:relative;height:280px;border:1px solid var(--th-border);border-radius:8px;overflow:hidden;background:var(--pal-green-07);cursor:crosshair;}
.rp-map.card{height:220px;cursor:default;}
.rp-map svg{position:absolute;inset:0;width:100%;height:100%;}
.rp-mapcoord{font-size:11px;color:var(--th-text2);margin-top:6px;}
.dfo-checklist{max-height:150px;overflow:auto;border:1px solid var(--th-inputB);border-radius:6px;padding:4px 6px;background:var(--th-input);}
.dfo-checklist label{display:flex;align-items:center;gap:8px;padding:3px 2px;font-size:12px;color:var(--th-text);cursor:pointer;}
.dfo-checklist label:hover{color:var(--th-accent);}
.dfo-checklist input{margin:0;flex-shrink:0;}
.scrim.open{place-items:center;}
.scrim .modal-head{cursor:grab;user-select:none;}
#grecmodal .modal{width:640px;}
#grecmodal .rp-g3,#grecmodal .rp-g2{grid-template-columns:1fr;margin-top:0;gap:10px;}