:root {
      --g0:#ffffff; --g1:#f6f6f6; --g2:#ececec; --g3:#dcdcdc;
      --g4:#bfbfbf; --g5:#8a8a8a; --g6:#555555; --g7:#2a2a2a; --g8:#000000;
      --line:1px solid var(--g3); --line-strong:1px solid var(--g4);
    }
    * { box-sizing:border-box; margin:0; padding:0; }
    html,body { height:100%; }
    body {
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      background:var(--g1); color:var(--g7); font-size:13px; line-height:1.45;
    }
    a { color:inherit; text-decoration:none; }
    button, input, textarea { font-family:inherit; }
    button { cursor:pointer; }

    /* ============ SHELL ============ */
    .app { display:grid; grid-template-rows:48px 1fr; height:100vh; }
    .topbar {
      display:grid; grid-template-columns:220px 1fr auto auto; align-items:center; gap:14px;
      padding:0 18px; background:var(--g0); border-bottom:var(--line-strong);
    }
    .brand {
      display:flex; align-items:center; gap:6px;
      font-weight:600; letter-spacing:0.20em; font-size:12px; white-space:nowrap;
    }
    .brand-logo { font-size:18px !important; color:var(--g7); }
    .search {
      display:flex; align-items:center; gap:8px; width:100%;
      border:var(--line); background:var(--g1); padding:6px 10px;
    }
    .search input { flex:1; border:none; outline:none; background:transparent; font-size:12.5px; color:var(--g7); }
    /* The topbar search box is a trigger for the ⌘K command palette, not a live
       filter itself (its input is read-only) — the whole box acts like a button. */
    #topSearchBox { cursor:pointer; }
    #topSearchBox input { cursor:pointer; }
    .search .kbd {
      font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
      font-size:10px; color:var(--g5); border:var(--line); padding:1px 5px; background:var(--g0);
    }

    /* Operational/Business toggle (only shown on Home) */
    .view-toggle { display:none; gap:0; border:var(--line); background:var(--g1); }
    .view-toggle.on { display:inline-flex; }
    .view-toggle button {
      background:transparent; border:none; padding:5px 12px; font-size:11.5px; color:var(--g6);
    }
    .view-toggle button.active { background:var(--g7); color:var(--g0); }

    .top-actions { display:flex; gap:10px; align-items:center; }
    .icon-btn {
      width:30px; height:30px; display:grid; place-items:center;
      border:var(--line); background:var(--g0); color:var(--g6);
      font-size:13px; position:relative;
    }
    .icon-btn .dot {
      position:absolute; top:3px; right:3px;
      width:7px; height:7px; border-radius:50%; background:#c0392b;
      border:1.5px solid var(--g0);
    }
    .avatar {
      width:30px; height:30px; border-radius:50%; background:var(--g2); border:var(--line);
      display:grid; place-items:center; font-size:11px; color:var(--g6); font-weight:600;
    }
    .avatar-photo { object-fit:cover; }

    /* ---- NOTIFICATIONS (bell in the topbar) ---- */
    .notif { position:relative; }
    .notif-panel {
      display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:60;
      width:360px; background:var(--g0); border:var(--line-strong);
      box-shadow:0 10px 30px rgba(0,0,0,0.15);
    }
    .notif.open .notif-panel { display:block; }
    .notif-head {
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 14px; border-bottom:var(--line); font-size:12.5px; color:var(--g8);
    }
    .notif-mark-all { font-size:11px; color:var(--g6); cursor:pointer; }
    .notif-mark-all:hover { color:var(--g8); }
    .notif-panel .feed { max-height:400px; }
    .notif-panel .feed-item { cursor:default; }
    .notif-panel .feed-item.has-target { cursor:pointer; }
    .notif-panel .feed-item.has-target:hover { background:var(--g1); }
    .notif-panel .feed-item.unread .msg::before {
      content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
      background:var(--accent, #4a7dc9); margin-right:6px; vertical-align:middle;
    }
    .notif-foot { padding:8px 14px; border-top:var(--line); text-align:center; }
    .notif-foot a { font-size:11.5px; color:var(--g6); }
    .notif-foot a:hover { color:var(--g8); }

    /* ---- ACCOUNT MENU (avatar in the topbar) ---- */
    .user-menu { position:relative; }
    .user-menu-btn { background:none; border:none; padding:0; display:block; line-height:0; }
    .user-menu-panel {
      display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:60;
      min-width:260px; background:var(--g0); border:var(--line-strong);
      box-shadow:0 10px 30px rgba(0,0,0,0.15);
    }
    .user-menu.open .user-menu-panel { display:block; }
    .um-head { display:flex; gap:10px; align-items:center; padding:14px; }
    .um-info { min-width:0; }
    .um-name { font-size:13px; font-weight:600; color:var(--g8); }
    .um-email { font-size:11px; color:var(--g6); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .um-role-pill { margin-top:6px; }
    .um-divider { height:1px; background:var(--g2); }
    .um-item {
      display:flex; align-items:center; gap:10px; padding:10px 14px;
      font-size:12.5px; color:var(--g7);
    }
    .um-item .material-icons { font-size:16px; color:var(--g5); }
    .um-item:hover { background:var(--g1); }
    .um-item-danger { color:#a11e22; }
    .um-item-danger .material-icons { color:#a11e22; }

    /* ---- MULTITENANT SWITCHER ---- */
    .tenant { position:relative; }
    .tenant-btn {
      display:flex; align-items:center; gap:8px;
      border:var(--line); background:var(--g0); padding:3px 8px 3px 4px;
      font-size:12px; color:var(--g7); min-width:0;
    }
    .tenant-btn:hover { background:var(--g1); }
    .tenant-btn .mark {
      width:22px; height:22px; background:var(--g7); color:var(--g0);
      display:grid; place-items:center; font-size:9.5px; font-weight:700;
      letter-spacing:0.02em;
    }
    .tenant-btn .info { display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
    .tenant-btn .info .nm { font-size:12px; font-weight:600; color:var(--g8); }
    .tenant-btn .info .sub { font-size:9.5px; color:var(--g5); text-transform:uppercase; letter-spacing:0.06em; }
    .tenant-btn .cr { font-size:11px; color:var(--g5); margin-left:2px; }
    .tenant-menu {
      display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:60;
      min-width:300px; background:var(--g0); border:var(--line-strong);
      box-shadow:0 10px 30px rgba(0,0,0,0.15);
    }
    .tenant.open .tenant-menu { display:block; }
    .tenant-menu .th {
      padding:8px 12px; background:var(--g1); border-bottom:var(--line);
      font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--g5);
      display:flex; justify-content:space-between; align-items:center;
    }
    .tenant-menu .th input {
      border:var(--line); background:var(--g0); padding:3px 6px; font-size:11px; color:var(--g7); outline:none;
    }
    .tenant-opt {
      display:grid; grid-template-columns:26px 1fr 16px; gap:10px; align-items:center;
      padding:8px 12px; background:var(--g0); border:none; border-bottom:var(--line);
      width:100%; text-align:left; cursor:pointer;
    }
    .tenant-opt:hover { background:var(--g1); }
    .tenant-opt .mark { width:26px; height:26px; background:var(--g2); color:var(--g7); display:grid; place-items:center; font-size:10px; font-weight:700; border:var(--line); }
    .tenant-opt.active .mark { background:var(--g7); color:var(--g0); border-color:var(--g8); }
    .tenant-opt .nm { font-size:12.5px; color:var(--g7); font-weight:500; }
    .tenant-opt .sub { font-size:10.5px; color:var(--g5); margin-top:1px; }
    .tenant-opt .ck { color:var(--g5); font-size:12px; }
    .tenant-opt.active .ck { color:var(--g8); }
    .tenant-menu .foot { padding:8px 12px; display:flex; gap:8px; }
    .tenant-menu .foot .btn { flex:1; text-align:center; }

    .body { display:grid; grid-template-columns:220px 1fr 340px; min-height:0; }
    .body.alfred-collapsed { grid-template-columns:220px 1fr 44px; }
    .body.sidebar-collapsed { grid-template-columns:56px 1fr 340px; }
    .body.sidebar-collapsed.alfred-collapsed { grid-template-columns:56px 1fr 44px; }

    /* ============ SIDEBAR ============ */
    .sidebar { background:var(--g0); border-right:var(--line-strong); overflow-y:auto; padding:8px 0 40px; display:flex; flex-direction:column; }
    .side-group { padding:10px 12px 2px; }
    .side-divider { height:1px; background:var(--g2); margin:6px 12px; }
    .side-group-head { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; padding:2px; margin:0 -2px; }
    .side-group-head:hover .side-label { color:var(--g7); }
    .side-group-icon { width:14px; height:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--g5); }
    .side-group-icon svg { width:14px; height:14px; display:block; }
    .side-group-head:hover .side-group-icon { color:var(--g7); }
    .side-label { flex:1; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--g5); margin:0 4px 4px 0; }
    .side-group-head .chev { font-size:8px; color:var(--g4); transition:transform 0.15s; margin-right:4px; }
    .side-group.collapsed .chev { transform:rotate(-90deg); }
    .side-group.collapsed .side-group-items { display:none; }
    .side-item {
      display:flex; justify-content:space-between; align-items:center;
      padding:7px 12px; font-size:10px; color:var(--g7);
      border-left:3px solid transparent; cursor:pointer; user-select:none;
    }
    .side-item:hover { background:var(--g1); }
    .side-item.active { background:var(--g1); border-left-color:var(--g7); font-weight:500; }
    .side-item .count { font-size:10.5px; color:var(--g5); border:var(--line); padding:0 5px; background:var(--g0); font-variant-numeric:tabular-nums; }
    /* A plain line, not a repeated icon — the group header above already carries the
       real icon for this whole section, so a per-item glyph (e.g. the same $ three
       times under Business Ops) just repeats it. */
    .side-item .icon { width:10px; height:1px; background:var(--g4); border-radius:0; margin-right:8px; flex-shrink:0; }
    .side-item:hover .icon, .side-item.active .icon { background:var(--g7); }
    .side-item .lbl { flex:1; display:flex; align-items:center; }
    /* Nested sub-item (e.g., Manifests / Add-ons under Trips) */
    .side-item.sub { padding-left:34px; position:relative; }
    .side-item.sub .icon { width:10px; height:1px; background:var(--g4); border-radius:0; margin-right:8px; }
    .side-item.sub .lbl { color:var(--g6); font-size:10px; }
    .side-item.sub::before {
      content:""; position:absolute; left:22px; top:0; bottom:0; width:1px; background:var(--g3);
    }

    /* Whole-sidebar collapse — an icon-only rail, same idea as .alfred-collapsed.
       Sits above the nav groups, not the footer, so it's the first thing there. */
    .sidebar-toggle {
      width:100%; padding:10px 0; border:none; border-bottom:var(--line); margin-bottom:4px;
      background:transparent; color:var(--g5); font-size:11.5px; cursor:pointer;
    }
    .sidebar-toggle:hover { background:var(--g1); color:var(--g8); }
    /* Mini mode shows one real icon per GROUP only (not every item flattened) — click
       one to expand the sidebar back out and jump straight into that section, see
       shared.js's toggleSideGroup. Keeps the collapsed rail to ~10 recognizable
       icons instead of a wall of identical boxes. */
    .sidebar.mini .side-group-head { justify-content:center; }
    .sidebar.mini .side-label, .sidebar.mini .chev { display:none; }
    .sidebar.mini .side-group-icon { width:18px; height:18px; }
    .sidebar.mini .side-group-icon svg { width:18px; height:18px; }
    .sidebar.mini .side-group { padding:4px 12px; }
    .sidebar.mini .side-group-items { display:none; }
    .sidebar.mini .sidebar-toggle { font-size:14px; }
    .sidebar.mini .sidebar-toggle .txt { display:none; }

    /* ============ CONTENT ============ */
    .content { overflow-y:auto; background:var(--g1); position:relative; }
    .screen { display:none; }
    .screen.active { display:block; }

    .page-head { background:var(--g0); border-bottom:var(--line-strong); padding:16px 24px; }
    .breadcrumb { font-size:11px; color:var(--g5); margin-bottom:4px; }
    .page-title { display:flex; justify-content:space-between; align-items:center; gap:16px; }
    .page-title h1 { font-size:18px; font-weight:600; color:var(--g8); }
    .page-title .subtitle { color:var(--g6); font-size:12.5px; margin-top:2px; }
    .page-actions { display:flex; gap:8px; }

    .btn { border:var(--line); background:var(--g0); color:var(--g7); padding:6px 12px; font-size:12px; }
    .btn:hover { background:var(--g1); }
    .btn.primary { background:var(--g7); color:var(--g0); border-color:var(--g7); }
    .btn.primary:hover { background:var(--g8); }

    /* Tabs (functional) */
    .tabs { display:flex; gap:20px; margin-top:12px; }
    .tab { font-size:12.5px; color:var(--g5); padding:0 0 8px; border-bottom:2px solid transparent; cursor:pointer; }
    .tab.active { color:var(--g8); border-bottom-color:var(--g7); font-weight:500; }
    .tab-panel { display:none; }
    .tab-panel.active { display:block; }

    .page-body { padding:20px 24px; }

    /* KPI cards */
    .kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
    .kpi { background:var(--g0); border:var(--line); padding:14px 16px; }
    .kpi .label { font-size:10.5px; color:var(--g5); text-transform:uppercase; letter-spacing:0.1em; }
    .kpi .value { font-size:24px; font-weight:600; color:var(--g8); margin:4px 0 2px; font-variant-numeric:tabular-nums; }
    .kpi .delta { font-size:11px; color:var(--g6); }
    .kpi .spark { margin-top:8px; height:24px;
      background: linear-gradient(to right, var(--g2) 1px, transparent 1px) 0 0 / 20% 100%, var(--g1);
      position:relative;
    }
    .kpi .spark::after {
      content:""; position:absolute; left:0; right:0; bottom:6px; height:1px; background:var(--g5);
      clip-path: polygon(0 60%, 15% 40%, 30% 50%, 45% 30%, 60% 40%, 75% 20%, 90% 30%, 100% 10%);
    }

    /* Panels */
    .grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
    /* overflow-x:auto — a panel's own scroll container for any table/content wider
       than it (e.g. inside the 640px detail drawer): scrolls in place instead of
       spilling past the panel's edge, which clipped/broke against the browser chrome. */
    .panel { background:var(--g0); border:var(--line); overflow-x:auto; }
    .panel > header {
      padding:12px 16px; border-bottom:var(--line);
      display:flex; justify-content:space-between; align-items:center;
    }
    .panel > header h3 { font-size:13px; font-weight:600; }
    .panel > header .link { font-size:11.5px; color:var(--g6); cursor:pointer; }

    /* Table */
    .table { width:100%; border-collapse:collapse; }
    .table th, .table td { padding:10px 14px; text-align:left; font-size:12px; border-bottom:var(--line); vertical-align:middle; }
    .table th { background:var(--g1); color:var(--g6); font-weight:500; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; }
    .table tbody tr:hover { background:var(--g1); cursor:pointer; }
    .table td.num { font-variant-numeric:tabular-nums; }
    .table .cell-strong { color:var(--g8); font-weight:500; }

    /* Pills */
    .pill { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; padding:2px 7px; border:var(--line); background:var(--g0); color:var(--g6); }
    .pill .pdot { width:6px; height:6px; border-radius:50%; background:var(--g4); }
    .pill.on { color:var(--g8); border-color:var(--g5); }
    .pill.on .pdot { background:var(--g7); }
    .pill.warn { color:var(--g7); background:var(--g2); border-color:var(--g4); }
    .pill.warn .pdot { background:var(--g6); animation:pulse 1.6s infinite; }
    .pill.off { color:var(--g5); }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

    /* Filters */
    .filters { display:flex; gap:8px; padding:10px 14px; background:var(--g0); border:var(--line); border-bottom:none; align-items:center; flex-wrap:wrap; }
    .filters .chip { border:var(--line); background:var(--g1); padding:4px 10px; font-size:11.5px; color:var(--g6); cursor:pointer; user-select:none; }
    .filters .chip.active { background:var(--g7); color:var(--g0); border-color:var(--g7); }
    .filters .sep { flex:1; }
    .filter-count {
      padding:6px 14px; background:var(--g1); border:var(--line); border-top:none; border-bottom:none;
      font-size:11px; color:var(--g6); font-variant-numeric:tabular-nums;
    }

    /* Directory toolbar (search + facets + sort) — used on every list-style screen */
    .dir-toolbar {
      display:flex; gap:8px; align-items:center; flex-wrap:wrap;
      background:var(--g0); border:var(--line); border-bottom:none; padding:10px 14px;
    }
    .dir-search { flex:1; min-width:220px; max-width:none; }
    .dir-facet {
      display:inline-flex; align-items:center; gap:6px;
      background:var(--g0); border:var(--line); font-size:11.5px; color:var(--g7);
      padding:5px 10px;
    }
    .dir-facet .mut { color:var(--g5); }
    .dir-spacer { flex:1; }
    .bulk-bar {
      display:flex; align-items:center; gap:8px; padding:8px 14px;
      background:var(--g7); color:var(--g0); border:1px solid var(--g8); border-bottom:none; font-size:12px;
    }
    .bulk-bar[hidden] { display:none; }
    .bulk-bar .btn { background:var(--g0); color:var(--g7); border-color:var(--g0); font-size:11.5px; padding:4px 8px; }
    .bulk-bar .btn:hover { background:var(--g2); }
    .pager {
      display:flex; align-items:center; gap:10px; padding:8px 14px;
      border-top:var(--line); background:var(--g1); font-size:11.5px; color:var(--g6); flex-wrap:wrap;
    }
    .pager .pg-info { font-variant-numeric:tabular-nums; }
    .pager .pg-sz select { border:var(--line); background:var(--g0); padding:2px 4px; font-size:11.5px; }
    .pager .pg-btns { display:flex; gap:4px; align-items:center; }
    .pager .pg-btns .btn { padding:3px 8px; font-size:12px; min-width:28px; }
    .pager .pg-btns .btn:disabled { opacity:0.35; cursor:not-allowed; }
    .pager .pg-lbl { padding:0 6px; font-variant-numeric:tabular-nums; }
    .tab .tcount {
      display:inline-block; margin-left:6px; padding:0 6px; border:var(--line);
      background:var(--g0); color:var(--g5); font-size:10px;
      font-variant-numeric:tabular-nums; font-weight:400;
    }
    .tab.active .tcount { border-color:var(--g5); color:var(--g7); }
    .team-table tbody tr td .init { width:26px; height:26px; }
    /* Popover for facet / sort dropdowns */
    .dir-pop {
      position:absolute; z-index:800; min-width:180px; max-height:280px; overflow-y:auto;
      background:var(--g0); border:var(--line-strong); box-shadow:0 8px 24px rgba(0,0,0,0.15);
    }
    .dir-pop[hidden] { display:none; }
    .dir-pop-item {
      display:block; width:100%; text-align:left; padding:7px 12px;
      background:transparent; border:none; border-bottom:var(--line);
      font-size:12px; color:var(--g7); cursor:pointer;
    }
    .dir-pop-item:last-child { border-bottom:none; }
    .dir-pop-item:hover { background:var(--g1); color:var(--g8); }
    .dir-pop-item.on { background:var(--g2); color:var(--g8); font-weight:500; }

    /* Activity feed */
    .feed { padding:4px 0; max-height:520px; overflow-y:auto; }
    .feed-item { display:grid; grid-template-columns:32px 1fr auto; gap:10px; padding:10px 16px; border-bottom:var(--line); align-items:flex-start; }
    .feed-item:last-child { border-bottom:none; }
    .feed-item .dot-lg { width:26px; height:26px; border-radius:50%; background:var(--g2); border:var(--line); display:grid; place-items:center; font-size:10px; color:var(--g6); }
    .feed-item .msg { font-size:12.5px; color:var(--g7); }
    .feed-item .msg b { font-weight:600; color:var(--g8); }
    .feed-item .meta { font-size:11px; color:var(--g5); margin-top:2px; }
    .feed-item .time { font-size:11px; color:var(--g5); white-space:nowrap; }

    /* Cards */
    .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
    .card { background:var(--g0); border:var(--line); padding:14px; cursor:pointer; }
    .card:hover { background:var(--g1); }
    .card.add-card { border-style:dashed; border-color:var(--g4); }
    .card.add-card .thumb { color:var(--g5); font-size:26px; font-weight:300; }
    .card.add-card h4 { color:var(--g7); }
    .card .thumb { height:90px; background:var(--g2); border:var(--line); margin-bottom:10px; display:grid; place-items:center; color:var(--g5); font-size:11px; }
    .card h4 { font-size:13px; font-weight:600; margin-bottom:4px; }
    .card .sub { font-size:11.5px; color:var(--g6); margin-bottom:8px; }
    .card .foot { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--g5); }

    /* Dropzone */
    .dropzone { border:1.5px dashed var(--g4); background:var(--g0); padding:40px 20px; text-align:center; color:var(--g5); }
    .dropzone strong { color:var(--g7); font-weight:600; display:block; margin-bottom:4px; }
    .dropzone .cta { color:var(--g8); text-decoration:underline; margin-top:8px; display:inline-block; cursor:pointer; }

    /* Split lists */
    .split { display:grid; grid-template-columns:260px 1fr; gap:16px; }
    .list-panel { background:var(--g0); border:var(--line); }
    .list-row { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:10px 12px; border-bottom:var(--line); align-items:center; cursor:pointer; }
    .list-row:hover, .list-row.active { background:var(--g1); }
    .list-row .name { font-size:12.5px; color:var(--g7); font-weight:500; }
    .list-row .info { font-size:11px; color:var(--g5); }
    .list-row .init { width:28px; height:28px; border-radius:50%; background:var(--g2); border:var(--line); display:grid; place-items:center; font-size:10.5px; color:var(--g6); font-weight:600; }

    /* ============ MAP ============ */
    .live-shell { position:relative; height:calc(100vh - 48px); overflow:hidden; }
    .map {
      position:absolute; inset:0;
      background-image:
        linear-gradient(var(--g2) 1px, transparent 1px),
        linear-gradient(90deg, var(--g2) 1px, transparent 1px);
      background-size:60px 60px;
      background-color:var(--g0);
    }
    /* Fake roads */
    .map .road {
      position:absolute; background:var(--g2);
    }
    .map .road.h1 { top:22%; left:0; right:0; height:12px; }
    .map .road.h2 { top:58%; left:0; right:0; height:16px; }
    .map .road.h3 { top:82%; left:0; right:0; height:10px; }
    .map .road.v1 { top:0; bottom:0; left:18%; width:12px; }
    .map .road.v2 { top:0; bottom:0; left:52%; width:16px; }
    .map .road.v3 { top:0; bottom:0; left:78%; width:10px; }

    /* Marker */
    .marker {
      position:absolute; transform:translate(-50%,-50%);
      cursor:pointer; z-index:2;
    }
    .marker .pin {
      width:26px; height:26px; border-radius:50%;
      background:var(--g0); border:2px solid var(--g6);
      display:grid; place-items:center;
      font-size:10px; color:var(--g7); font-weight:700;
      box-shadow:0 2px 6px rgba(0,0,0,0.18);
    }
    .marker .lbl {
      position:absolute; left:50%; top:32px; transform:translateX(-50%);
      background:var(--g0); border:var(--line); padding:1px 6px;
      font-size:10px; color:var(--g7); white-space:nowrap;
    }
    .marker.veh .pin { background:var(--g6); color:var(--g0); border-color:var(--g8); }
    .marker.veh.urgent .pin { background:var(--g8); animation:pulse 1.4s infinite; }
    .marker.veh.idle .pin { background:var(--g2); color:var(--g6); border-color:var(--g4); }
    .marker.hotel .pin { background:var(--g0); border-color:var(--g5); border-style:dashed; }
    .marker.airport .pin { width:34px; height:34px; background:var(--g7); color:var(--g0); border-color:var(--g8); font-size:11px; }
    .marker.pickup .pin { width:14px; height:14px; background:var(--g4); border-color:var(--g6); }
    .marker.pickup .lbl { top:20px; }

    .fence {
      position:absolute; transform:translate(-50%,-50%);
      border:1.5px dashed var(--g5); border-radius:50%;
      background:rgba(0,0,0,0.02); z-index:1;
    }

    /* Route line */
    .route-svg { position:absolute; inset:0; pointer-events:none; z-index:3; display:none; }
    .route-svg.on { display:block; }
    .route-svg .base { stroke:var(--g5); stroke-width:5; fill:none; opacity:0.25; }
    .route-svg .top {
      stroke:var(--g7); stroke-width:2; stroke-dasharray:6 4; fill:none;
      animation:dash 1.4s linear infinite;
    }
    @keyframes dash { to { stroke-dashoffset:-40; } }

    /* Floating panels */
    .fp {
      position:absolute; background:var(--g0); border:var(--line-strong);
      box-shadow:0 6px 20px rgba(0,0,0,0.10);
      min-width:220px; z-index:10;
    }
    .fp header {
      padding:8px 12px; border-bottom:var(--line);
      display:flex; justify-content:space-between; align-items:center;
      cursor:move; user-select:none;
    }
    .fp header h4 { font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--g6); }
    .fp header .fp-min { background:transparent; border:none; color:var(--g5); font-size:14px; padding:0 4px; }
    .fp .fp-body { padding:12px; }
    .fp.min .fp-body { display:none; }

    /* Hero floating panel */
    .fp-hero { top:76px; left:24px; min-width:280px; }
    .fp-hero .greet { font-size:13px; color:var(--g6); }
    .fp-hero .name { font-size:20px; font-weight:600; color:var(--g8); margin-bottom:2px; }
    .fp-hero .ctx { font-size:11px; color:var(--g5); margin-bottom:12px; }
    .fp-hero .mini {
      display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
      border-top:var(--line); padding-top:10px;
    }
    .fp-hero .mini > div { text-align:center; }
    .fp-hero .mini .n { font-size:16px; font-weight:600; color:var(--g8); font-variant-numeric:tabular-nums; }
    .fp-hero .mini .l { font-size:10px; color:var(--g5); text-transform:uppercase; letter-spacing:0.08em; }

    /* Weather floating panel */
    .fp-weather { top:76px; right:24px; min-width:220px; }
    .fp-weather .now { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
    .fp-weather .temp { font-size:26px; font-weight:600; color:var(--g8); }
    .fp-weather .cond { font-size:12px; color:var(--g6); }
    .fp-weather .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:var(--line); padding-top:8px; font-size:11px; }
    .fp-weather .grid3 div { text-align:center; }
    .fp-weather .grid3 .k { color:var(--g5); font-size:10px; }

    /* Filter chips panel (airport switcher) */
    .fp-airports {
      bottom:24px; left:50%; transform:translateX(-50%);
      display:flex; align-items:center; padding:0; min-width:0;
    }
    .fp-airports .arrow { padding:8px 10px; color:var(--g6); background:transparent; border:none; border-right:var(--line); }
    .fp-airports .arrow:last-child { border-right:none; border-left:var(--line); }
    .fp-airports .aps { display:flex; overflow:hidden; max-width:520px; }
    .fp-airports .ap {
      padding:8px 14px; font-size:12px; color:var(--g6); background:transparent; border:none;
      border-right:var(--line); white-space:nowrap;
    }
    .fp-airports .ap.active { background:var(--g7); color:var(--g0); }
    .fp-airports .ap:last-child { border-right:none; }

    /* ---- MAP TOP BAR: wraps the Widgets menu + Layer/zoom toolbar, centered on top ---- */
    .map-topbar {
      position:absolute; top:20px; left:50%; transform:translateX(-50%);
      display:flex; align-items:center; gap:10px; z-index:12;
    }
    /* ---- MAP WIDGETS TOOLBAR (layers + zoom + fullscreen) ---- */
    .map-toolbar {
      display:flex; align-items:center; padding:4px;
      background:var(--g0); border:var(--line-strong);
      box-shadow:0 6px 20px rgba(0,0,0,0.10);
    }
    .mt-btn {
      position:relative; width:34px; height:34px; background:transparent; border:none;
      color:var(--g6); display:grid; place-items:center; font-size:14px; margin:0 1px;
    }
    .mt-btn:hover { background:var(--g1); color:var(--g8); }
    .mt-btn.active { background:var(--g2); color:var(--g8); }
    .mt-btn.hi { outline:2px solid var(--g7); outline-offset:-2px; }
    .mt-btn .ldot {
      position:absolute; top:5px; right:5px;
      width:6px; height:6px; border-radius:50%; background:var(--g5); opacity:0;
    }
    .mt-btn.active .ldot { opacity:1; }
    .mt-btn.pulse .ldot { animation:pulse 1.6s infinite; }
    .mt-btn svg { width:16px; height:16px; }
    .mt-btn[data-tt]::after {
      content:attr(data-tt); position:absolute; top:calc(100% + 8px); left:50%;
      transform:translateX(-50%);
      background:var(--g8); color:var(--g0); font-size:10.5px; padding:3px 6px;
      white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.15s;
    }
    .mt-btn[data-tt]:hover::after { opacity:1; }
    .mt-sep { width:1px; height:22px; background:var(--g3); margin:0 4px; }
    .mt-fleet-wrap { position:relative; }
    .mt-fleet-btn { display:flex; align-items:center; padding:0 6px; width:auto; gap:2px; }
    .mt-fleet-btn .cr { font-size:9px; color:var(--g5); }
    .mt-menu {
      display:none; position:absolute; top:calc(100% + 8px); left:-8px; z-index:20;
      min-width:280px; background:var(--g0); border:var(--line-strong);
      box-shadow:0 8px 24px rgba(0,0,0,0.15);
    }
    .mt-fleet-wrap.open .mt-menu { display:block; }
    .mt-menu .mt-title {
      padding:10px 14px 8px; font-size:10px; letter-spacing:0.14em;
      text-transform:uppercase; color:var(--g5); border-bottom:var(--line);
    }
    .mt-row {
      display:grid; grid-template-columns:22px 12px 1fr auto; gap:10px; align-items:center;
      padding:10px 14px; border-bottom:var(--line); cursor:pointer;
    }
    .mt-row:last-child { border-bottom:none; }
    .mt-row:hover { background:var(--g1); }
    .mt-row input { margin:0; }
    .mt-row .pdot { width:8px; height:8px; border-radius:50%; background:var(--g5); }
    .mt-row .pdot.warn { background:var(--g6); animation:pulse 1.6s infinite; }
    .mt-row .pdot.idle { background:var(--g3); border:1px solid var(--g4); }
    .mt-row .txt .lbl { font-size:12.5px; color:var(--g8); font-weight:600; }
    .mt-row .txt .ds { font-size:11px; color:var(--g5); }
    .mt-row .ct { font-size:12px; color:var(--g6); font-variant-numeric:tabular-nums; }

    /* ---- WIDGETS QUICK MENU (nested inside .map-toolbar — no own chrome) ---- */
    .fp-widget-menu {
      background:transparent; border:none; box-shadow:none; padding:0;
      display:flex; align-items:center;
    }
    .fp-widget-menu .lbl { font-size:10px; text-transform:uppercase; letter-spacing:0.12em;
      color:var(--g5); padding:0 8px 0 10px; }
    .fp-widget-menu .wg {
      width:34px; height:34px; display:grid; place-items:center; font-size:12px;
      background:transparent; border:none; color:var(--g5); margin:0 1px; position:relative;
    }
    .fp-widget-menu .wg.on { background:var(--g2); color:var(--g8); }
    .fp-widget-menu .wg:hover { background:var(--g1); color:var(--g8); }
    .fp-widget-menu .wg svg { width:16px; height:16px; }
    .fp-widget-menu .wg[data-tt]::after {
      content:attr(data-tt); position:absolute; top:calc(100% + 8px); left:50%;
      transform:translateX(-50%);
      background:var(--g8); color:var(--g0); font-size:10.5px; padding:3px 6px;
      white-space:nowrap; opacity:0; pointer-events:none;
    }
    .fp-widget-menu .wg[data-tt]:hover::after { opacity:1; }

    /* Simple traffic overlay when toggled on */
    .map.traffic-on::before {
      content:""; position:absolute; inset:0;
      background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 8px),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 12px);
      pointer-events:none;
    }

    /* Fullscreen-like map mode: hide floating panels */
    .live-shell.fs .fp:not(.fp-airports),
    .live-shell.fs .fp-widget-menu { display:none; }

    /* ---- TOAST (compact, top-right, single line) ---- */
    .toast-host {
      position:fixed; top:60px; right:20px;
      display:flex; flex-direction:column; gap:6px; z-index:999; pointer-events:none;
    }
    .toast {
      background:var(--g8); color:var(--g0); padding:7px 12px; font-size:11.5px;
      border:1px solid var(--g7); box-shadow:0 4px 14px rgba(0,0,0,0.18);
      display:flex; align-items:center; gap:8px; max-width:340px;
      animation:toast-in 0.16s ease-out;
    }
    .toast .ic { width:14px; height:14px; border-radius:50%; background:var(--g6); color:var(--g0);
      display:grid; place-items:center; font-size:9px; font-weight:700; flex-shrink:0; }
    .toast .ic.ok { background:#2e7d32; }
    .toast .ic.err { background:#c62828; }
    .toast .msg { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .toast .msg b { font-weight:600; }
    .toast .sub { color:var(--g4); margin-left:6px; font-size:10.5px; }
    @keyframes toast-in { from { opacity:0; transform:translateX(6px); } to { opacity:1; transform:none; } }

    /* ---- ACTION PANEL (formerly a centered modal — every create/action form now slides in from the right) ---- */
    .modal-back {
      position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:900;
      opacity:0; pointer-events:none; transition:opacity 220ms;
    }
    .modal-back.on { opacity:1; pointer-events:auto; }
    .modal {
      position:fixed; top:0; right:0; bottom:0; width:480px; max-width:92vw;
      background:var(--g0); border-left:var(--line-strong); box-shadow:-24px 0 60px rgba(0,0,0,0.22);
      z-index:901; display:flex; flex-direction:column;
      transform:translateX(100%); transition:transform 260ms cubic-bezier(.22,1,.36,1);
    }
    .modal-back.on .modal { transform:translateX(0); }
    .modal header {
      padding:16px 20px; border-bottom:var(--line-strong); flex-shrink:0;
      display:flex; justify-content:space-between; align-items:center;
    }
    .modal header h4 { font-size:15px; font-weight:600; color:var(--g8); }
    .modal header .close {
      width:28px; height:28px; display:grid; place-items:center;
      background:transparent; border:var(--line); color:var(--g6); font-size:13px;
    }
    .modal .m-body { padding:20px; font-size:12.5px; color:var(--g7); flex:1; overflow-y:auto; overflow-x:auto; }
    .modal .m-foot { padding:14px 20px; border-top:var(--line); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }
    @media (max-width:640px) { .modal { width:100%; } }

    /* Vehicle info card (opens on marker click) */
    .veh-card {
      position:absolute; background:var(--g0); border:var(--line-strong);
      box-shadow:0 8px 24px rgba(0,0,0,0.16);
      width:290px; z-index:20; display:none;
    }
    .veh-card.on { display:block; }
    .veh-card header { padding:12px 14px; border-bottom:var(--line); display:flex; justify-content:space-between; align-items:center; }
    .veh-card header .who { display:flex; gap:10px; align-items:center; }
    .veh-card header .init { width:34px; height:34px; border-radius:50%; background:var(--g2); border:var(--line); display:grid; place-items:center; font-size:11px; color:var(--g6); font-weight:600; }
    .veh-card header .id { font-size:13px; font-weight:600; }
    .veh-card header .drv { font-size:11px; color:var(--g5); }
    .veh-card header .close { background:transparent; border:none; color:var(--g5); font-size:14px; }
    .veh-card .body-r { padding:10px 14px; }
    .veh-card .row { display:flex; justify-content:space-between; padding:5px 0; font-size:12px; border-bottom:var(--line); }
    .veh-card .row:last-child { border-bottom:none; }
    .veh-card .row .k { color:var(--g5); }
    .veh-card .row .v { color:var(--g7); font-weight:500; }
    .veh-card .acts { padding:10px 14px; border-top:var(--line); display:flex; gap:8px; }
    .veh-card .acts button { flex:1; }

    /* Flights panel */
    .fp-flights { top:260px; right:24px; min-width:280px; }
    .fp-flights .fl { display:grid; grid-template-columns:60px 1fr auto; gap:8px; padding:6px 0; font-size:11.5px; border-bottom:var(--line); }
    .fp-flights .fl:last-child { border-bottom:none; }
    .fp-flights .fl .code { font-weight:600; color:var(--g8); }
    .fp-flights .fl .route { color:var(--g6); }
    .fp-flights .fl .st { color:var(--g5); font-size:10.5px; }

    /* Business widgets grid (view=business) */
    .biz-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; padding:20px 24px; }
    .biz-widget { background:var(--g0); border:var(--line); padding:14px; }
    .biz-widget h4 { font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--g8); }
    .biz-widget .sub { font-size:11px; color:var(--g5); margin-bottom:10px; }
    .biz-widget .big { font-size:26px; font-weight:600; color:var(--g8); font-variant-numeric:tabular-nums; }

    /* Chart mocks */
    .chart { height:180px; background:var(--g0); border:var(--line); position:relative; overflow:hidden; }
    .chart.area::after {
      content:""; position:absolute; inset:20px;
      background:
        linear-gradient(to right, transparent 0, var(--g3) 100%);
      clip-path: polygon(0 70%, 8% 60%, 16% 65%, 24% 45%, 32% 55%, 40% 40%, 48% 50%, 56% 30%, 64% 40%, 72% 25%, 80% 35%, 88% 20%, 96% 30%, 100% 22%, 100% 100%, 0 100%);
    }
    .chart.line::after {
      content:""; position:absolute; inset:20px;
      background:transparent; border-bottom:1px solid var(--g4);
    }
    .chart.bars {
      background-image: linear-gradient(to right, var(--g2) 1px, transparent 1px), linear-gradient(var(--g2) 1px, transparent 1px);
      background-size:60px 40px;
    }
    .chart.bars::after {
      content:""; position:absolute; bottom:0; left:20px; right:20px; height:70%;
      background: repeating-linear-gradient(to right, var(--g6) 0 22px, transparent 22px 44px);
      clip-path: polygon(
        0 60%, 22px 60%, 22px 100%, 44px 100%, 44px 40%, 66px 40%, 66px 100%, 88px 100%, 88px 55%, 110px 55%, 110px 100%,
        132px 100%, 132px 30%, 154px 30%, 154px 100%, 176px 100%, 176px 45%, 198px 45%, 198px 100%, 220px 100%, 220px 20%,
        242px 20%, 242px 100%, 264px 100%, 264px 50%, 286px 50%, 286px 100%, 308px 100%, 308px 35%, 330px 35%, 330px 100%,
        100% 100%, 0 100%
      );
    }

    /* Calendar */
    .calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--g3); border:var(--line); }
    .calendar .day { background:var(--g0); padding:8px; min-height:60px; font-size:11px; color:var(--g6); }
    .calendar .day .num { font-weight:600; color:var(--g7); }
    .calendar .day.filled { background:var(--g1); }
    .calendar .day .bar { height:4px; margin-top:4px; background:var(--g5); }
    .calendar .day .bar.light { background:var(--g4); }
    .calendar .hd { background:var(--g2); padding:6px 8px; font-size:10px; color:var(--g5); text-transform:uppercase; letter-spacing:0.1em; }
    /* Month grid variant + interaction states */
    .calendar.month-grid .day { min-height:84px; }
    .calendar .day.muted { color:var(--g4); }
    .calendar .day.muted .num { color:var(--g4); font-weight:400; }
    .calendar .day.today .num { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--g7); color:var(--g0); }
    .calendar .day.clickable { cursor:pointer; transition:background 120ms; }
    .calendar .day.clickable:hover { background:var(--g2); }

    /* ============ SCHEDULE: calendar toolbar — prev/next + jump to month/year/week ============ */
    .cal-toolbar {
      display:flex; align-items:center; gap:14px; flex-wrap:wrap;
      padding:10px 14px; background:var(--g0); border:var(--line); border-bottom:none;
    }
    .cal-nav { display:flex; align-items:center; gap:6px; }
    .cal-nav .icon-btn { width:28px; height:28px; font-size:13px; }
    .cal-period { font-size:13.5px; font-weight:600; color:var(--g8); min-width:180px; }
    .cal-jump { display:flex; gap:8px; margin-left:auto; }
    .cal-view-all { padding:10px 14px; background:var(--g1); border:var(--line); border-top:none; font-size:12px; }
    .cal-view-all .link { font-weight:500; }

    /* ============ SIDE DRAWER (Schedule → trips inside a day / week / month) ============ */
    .side-drawer-back {
      position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:900;
      opacity:0; pointer-events:none; transition:opacity 220ms;
    }
    .side-drawer-back.on { opacity:1; pointer-events:auto; }
    .side-drawer {
      position:fixed; top:0; right:0; bottom:0; width:50%; min-width:520px; max-width:920px;
      background:var(--g0); border-left:var(--line-strong); box-shadow:-24px 0 60px rgba(0,0,0,0.22);
      z-index:901; display:flex; flex-direction:column;
      transform:translateX(100%); transition:transform 260ms cubic-bezier(.22,1,.36,1);
    }
    .side-drawer.on { transform:translateX(0); }
    .side-drawer > header {
      padding:16px 20px; border-bottom:var(--line-strong); flex-shrink:0;
      display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
    }
    .side-drawer > header .sd-head-txt h3 { font-size:16px; font-weight:600; color:var(--g8); margin-top:2px; }
    .side-drawer > header .sd-head-txt .muted { font-size:11.5px; color:var(--g5); margin-top:2px; }
    .side-drawer > header .close {
      width:28px; height:28px; display:grid; place-items:center;
      background:transparent; border:var(--line); color:var(--g6); font-size:13px; flex-shrink:0;
    }
    .side-drawer .dir-toolbar { border:none; border-bottom:var(--line-strong); flex-shrink:0; }
    .side-drawer .sd-body { flex:1; overflow-y:auto; min-height:0; }
    .side-drawer .pager { flex-shrink:0; }
    @media (max-width:900px) { .side-drawer { width:100%; min-width:0; } }

    /* ============ TRIP DETAIL PANEL (right-side panel with a left icon rail for categories) ============ */
    .td-back {
      position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:900;
      opacity:0; pointer-events:none; transition:opacity 220ms;
    }
    .td-back.on { opacity:1; pointer-events:auto; }
    .trip-drawer {
      position:fixed; top:0; right:0; bottom:0; width:640px; max-width:94vw;
      background:var(--g0); border-left:var(--line-strong); box-shadow:-24px 0 60px rgba(0,0,0,0.22);
      z-index:901; display:flex; flex-direction:row;
      transform:translateX(100%); transition:transform 260ms cubic-bezier(.22,1,.36,1);
    }
    .trip-drawer.on { transform:translateX(0); }
    /* Opt-in wide mode (openDetailPanel({wide:true})) — real working room for
       something like the Agent Flows visual graph editor, instead of the usual
       quick-glance 640px width. */
    .trip-drawer.trip-drawer-wide { width:70vw; max-width:96vw; }
    /* Opt-in extra-wide mode (openDetailPanel({xwide:true})) — a real canvas
       editor (Agent Flows' visual graph) needs more than 70vw to lay out more
       than a couple of steps side by side without constant panning. */
    .trip-drawer.trip-drawer-xwide { width:85vw; max-width:98vw; }
    .td-rail {
      width:58px; flex-shrink:0; background:var(--g1); border-right:var(--line-strong);
      display:flex; flex-direction:column; align-items:center; padding:16px 0; gap:4px;
    }
    .td-rail-btn {
      width:40px; height:40px; display:grid; place-items:center;
      background:transparent; border:1px solid transparent; color:var(--g5); cursor:pointer;
      transition:background 120ms, color 120ms, border-color 120ms;
    }
    .td-rail-btn svg { width:19px; height:19px; }
    .td-rail-btn:hover { background:var(--g2); color:var(--g7); }
    .td-rail-btn.active { background:var(--g0); color:var(--g8); border-color:var(--g4); }
    .td-main { flex:1; min-width:0; display:flex; flex-direction:column; }
    .td-main > header {
      padding:16px 20px; border-bottom:var(--line-strong); flex-shrink:0;
      display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
    }
    .td-main > header h3 { font-size:16px; font-weight:600; color:var(--g8); margin-top:2px; }
    .td-main > header .muted { font-size:11.5px; color:var(--g5); margin-top:2px; }
    .td-main > header .close {
      width:28px; height:28px; display:grid; place-items:center;
      background:transparent; border:var(--line); color:var(--g6); font-size:13px; flex-shrink:0;
    }
    .td-body { flex:1; overflow-y:auto; padding:20px; }
    .td-cat { display:none; }
    .td-cat.active { display:block; }
    /* A category whose content is itself a fixed-viewport canvas (the Agent
       Flows graph editor) needs a real bounded height to size against — plain
       block layout only ever gives a category `height:auto` (= its content's
       own size), so a child asking for `height:100%` had nothing definite to
       resolve against and just grew to fit its full, oversized canvas instead
       of clipping/scrolling it, pushing Cancel/Create off past the bottom of
       the screen. Scoped with :has() to this one shape rather than turning
       .td-body/.td-cat into flex generally, which every other (plain,
       block-stacked) category already relies on. */
    .td-body:has(.flow-editor) { display:flex; flex-direction:column; }
    .td-cat.active:has(> .flow-editor) { display:flex; flex-direction:column; flex:1; min-height:0; }
    @media (max-width:760px) { .trip-drawer { width:100%; } }

    .row-inline { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; border-bottom:var(--line); font-size:12px; }
    .row-inline:last-child { border-bottom:none; }
    .row-inline .k { color:var(--g5); }
    .row-inline .v { color:var(--g7); font-weight:500; }

    /* ============ COMMAND PALETTE (⌘K) ============ */
    .cmdk-back {
      position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:950;
      opacity:0; pointer-events:none; transition:opacity 160ms;
    }
    .cmdk-back.on { opacity:1; pointer-events:auto; }
    .cmdk {
      position:fixed; top:12vh; left:50%; width:600px; max-width:92vw; max-height:70vh;
      background:var(--g0); border:var(--line-strong); box-shadow:0 24px 60px rgba(0,0,0,0.28);
      z-index:951; display:flex; flex-direction:column; overflow:hidden;
      opacity:0; pointer-events:none; transform:translate(-50%, -6px) scale(0.98);
      transition:opacity 140ms, transform 140ms;
    }
    .cmdk.on { opacity:1; pointer-events:auto; transform:translate(-50%, 0) scale(1); }
    .cmdk-input-row {
      display:flex; align-items:center; gap:10px; padding:14px 16px;
      border-bottom:var(--line-strong); flex-shrink:0;
    }
    .cmdk-input-row .cmdk-icon { color:var(--g5); font-size:15px; }
    .cmdk-input-row input {
      flex:1; border:none; outline:none; background:transparent; font-size:14px; color:var(--g7);
    }
    .cmdk-results { overflow-y:auto; padding:8px 0; }
    .cmdk-group { padding:4px 0; }
    .cmdk-group + .cmdk-group { border-top:var(--line); }
    .cmdk-group[hidden] { display:none; }
    .cmdk-group-label {
      padding:6px 16px 4px; font-size:10.5px; font-weight:600; letter-spacing:0.08em;
      color:var(--g5); text-transform:uppercase;
    }
    .cmdk-item {
      display:flex; align-items:center; gap:10px; width:100%; padding:9px 16px;
      background:transparent; border:none; color:var(--g7); text-align:left; font-size:13px;
      cursor:pointer;
    }
    .cmdk-item .cmdk-item-icon {
      width:26px; height:26px; flex-shrink:0; display:grid; place-items:center;
      background:var(--g1); border:var(--line); color:var(--g6);
    }
    .cmdk-item .cmdk-item-icon svg { width:15px; height:15px; }
    .cmdk-item .cmdk-item-icon.material-symbols-outlined { font-size:15px; }
    .cmdk-item-txt { flex:1; display:flex; flex-direction:column; min-width:0; }
    .cmdk-item-sub { font-size:11px; color:var(--g5); }
    .cmdk-item-go { color:var(--g4); font-size:11px; opacity:0; }
    .cmdk-item.active, .cmdk-item:hover { background:var(--g1); }
    .cmdk-item.active .cmdk-item-go { opacity:1; }
    .cmdk-empty { padding:24px 16px; text-align:center; font-size:12.5px; color:var(--g5); }
    .cmdk-empty[hidden] { display:none; }
    .cmdk-foot {
      display:flex; gap:16px; padding:10px 16px; border-top:var(--line-strong);
      background:var(--g1); font-size:11px; color:var(--g5); flex-shrink:0;
    }
    .cmdk-foot .kbd {
      font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
      font-size:10px; color:var(--g5); border:var(--line); padding:1px 5px; background:var(--g0);
      margin-right:3px;
    }
    @media (max-width:640px) {
      .cmdk { top:0; left:0; width:100%; max-width:100%; height:100%; max-height:100%; transform:none; }
      .cmdk.on { transform:none; }
    }

    /* Message center */
    .msg-thread { padding:14px; height:380px; overflow-y:auto; background:var(--g1); }
    .msg-bubble { background:var(--g0); border:var(--line); padding:8px 12px; margin-bottom:8px; max-width:78%; font-size:12.5px; }
    .msg-bubble.me { background:var(--g7); color:var(--g0); border-color:var(--g7); margin-left:auto; }
    .msg-bubble .who { font-size:10px; color:var(--g5); margin-bottom:2px; }
    .msg-bubble.me .who { color:var(--g4); }

    /* Empty state */
    .empty { padding:40px 20px; text-align:center; color:var(--g5); background:var(--g0); border:var(--line); }
    .empty strong { color:var(--g7); font-weight:600; font-size:13px; display:block; margin-bottom:4px; }
    .muted { color:var(--g5); font-size:11.5px; }
    .mt-16 { margin-top:16px; }
    .mb-16 { margin-bottom:16px; }

    /* ============ ALFRED (right column) ============ */
    .alfred {
      background:var(--g0); border-left:var(--line-strong);
      display:flex; flex-direction:column; min-height:0;
    }
    .alfred header {
      padding:12px 14px; border-bottom:var(--line);
      display:flex; align-items:center; gap:10px;
    }
    .alfred header .ai-badge {
      width:28px; height:28px; border-radius:50%; background:var(--g8); color:var(--g0);
      display:grid; place-items:center; font-size:11px; font-weight:700;
    }
    .alfred header .who { flex:1; }
    .alfred header .name { font-size:13px; font-weight:600; color:var(--g8); display:flex; align-items:center; gap:6px; }
    .alfred header .name::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--g7); }
    .alfred header .role { font-size:10.5px; color:var(--g5); }
    .alfred header .collapse { background:transparent; border:var(--line); color:var(--g6); width:26px; height:26px; }
    .alfred-icon-btn {
      background:transparent; border:var(--line); color:var(--g6); width:26px; height:26px;
      display:grid; place-items:center; flex-shrink:0;
    }
    .alfred-icon-btn .material-symbols-outlined { font-size:16px !important; }
    .alfred-icon-btn:hover:not(:disabled) { background:var(--g1); color:var(--g8); }
    .alfred-icon-btn:disabled { color:var(--g4); cursor:not-allowed; }
    .alfred-tabs {
      display:flex; border-bottom:var(--line); background:var(--g1);
    }
    .alfred-tab {
      flex:1; padding:8px 6px; text-align:center; font-size:11.5px; color:var(--g6);
      cursor:pointer; border-bottom:2px solid transparent;
      display:flex; align-items:center; justify-content:center; gap:5px;
    }
    .alfred-tab .badge {
      font-size:10px; padding:0 5px; border:var(--line); background:var(--g0); color:var(--g6);
    }
    .alfred-tab.active { color:var(--g8); background:var(--g0); border-bottom-color:var(--g7); font-weight:500; }
    .alfred-body { flex:1; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
    .a-panel { display:none; flex:1; overflow-y:auto; padding:0; }
    .a-panel.active { display:flex; flex-direction:column; }

    /* Alfred chat */
    .a-chat { flex:1; overflow-y:auto; padding:12px; }
    /* Shown instead of a blank pane for a brand-new (or freshly switched-to,
       message-less) conversation — invites the first message rather than
       leaving an empty white rectangle above the input. */
    .a-chat-empty {
      height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; padding:24px; gap:8px; color:var(--g5);
    }
    .a-chat-empty .ai-badge {
      width:36px; height:36px; border-radius:50%; background:var(--g8); color:var(--g0);
      display:grid; place-items:center; font-size:13px; font-weight:700; margin-bottom:4px;
    }
    .a-chat-empty .tt { font-size:13px; font-weight:600; color:var(--g7); }
    .a-chat-empty .ds { font-size:11.5px; color:var(--g5); max-width:220px; }
    .a-msg { margin-bottom:12px; }
    .a-msg .who { font-size:10px; color:var(--g5); margin-bottom:3px; }
    .a-msg .bubble { background:var(--g1); border:var(--line); padding:9px 12px; font-size:12.5px; color:var(--g7); }
    .a-msg.me .bubble { background:var(--g7); color:var(--g0); border-color:var(--g7); }
    .a-msg.me .who { text-align:right; }
    .a-msg.me .bubble { margin-left:auto; max-width:88%; }
    .a-suggest {
      padding:8px 12px; border-top:var(--line); background:var(--g1);
      font-size:10.5px; color:var(--g5); text-transform:uppercase; letter-spacing:0.08em;
    }
    .a-chips { padding:0 12px 12px; display:flex; flex-wrap:wrap; gap:6px; background:var(--g1); border-bottom:var(--line); }
    .a-chips .c { border:var(--line); background:var(--g0); padding:4px 8px; font-size:11px; color:var(--g7); cursor:pointer; }
    .a-input {
      padding:10px 12px; border-top:var(--line); background:var(--g0);
      display:flex; gap:6px; align-items:flex-end;
    }
    .a-input textarea {
      flex:1; border:var(--line); background:var(--g1); padding:8px 10px; resize:none;
      font-size:12.5px; color:var(--g7); min-height:36px; max-height:100px; outline:none;
    }
    .a-input .send {
      background:var(--g7); color:var(--g0); border:1px solid var(--g7); padding:8px 14px;
      font-size:12px; font-weight:500; align-self:stretch;
    }
    .a-input .send:hover:not(:disabled) { background:var(--g8); border-color:var(--g8); }
    .a-input .send:focus-visible { outline:2px solid var(--g5); outline-offset:2px; }
    .a-input .send:disabled { background:var(--g2); border-color:var(--g2); color:var(--g5); cursor:not-allowed; }
    .a-foot { padding:6px 12px; font-size:10px; color:var(--g5); background:var(--g1); text-align:center; }

    /* Alfred history (the conversation list under the History tab) */
    .a-history-head { padding:12px; border-bottom:var(--line); }
    .a-history-head .btn { width:100%; }
    .a-history-list { flex:1; overflow-y:auto; }
    .a-history-item {
      display:block; width:100%; text-align:left; background:transparent; border:none;
      padding:10px 12px; border-bottom:var(--line); cursor:pointer;
    }
    .a-history-item:hover, .a-history-item.active { background:var(--g1); }
    .a-history-item .row-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
    .a-history-item .title { font-size:12.5px; font-weight:500; color:var(--g7); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .a-history-item .when { font-size:10.5px; color:var(--g5); flex-shrink:0; }
    .a-history-item .preview { font-size:11.5px; color:var(--g5); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* Alfred trips */
    .a-trip { display:grid; grid-template-columns:8px 1fr auto; gap:10px; padding:10px 12px; border-bottom:var(--line); cursor:pointer; }
    .a-trip:hover { background:var(--g1); }
    .a-trip .prio { width:6px; height:6px; border-radius:50%; background:var(--g5); margin-top:6px; }
    .a-trip .prio.hi { background:var(--g8); }
    .a-trip .prio.md { background:var(--g6); }
    .a-trip .id { font-size:11px; color:var(--g5); }
    .a-trip .rt { font-size:12.5px; color:var(--g7); font-weight:500; }
    .a-trip .drv { font-size:11px; color:var(--g5); margin-top:1px; }
    .a-trip .time { font-size:11px; color:var(--g6); white-space:nowrap; text-align:right; }

    /* Alfred alerts */
    .a-alert { display:grid; grid-template-columns:24px 1fr; gap:10px; padding:10px 12px; border-bottom:var(--line); cursor:pointer; }
    .a-alert:hover { background:var(--g1); }
    .a-alert .ic { width:20px; height:20px; border-radius:50%; background:var(--g2); border:var(--line); display:grid; place-items:center; font-size:10px; color:var(--g7); }
    .a-alert.hi .ic { background:var(--g7); color:var(--g0); border-color:var(--g8); }
    .a-alert .tt { font-size:12.5px; color:var(--g7); font-weight:500; }
    .a-alert .ds { font-size:11px; color:var(--g5); margin-top:2px; }

    /* Collapsed Alfred */
    .body.alfred-collapsed .alfred header,
    .body.alfred-collapsed .alfred-tabs,
    .body.alfred-collapsed .alfred-body { display:none; }
    .alfred-mini {
      display:none; flex-direction:column; align-items:center; padding:10px 0; gap:12px;
    }
    .body.alfred-collapsed .alfred-mini { display:flex; }
    .alfred-mini button {
      width:28px; height:28px; border:var(--line); background:var(--g0);
      display:grid; place-items:center; color:var(--g6); font-size:12px;
    }
    .alfred-mini .ai-badge {
      width:28px; height:28px; border-radius:50%; background:var(--g8); color:var(--g0);
      display:grid; place-items:center; font-size:10px; font-weight:700;
    }

    /* Business view swap on Home */
    .home-operational { display:block; }
    .home-business { display:none; }
    body.view-business .home-operational { display:none; }
    body.view-business .home-business { display:block; }

/* ============================================================
   REAL FORM FIELDS — the wireframe faked every form inside JS-built
   modal HTML with inline styles; the real app has actual <form> pages,
   so these are genuine reusable classes rather than one-off inline CSS.
   ============================================================ */
.field { margin-bottom: 0; }
.field-label { display:block; font-size:11.5px; color:var(--g6); margin-bottom:5px; }
.input, .select {
  width:100%; border:var(--line); padding:9px 10px; background:var(--g1);
  font-size:13px; color:var(--g7); font-family:inherit;
}
.input:focus, .select:focus { outline:none; border-color:var(--g5); background:var(--g0); }
.select { cursor:pointer; }
.row { display:flex; align-items:center; }
.link { color:var(--g7); text-decoration:underline; cursor:pointer; font-size:11.5px; }
.link:hover { color:var(--g8); }
.material-icons, .material-symbols-outlined { font-size: 14px; }

/* ---------- Photo avatars — real uploaded photos (People/Security), stored as a
   compact data URI; a person with none shows a plain "No photo" placeholder in the
   same circle instead of a broken/missing image. ---------- */
.photo-avatar {
  width:44px; height:44px; border-radius:50%; object-fit:cover; border:var(--line-strong);
  background:var(--g1); flex-shrink:0;
}
.photo-avatar-empty {
  display:flex; align-items:center; justify-content:center;
  font-size:8.5px; color:var(--g5); text-align:center; line-height:1.2; padding:2px;
}
.photo-avatar-lg { width:72px; height:72px; }
.table .photo-avatar { width:28px; height:28px; }
.table .photo-avatar-empty { font-size:7px; }

/* ============================================================
   WIZARD — a 3-step "quote before you book" flow (New Trip), styled after a ride-
   hailing fare estimate: pick the trip, see the price, confirm. Reusable for any
   future multi-step create flow, not just trips.
   ============================================================ */
.wz-steps { display:flex; align-items:center; padding:18px 20px 4px; }
.wz-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.wz-step .wz-dot {
  width:26px; height:26px; border-radius:50%; border:var(--line-strong); background:var(--g0);
  color:var(--g5); font-size:11px; font-weight:600; display:grid; place-items:center;
  transition:background 150ms, color 150ms, border-color 150ms;
}
.wz-step .wz-label { font-size:10px; color:var(--g5); font-weight:500; white-space:nowrap; letter-spacing:0.01em; }
.wz-step.active .wz-dot { background:var(--g7); border-color:var(--g7); color:var(--g0); }
.wz-step.active .wz-label { color:var(--g8); font-weight:600; }
.wz-step.done .wz-dot { background:var(--g8); border-color:var(--g8); color:var(--g0); }
.wz-step.done .wz-label { color:var(--g7); }
.wz-line { flex:1; height:1px; background:var(--g3); margin:0 8px 20px; transition:background 150ms; }
.wz-line.done { background:var(--g8); }

.wz-panel { display:none; padding:20px; }
.wz-panel.active { display:block; }

.wz-route { border:var(--line); background:var(--g0); padding:14px 16px; margin-bottom:16px; }
.wz-route .wz-point { display:flex; align-items:flex-start; gap:12px; }
.wz-route .wz-track { display:flex; flex-direction:column; align-items:center; padding-top:3px; }
.wz-route .wz-dotmark { width:8px; height:8px; border-radius:50%; border:2px solid var(--g7); background:var(--g0); flex-shrink:0; }
.wz-route .wz-dotmark.end { background:var(--g7); }
.wz-route .wz-connector { width:1px; flex:1; min-height:16px; background:var(--g3); margin:3px 0; }
.wz-route .wz-pt { padding-bottom:14px; }
.wz-route .wz-point:last-child .wz-pt { padding-bottom:0; }
.wz-route .wz-pt-label { font-size:9px; text-transform:uppercase; letter-spacing:0.08em; color:var(--g5); }
.wz-route .wz-pt-name { font-size:13px; color:var(--g8); font-weight:600; margin-top:1px; }

.wz-fare-card { border:var(--line-strong); background:var(--g0); padding:26px 20px; text-align:center; margin-bottom:16px; }
.wz-fare-amount { font-size:40px; font-weight:700; color:var(--g8); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.wz-fare-currency { font-size:13px; color:var(--g5); font-weight:600; margin-left:5px; }
.wz-fare-basis { font-size:11.5px; color:var(--g5); margin-top:8px; }
.wz-fare-loading { display:flex; align-items:center; justify-content:center; gap:8px; padding:34px 0; color:var(--g5); font-size:12.5px; }
.wz-fare-loading .wz-pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--g6); animation:pulse 1s infinite; }
.wz-fare-loading .wz-pulse-dot:nth-child(2) { animation-delay:0.15s; }
.wz-fare-loading .wz-pulse-dot:nth-child(3) { animation-delay:0.3s; }

.wz-summary { border:var(--line); background:var(--g0); }
.wz-summary-row { display:flex; justify-content:space-between; padding:9px 14px; border-bottom:var(--line); font-size:12px; }
.wz-summary-row:last-child { border-bottom:none; }
.wz-summary-row .k { color:var(--g5); }
.wz-summary-row .v { color:var(--g7); font-weight:500; text-align:right; }

.wz-success { text-align:center; padding:30px 10px 14px; }
.wz-success .wz-check {
  width:52px; height:52px; border-radius:50%; background:var(--g7); color:var(--g0);
  font-size:24px; display:grid; place-items:center; margin:0 auto 18px;
}
.wz-success h3 { font-size:16px; font-weight:600; color:var(--g8); }
.wz-success p { font-size:12.5px; color:var(--g6); margin-top:6px; }
.wz-success .wz-summary { margin:20px auto 0; max-width:340px; text-align:left; }

/* ============================================================
   RESPONSIVE — the shell (topbar/sidebar/content/Alfred) and the
   shared grid components above were all built at a fixed desktop
   width. These breakpoints let that same markup/JS degrade down to
   tablet and phone widths: nothing here changes desktop appearance
   (each rule only applies inside its max-width query).
   ============================================================ */

/* ---- Small desktop / tablet landscape (≤1024px) ---- */
@media (max-width:1024px) {
  .search { max-width:260px; }
  /* !important: a few screens set an inline grid-template-columns
     (e.g. kpi-row repeat(5/6,1fr)) directly on the element, which
     otherwise outranks anything set here. */
  .kpi-row { grid-template-columns:repeat(2,1fr) !important; }
  .biz-grid { grid-template-columns:repeat(6,1fr); }
}

/* ---- Tablet (≤768px): panels that assumed two side-by-side columns
   stack instead. The sidebar and Alfred are left alone here — both
   already have their own "Collapse" toggle (.sidebar-collapsed /
   .alfred-collapsed) that resizes their track and switches to an
   icon-only look; forcing that same look on every screen regardless
   of the toggle's actual state, as an earlier version of this block
   did, desyncs the CSS from the state the toggle button/arrow and
   the group-accordion JS believe they're in — the visible symptom is
   a sidebar group (or Alfred) that no longer opens when clicked,
   because the CSS keeps its contents hidden no matter what class JS
   adds. So: only ever key off those existing classes, never override
   them outright. ---- */
@media (max-width:768px) {
  .grid-2, .split { grid-template-columns:1fr !important; }
  .split .list-panel { max-height:260px; overflow-y:auto; }

  /* Secondary map widgets — decorative context, not core controls —
     step aside once there's no longer room for them beside the map. */
  .fp-weather, .fp-flights { display:none; }
}

/* ---- Phone (≤640px): the topbar's search box and page chrome give
   way to the essentials, and floating menus stop assuming they have
   260px+ of clear space to their right. ---- */
@media (max-width:640px) {
  .topbar { grid-template-columns:auto 1fr auto; gap:8px; padding:0 10px; }
  .search { display:none; }
  .tenant-btn .info,
  .tenant-btn .cr { display:none; }

  .page-head { padding:12px 14px; }
  .page-title { flex-wrap:wrap; row-gap:8px; }
  .page-body { padding:14px; }

  .kpi-row { grid-template-columns:1fr !important; }

  .user-menu-panel, .tenant-menu, .mt-menu {
    min-width:0; width:min(320px, calc(100vw - 24px));
  }

  .calendar .day { padding:4px; min-height:44px; font-size:10px; }
  .calendar.month-grid .day { min-height:56px; }

  .wz-steps { padding:14px 10px 4px; }
  .wz-step .wz-label { font-size:9px; }
  .wz-line { margin:0 4px 20px; }

  .veh-card { width:min(290px, calc(100vw - 24px)); }
  .toast-host { left:12px; right:12px; }
  .toast { max-width:none; }
}

/* ---- Small phone (≤420px) ---- */
@media (max-width:420px) {
  .top-actions .pill { display:none; }
  .brand { font-size:11px; letter-spacing:0.14em; }
}

/* ============ AGENT FLOWS — visual, drag-and-drop task graph editor ============
   A real DAG (Flow.tasks + Flow.edges) rendered as absolutely-positioned nodes on
   a scrollable canvas, connected by SVG paths recomputed on drag. Nodes are plain
   draggable divs (not a library) — drag by the header, wire two nodes together by
   dragging from a node's output port to another's input port. */
.flow-editor { display:flex; flex-direction:column; height:100%; }
.flow-editor-toolbar {
  display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end;
  padding:0 0 16px; border-bottom:var(--line); margin-bottom:14px; flex-shrink:0;
}
.flow-editor-toolbar .field { display:flex; flex-direction:column; gap:5px; }
.flow-editor-toolbar .input, .flow-editor-toolbar .select { width:auto; }
.flow-editor-toolbar input[name="flName"] { min-width:240px; }
.flow-editor-toolbar input#flDescription { min-width:300px; }
.flow-editor-toolbar .flow-toolbar-spacer { flex:1; }
.flow-editor-toolbar .flow-hint {
  display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--g5);
  align-self:center; white-space:nowrap;
}
.flow-editor-toolbar .flow-hint svg { width:15px; height:15px; flex-shrink:0; }
/* A real pan/zoom canvas (n8n's own interaction model), not a scrolled div:
   .flow-canvas and .flow-edges-svg are one shared "world" that a single CSS
   transform (translate + scale, see applyFlowView() in agent-flows.ejs) pans
   and zooms — the wrap itself never scrolls, it clips. Node positions and
   edge paths are computed once in plain, unscaled world units (a node's
   real x/y, never a live DOM measurement), so they stay correct at any pan
   or zoom without re-measuring anything. */
.flow-canvas-wrap {
  position:relative; flex:1; min-height:460px; overflow:hidden;
  background:var(--g1); border:var(--line); background-image:radial-gradient(var(--g4) 1px, transparent 1px);
  cursor:grab;
}
.flow-canvas-wrap.panning { cursor:grabbing; }
/* `.flow-canvas` comes after the SVG in the DOM (so nodes paint above the
   lines), which by default also means it wins every hit-test across its WHOLE
   area — including the empty space a connection line runs through — so a
   click meant for the line underneath it never reaches the <path> at all.
   pointer-events:none here, then explicitly re-enabled on .flow-node, fixes
   that: empty canvas space is click-through to the wrap beneath (which is
   what actually starts a pan drag), while nodes (and everything inside them
   — inputs, selects, ports, the drag handle) still receive every event
   exactly as before. */
.flow-canvas { position:absolute; top:0; left:0; width:4000px; height:2400px; pointer-events:none; transform-origin:0 0; }
.flow-edges-svg { position:absolute; top:0; left:0; width:4000px; height:2400px; pointer-events:none; overflow:visible; transform-origin:0 0; }
.flow-edges-svg path.flow-edge { stroke:var(--g5); stroke-width:2; fill:none; pointer-events:stroke; cursor:pointer; }
.flow-edges-svg path.flow-edge:hover { stroke:#c0392b; }
.flow-edges-svg path.flow-edge-temp { stroke:var(--g7); stroke-width:2; stroke-dasharray:5 4; fill:none; }
.flow-node {
  position:absolute; width:268px; background:var(--g0); border:var(--line-strong);
  box-shadow:0 6px 18px rgba(0,0,0,0.10); font-size:12px; user-select:none;
  pointer-events:auto;
}
.flow-node-head {
  display:flex; align-items:center; gap:8px; height:40px; padding:0 8px 0 12px; background:var(--g1);
  border-bottom:var(--line); cursor:grab; position:relative;
}
.flow-node-head:active { cursor:grabbing; }
.flow-node-head .select { flex:1; font-size:11.5px; padding:4px 6px; }
.flow-node-del {
  width:20px; height:20px; flex-shrink:0; display:grid; place-items:center;
  background:transparent; border:none; color:var(--g5); cursor:pointer; font-size:13px; margin-left:auto;
}
.flow-node-del:hover { color:#c0392b; }
.flow-node-body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.flow-node-body input, .flow-node-body textarea { font-size:11.5px; }
.flow-node-field-label {
  font-size:10px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--g5); margin-bottom:-3px;
}
.flow-port {
  position:absolute; top:20px; width:14px; height:14px; margin-top:-7px; border-radius:50%;
  background:var(--g0); border:2px solid var(--g6); cursor:crosshair; z-index:2;
  transition:background 120ms, border-color 120ms, transform 120ms;
}
.flow-port:hover { background:var(--g7); border-color:var(--g7); transform:scale(1.15); }
.flow-port-in { left:-8px; }
.flow-port-out { right:-8px; }
.flow-node-runstate {
  padding:5px 12px; font-size:10.5px; border-top:var(--line); display:none;
}
.flow-node-runstate.ok { display:block; color:#1f7a3d; background:#eef8f0; }
.flow-node-runstate.err { display:block; color:#c0392b; background:#fbecec; }

/* Bottom-left zoom/pan controls, floating over the canvas — same idea (and
   corner) as n8n's own: fit-to-view, zoom in, zoom out, reset to 100%. */
.flow-canvas-controls {
  position:absolute; left:14px; bottom:14px; z-index:3; pointer-events:auto;
  display:flex; gap:6px;
}
.flow-canvas-controls button {
  width:30px; height:30px; display:grid; place-items:center;
  background:var(--g0); border:var(--line-strong); color:var(--g6); cursor:pointer;
  font-size:15px; line-height:1; padding:0;
}
.flow-canvas-controls button:hover { color:var(--g8); background:var(--g1); }
.flow-canvas-controls button svg { width:16px; height:16px; }
.flow-canvas-controls button.flow-canvas-zoom-pct {
  width:auto; min-width:44px; padding:0 8px;
  color:var(--g6); font-size:11px; font-variant-numeric:tabular-nums; font-weight:500;
}