/* ── Dashboard shell ── */
    body { background: var(--bg); overflow-x: hidden; }
    #dashboard { max-width: 100vw; overflow-x: hidden; }

    #login-screen {
      display: flex; align-items: center; justify-content: center;
      min-height: 100vh; padding: 2rem;
    }
    .login-card {
      background: #fff; border: 1px solid var(--border); border-radius: 1rem;
      padding: 2.5rem 2rem; max-width: 420px; width: 100%;
      box-shadow: 0 4px 24px rgba(5,46,95,.07);
      text-align: center;
    }
    .login-card h1 { font-size: 1.4rem; margin-bottom: .4rem; color: var(--brand); }
    .login-card p  { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }
    .login-card input {
      width: 100%; padding: .65rem 1rem; border: 1.5px solid var(--border);
      border-radius: .5rem; font-size: .95rem; margin-bottom: .75rem;
      font-family: monospace; box-sizing: border-box;
    }
    .login-card input:focus { outline: none; border-color: var(--brand); }
    .login-err { color: var(--red); font-size: .83rem; min-height: 1.1rem; }

    /* ── Dashboard layout ── */
    #dashboard { display: none; }

    .db-nav {
      background: var(--brand); color: #fff;
      display: flex; flex-direction: column;
      position: sticky; top: 0; z-index: 50;
      border-bottom: 1px solid rgba(255,255,255,.1);
      box-shadow: 0 2px 12px rgba(5,46,95,.25);
    }
    /* Row 1: logo + right controls */
    .db-nav-top {
      display: flex; align-items: center; justify-content: space-between;
      padding: .55rem 1rem; width: 100%; box-sizing: border-box;
    }
    .db-nav-left { display: flex; align-items: center; gap: 1rem; }
    .db-nav-back-btn {
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
      color: #fff; border-radius: .5rem; padding: .4rem .9rem;
      font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    }
    .db-nav-back-btn:hover { background: rgba(255,255,255,.22); }
    .db-nav-logo { display: flex; align-items: center; color: #fff; text-decoration: none; flex-shrink: 0; }
    .db-nav-logo img { height: 28px; }
    /* Row 2: tabs — horizontally scrollable, no scrollbar visible */
    .db-tabs {
      display: flex; gap: .2rem;
      overflow-x: auto; padding: .3rem 1rem .4rem;
      scrollbar-width: none;
    }
    .db-tabs::-webkit-scrollbar { display: none; }
    .db-tab {
      padding: .34rem .8rem; border-radius: .4rem; font-size: .82rem; cursor: pointer;
      color: rgba(255,255,255,.7); border: 1px solid transparent; background: transparent;
      transition: background .15s, color .15s, border-color .15s;
      font-weight: 500; white-space: nowrap; flex-shrink: 0;
    }
    .db-tab:hover { background: rgba(255,255,255,.12); color: #fff; }
    .db-tab.active { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.25); font-weight: 700; }
    .db-nav-right { display: flex; align-items: center; flex-shrink: 0; }
    /* ── Profile button + dropdown ── */
    .db-profile-wrap { position: relative; }
    .db-profile-btn {
      display: flex; align-items: center; gap: .35rem;
      background: rgba(255,255,255,.15); border: none; color: #fff;
      border-radius: .4rem; padding: .28rem .55rem; cursor: pointer;
      font-size: .82rem; font-weight: 600; line-height: 1; transition: background .15s;
    }
    .db-profile-btn:hover { background: rgba(255,255,255,.25); }
    .db-profile-avatar {
      width: 24px; height: 24px; border-radius: 50%;
      background: rgba(255,255,255,.3); display: flex; align-items: center;
      justify-content: center; font-size: .8rem; font-weight: 700; text-transform: uppercase;
    }
    .db-profile-dropdown {
      display: none; position: absolute; top: calc(100% + 7px); right: 0;
      background: #fff; border: 1px solid var(--border); border-radius: .65rem;
      box-shadow: 0 8px 28px rgba(5,46,95,.15); min-width: 210px; z-index: 200; overflow: hidden;
    }
    .db-profile-dropdown.open { display: block; }
    .dbpd-header { padding: .65rem 1rem; border-bottom: 1px solid var(--border); }
    .dbpd-email { font-size: .78rem; color: var(--muted); margin-bottom: .35rem;
                  word-break: break-all; min-height: .9em; }
    .dbpd-credits { display: flex; justify-content: space-between; align-items: center;
                    font-size: .82rem; color: var(--text); }
    .dbpd-cval { font-weight: 700; color: var(--brand); }
    .dbpd-item {
      display: block; width: 100%; text-align: left;
      padding: .6rem 1rem; font-size: .84rem; color: var(--text);
      background: none; border: none; cursor: pointer; transition: background .1s;
    }
    .dbpd-item:hover { background: #f8faff; }
    .dbpd-danger { color: var(--red); border-top: 1px solid var(--border); }
    .dbpd-danger:hover { background: #fff5f5; }
    /* Modeler button — hidden on mobile, shown on desktop */
    .modeler-desktop-only { display: none; }
    @media(min-width: 640px) { .modeler-desktop-only { display: inline-flex; } }

    /* Floating Telegram FAB */
    .tg-fab {
      position: fixed; bottom: 1.5rem; right: 1.25rem; z-index: 900;
      width: 52px; height: 52px; border-radius: 50%;
      background: #229ED9; color: #fff;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(34,158,217,.45);
      text-decoration: none; transition: transform .15s, box-shadow .15s;
    }
    .tg-fab:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(34,158,217,.55); }
    /* Hide FAB and chat panel when editor overlay is open */
    body:has(#app-editor-wrap.open) .tg-fab,
    body:has(#app-editor-wrap.open) #chat-panel { display: none !important; }

    /* ── Content area ── */
    .db-content { padding: 1.2rem 1rem; }
    @media(min-width:640px) { .db-content { padding: 1.5rem 2rem; } }

    /* Scope the show/hide to DIRECT children of the content area. The routed
       component wrappers (<ps-modeler> …) are the direct children that get the
       .active class from showTab(); their template's inner root also carries
       class="db-section" (a grandchild), and an unscoped rule hid that inner
       content on every section except Overview (which hardcodes .active). Scoping
       to `.db-content > .db-section` lets the wrapper alone control visibility. */
    .db-content > .db-section { display: none; }
    .db-content > .db-section.active { display: block; }

    .db-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1.2rem;
    }
    .db-header h2 { font-size: 1.2rem; color: var(--brand); margin: 0; }
    .db-actions { display: flex; gap: .6rem; align-items: center; }

    .db-refresh {
      padding: .38rem .9rem; font-size: .82rem; border: 1.5px solid var(--border);
      border-radius: .4rem; background: #fff; cursor: pointer; color: var(--brand);
      transition: border-color .15s;
    }
    .db-refresh:hover { border-color: var(--brand); }

    .filter-select {
      padding: .38rem .75rem; font-size: .82rem; border: 1.5px solid var(--border);
      border-radius: .4rem; background: #fff; color: var(--text); cursor: pointer;
    }

    /* ── Stats bar ── */
    .db-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.5rem; }
    @media(min-width:640px) { .db-stats { grid-template-columns: repeat(6, 1fr); gap: 1rem; } }
    .db-stat {
      background: #fff; border: 1px solid var(--border);
      border-radius: .75rem; padding: .65rem .7rem;
    }
    @media(min-width:640px) { .db-stat { padding: 1rem 1.2rem; } }
    .db-stat-label { font-size: .68rem; color: var(--muted); text-transform: uppercase;
                     letter-spacing: .04em; margin-bottom: .15rem; }
    @media(min-width:640px) { .db-stat-label { font-size: .75rem; } }
    .db-stat-value { font-size: 1.2rem; font-weight: 800; color: var(--brand); }
    @media(min-width:640px) { .db-stat-value { font-size: 1.6rem; } }
    .db-stat-value.green { color: var(--green); }
    .db-stat-value.orange { color: var(--accent); }
    .db-stat-value.red { color: var(--red); }
    /* ── Overview apps section ── */
    .ov-apps-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
    .ov-apps-title { font-size: 1rem; font-weight: 700; color: var(--brand); margin: 0; }

    /* ── Table ── */
    .db-table-wrap { overflow-x: auto; }
    table {
      width: 100%; border-collapse: collapse; font-size: .85rem;
      background: #fff; border-radius: .75rem; overflow: hidden;
      box-shadow: 0 1px 4px rgba(5,46,95,.06);
    }
    th {
      text-align: left; padding: .65rem 1rem;
      background: var(--brand); color: #fff; font-weight: 600; font-size: .8rem;
      text-transform: uppercase; letter-spacing: .04em;
    }
    td { padding: .6rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: #f6f9ff; }

    .badge {
      display: inline-block; padding: .2rem .55rem; border-radius: .35rem;
      font-size: .75rem; font-weight: 700; text-transform: uppercase;
    }
    .badge-active   { background: #e8f5e9; color: #2e7d32; }
    .badge-completed { background: #e3f2fd; color: #1565c0; }
    .badge-incident  { background: #fbe9e7; color: #c62828; }
    .badge-terminated { background: #fafafa; color: #616161; }

    .mono { font-family: monospace; font-size: .8rem; }
    .text-muted { color: var(--muted); font-size: .8rem; }

    .empty-state {
      text-align: center; padding: 3rem 1rem; color: var(--muted);
    }
    .empty-state p { margin: .5rem 0; }

    .loading { opacity: .5; font-style: italic; padding: 1rem; text-align: center; }

    /* ── Billing packs ── */
    .bill-pack {
      background: #fff; border: 1.5px solid var(--border); border-radius: 1rem;
      padding: 1.4rem 1.6rem; min-width: 200px; cursor: pointer;
      transition: border-color .15s, box-shadow .15s;
      position: relative; text-align: center;
    }
    .bill-pack:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(5,46,95,.1); }
    .pack-name { font-weight: 700; font-size: 1rem; color: var(--text); margin-bottom: .3rem; }
    .pack-credits { font-size: 1.4rem; font-weight: 800; color: var(--brand); }
    .pack-price { font-size: 1.1rem; font-weight: 600; color: var(--accent); margin: .3rem 0; }
    .pack-sub { font-size: .75rem; color: var(--muted); margin-bottom: 1rem; }
    .pack-btn { width: 100%; justify-content: center; pointer-events: none; }
    .pack-featured { border-color: var(--brand); }
    .pack-badge {
      position: absolute; top: -10px; right: 12px;
      background: var(--brand); color: #fff; font-size: .7rem; font-weight: 700;
      padding: .15rem .5rem; border-radius: .3rem;
    }

    /* ── Instance detail panel (Operate-style) ── */
    .inst-detail {
      position: fixed; top: 0; right: -540px; width: 520px; height: 100vh;
      background: #fff; border-left: 1px solid var(--border); z-index: 200;
      box-shadow: -4px 0 24px rgba(5,46,95,.12);
      transition: right .25s ease; overflow-y: auto;
    }
    .inst-detail.open { right: 0; }
    .inst-detail-header {
      background: var(--brand); color: #fff; padding: 1rem 1.2rem;
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 1;
    }
    .inst-detail-header h3 { margin: 0; font-size: .95rem; }
    .inst-detail-close { cursor: pointer; background: none; border: none; color: #fff; font-size: 1.3rem; opacity: .8; }
    .inst-detail-body { padding: 1.2rem; }
    .detail-row { display: flex; gap: .6rem; margin-bottom: .5rem; font-size: .85rem; align-items: baseline; }
    .detail-key { color: var(--muted); min-width: 130px; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
    .detail-val { font-family: monospace; font-size: .82rem; word-break: break-all; color: var(--text); }
    .detail-section { margin-top: 1.2rem; border-top: 1px solid var(--border); padding-top: .9rem; }
    .detail-section h4 { font-size: .75rem; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; letter-spacing: .06em; }
    .vars-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .vars-table th { text-align: left; color: var(--muted); font-size: .7rem; text-transform: uppercase; padding: .25rem .4rem; }
    .vars-table td { padding: .3rem .4rem; border-bottom: 1px solid #f0f4ff; font-family: monospace; }
    .overlay { display: none; position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.22); }
    .overlay.show { display: block; }

    /* ── Analytics charts ── */
    .chart-card {
      background: #fff; border: 1px solid var(--border); border-radius: .75rem;
      padding: 1.2rem; flex: 1; min-width: 280px;
    }
    .chart-card h3 { font-size: .88rem; color: var(--brand); margin: 0 0 .8rem; }

    /* ── Auto-refresh indicator ── */
    .auto-refresh-toggle {
      display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted);
      cursor: pointer; user-select: none;
    }
    .auto-refresh-toggle input { cursor: pointer; }

    /* ── Variables popup ── */
    .vars-btn {
      background: none; border: 1px solid var(--border); border-radius: .3rem;
      padding: .15rem .5rem; font-size: .75rem; cursor: pointer; color: var(--muted);
    }
    .vars-btn:hover { border-color: var(--brand); color: var(--brand); }

    /* ── Operate-style Instances layout ── */
    .op-layout {
      display: flex; gap: 0; height: calc(100vh - 110px); overflow: hidden;
      background: #fff; border: 1px solid var(--border); border-radius: .75rem;
      box-shadow: 0 1px 4px rgba(5,46,95,.06);
    }
    /* Left: process list */
    .op-proc-list {
      width: 260px; min-width: 200px; border-right: 1px solid var(--border);
      overflow-y: auto; flex-shrink: 0;
    }
    .op-proc-list-header {
      padding: .7rem 1rem; font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border);
      background: #f8fafd; position: sticky; top: 0; z-index: 2;
      display: flex; align-items: center; gap: .5rem;
    }
    .op-proc-item {
      padding: .65rem 1rem; border-bottom: 1px solid var(--border);
      cursor: pointer; transition: background .1s;
      display: flex; flex-direction: column; gap: .25rem;
    }
    .op-proc-item:hover { background: #f0f4ff; }
    .op-proc-item.selected { background: #e8eeff; border-left: 3px solid var(--brand); }
    .op-proc-name { font-size: .83rem; font-weight: 600; color: var(--text); word-break: break-all; }
    .op-proc-badges { display: flex; gap: .4rem; align-items: center; }
    .op-proc-badge {
      font-size: .68rem; font-weight: 700; padding: .1rem .4rem;
      border-radius: .25rem; display: inline-flex; align-items: center; gap: .2rem;
    }
    .op-proc-badge.running { background: #e8f5e9; color: #2e7d32; }
    .op-proc-badge.incident { background: #fbe9e7; color: #c62828; }
    .op-proc-badge.version  { background: #f0f0f0; color: #555; }
    /* Center: instance list */
    .op-center {
      flex: 1; overflow: hidden; display: flex; flex-direction: column;
    }
    .op-center-header {
      padding: .7rem 1rem; border-bottom: 1px solid var(--border);
      background: #f8fafd; display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .op-center-title { font-size: .85rem; font-weight: 700; color: var(--brand); }
    .op-center-filters { display: flex; gap: .5rem; align-items: center; }
    .op-instance-list { overflow-y: auto; flex: 1; }
    /* BPMN diagram area (shown above instance list when process selected) */
    .op-diagram-area {
      border-bottom: 1px solid var(--border); background: #fcfcfc;
      flex-shrink: 0; position: relative; height: 240px; overflow: hidden;
    }
    .op-diagram-area .bpmn-canvas { width: 100%; height: 100%; }
    .op-diagram-placeholder {
      display: flex; align-items: center; justify-content: center;
      height: 100%; color: var(--muted); font-size: .82rem; font-style: italic;
    }
    .op-diagram-toolbar {
      position: absolute; top: 6px; right: 8px; z-index: 5;
      display: flex; gap: .3rem;
    }
    .op-diagram-btn {
      background: rgba(255,255,255,.9); border: 1px solid var(--border);
      border-radius: .3rem; padding: .2rem .5rem; font-size: .75rem;
      cursor: pointer; color: var(--text);
    }
    .op-diagram-btn:hover { border-color: var(--brand); color: var(--brand); }
    /* Instance rows in the list */
    .op-inst-row {
      padding: .5rem 1rem; border-bottom: 1px solid var(--border);
      cursor: pointer; display: flex; gap: .75rem; align-items: center;
      font-size: .82rem; transition: background .1s;
    }
    .op-inst-row:hover { background: #f6f9ff; }
    .op-inst-row.selected { background: #e8eeff; }
    .op-inst-key { font-family: monospace; color: var(--muted); font-size: .75rem; flex-shrink: 0; }
    .op-inst-state { flex-shrink: 0; }
    .op-inst-date { color: var(--muted); font-size: .75rem; }
    .op-inst-dur  { color: var(--muted); font-size: .75rem; margin-left: auto; white-space: nowrap; }
    /* Right: instance detail */
    .op-detail {
      width: 320px; min-width: 260px; border-left: 1px solid var(--border);
      overflow-y: auto; flex-shrink: 0; display: none;
      flex-direction: column;
    }
    .op-detail.open { display: flex; }
    .op-detail-header {
      background: var(--brand); color: #fff; padding: .8rem 1rem;
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0; position: sticky; top: 0; z-index: 2;
    }
    .op-detail-header h4 { margin: 0; font-size: .88rem; }
    .op-detail-close { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; opacity: .8; }
    .op-detail-body { padding: .9rem 1rem; flex: 1; }
    .op-bpmn-panel {
      border-bottom: 1px solid var(--border); background: #f8fafd; height: 200px;
      position: relative; overflow: hidden; flex-shrink: 0;
    }
    .op-bpmn-panel .bpmn-canvas { width: 100%; height: 100%; }

    /* bpmn-js highlight markers */
    .bjs-container .highlight-incident .djs-visual > :nth-child(1) {
      stroke: #c62828 !important; stroke-width: 2.5px !important;
    }
    .bjs-container .highlight-active .djs-visual > :nth-child(1) {
      stroke: #1565c0 !important; stroke-width: 3px !important;
      fill: rgba(21,101,192,.08) !important;
    }
    .bjs-container .highlight-visited .djs-visual > :nth-child(1) {
      stroke: #1565c0 !important; stroke-width: 1.5px !important;
      stroke-dasharray: 5,3 !important; fill: rgba(21,101,192,.04) !important;
    }

    /* ── Model kind badges in definitions table ── */
    .badge-bpmn      { background: #e3f2fd; color: #1565c0; }
    .badge-cmmn      { background: #e8f5e9; color: #2e7d32; }
    .badge-dmn       { background: #fff3e0; color: #e65100; }
    .badge-archimate { background: #f3e5f5; color: #6a1b9a; }

    /* ── Example load button ── */
    .example-load-btn {
      padding: .4rem 1rem; font-size: .82rem; background: #f0f4ff;
      border: 1.5px solid var(--brand); border-radius: .4rem; color: var(--brand);
      cursor: pointer; font-weight: 600; white-space: nowrap;
    }
    .example-load-btn:hover { background: var(--brand); color: #fff; }
    .example-load-btn:disabled { opacity: .5; cursor: not-allowed; }

    /* ── Cases layout (reuse op-layout as base) ── */
    .badge-active   { background: #e8f5e9; color: #2e7d32; }
    .badge-completed { background: #e3f2fd; color: #1565c0; }
    .badge-incident  { background: #fbe9e7; color: #c62828; }
    .badge-terminated { background: #fafafa; color: #616161; }

    /* ── Decisions grid ── */
    .decisions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
    .decision-card {
      background: #fff; border: 1.5px solid var(--border); border-radius: .75rem;
      padding: 1.2rem 1.4rem; cursor: pointer; transition: border-color .15s, box-shadow .15s;
    }
    .decision-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(5,46,95,.1); }
    .decision-card h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--text); }
    .decision-card .dc-id { font-family: monospace; font-size: .78rem; color: var(--muted); }
    .decision-card .dc-meta { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
    /* DMN eval slide-in panel */
    .decision-eval {
      position: fixed; top: 0; right: -500px; width: 460px; height: 100vh;
      background: #fff; border-left: 1px solid var(--border); z-index: 250;
      box-shadow: -4px 0 24px rgba(5,46,95,.12); transition: right .25s ease;
      display: flex; flex-direction: column;
    }
    .decision-eval.open { right: 0; }
    .eval-header { background: var(--brand); color: #fff; padding: 1rem 1.2rem;
      display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .eval-header h3 { margin: 0; font-size: .95rem; }
    .eval-close { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; opacity: .8; }
    .eval-body { padding: 1.2rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; }
    .eval-result {
      margin-top: .5rem; padding: .9rem 1rem; background: #f0f4ff; border: 1px solid var(--brand);
      border-radius: .5rem; font-family: monospace; font-size: .82rem; white-space: pre-wrap;
    }
    .eval-result.error { background: #fbe9e7; border-color: #c62828; color: #c62828; }

    /* ── Architecture grid ── */
    .arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1rem; }
    .arch-card {
      background: #fff; border: 1.5px solid var(--border); border-radius: .75rem;
      padding: 1.2rem 1.4rem; cursor: pointer; transition: border-color .15s, box-shadow .15s;
    }
    .arch-card:hover { border-color: #6a1b9a; box-shadow: 0 4px 16px rgba(106,27,154,.1); }
    .arch-card h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--text); }
    .arch-layers { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
    .arch-lbadge { font-size: .72rem; padding: .2rem .5rem; border-radius: .3rem; font-weight: 600; }
    .layer-strategy    { background: #f3e5f5; color: #6a1b9a; }
    .layer-motivation  { background: #fce4ec; color: #c62828; }
    .layer-business    { background: #e8f5e9; color: #2e7d32; }
    .layer-application { background: #e3f2fd; color: #1565c0; }
    .layer-technology  { background: #fff3e0; color: #e65100; }
    .layer-physical    { background: #fafafa; color: #616161; }
    .layer-other       { background: #f5f5f5; color: #616161; }
    /* ArchiMate detail panel */
    .arch-detail {
      position: fixed; top: 0; right: -500px; width: 460px; height: 100vh;
      background: #fff; border-left: 1px solid var(--border); z-index: 250;
      box-shadow: -4px 0 24px rgba(5,46,95,.12); transition: right .25s ease;
      display: flex; flex-direction: column;
    }
    .arch-detail.open { right: 0; }

    /* ── AI Chat panel ── */
    #chat-panel {
      position: fixed; right: -440px; top: 0; width: 420px; height: 100vh;
      background: #fff; border-left: 1px solid var(--border); z-index: 300;
      display: flex; flex-direction: column; transition: right .25s ease;
      box-shadow: -4px 0 30px rgba(5,46,95,.16);
    }
    #chat-panel.open { right: 0; }
    .chat-header {
      background: var(--brand); color: #fff; padding: .9rem 1.2rem;
      display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    }
    .chat-header h3 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
    .chat-close { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; opacity: .8; }
    .chat-close:hover { opacity: 1; }
    .chat-insights-bar {
      background: #f0f4ff; border-bottom: 1px solid var(--border); padding: .5rem 1rem;
      font-size: .78rem; flex-shrink: 0; cursor: pointer;
    }
    .chat-insights-bar summary { font-weight: 700; color: var(--brand); cursor: pointer; }
    .chat-insight-item { padding: .2rem 0; display: flex; gap: .4rem; align-items: baseline; }
    .chat-insight-item .sev-low  { color: var(--green); font-size: .7rem; }
    .chat-insight-item .sev-med  { color: var(--accent); font-size: .7rem; }
    .chat-insight-item .sev-high { color: var(--red); font-size: .7rem; }
    .chat-msgs {
      flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem;
      background: #fafbff;
    }
    .chat-msg { display: flex; flex-direction: column; gap: .25rem; }
    .chat-msg.user  { align-items: flex-end; }
    .chat-msg.assistant { align-items: flex-start; }
    .chat-bubble {
      max-width: 88%; padding: .6rem .9rem; border-radius: 1rem; font-size: .85rem;
      line-height: 1.5; word-break: break-word;
    }
    .chat-msg.user .chat-bubble {
      background: var(--brand); color: #fff; border-bottom-right-radius: .25rem;
    }
    .chat-msg.assistant .chat-bubble {
      background: #fff; color: var(--text); border-bottom-left-radius: .25rem;
      border: 1px solid var(--border);
    }
    .chat-bubble.thinking { color: var(--muted); font-style: italic; background: #f5f5f5; }
    .chat-ts { font-size: .65rem; color: var(--muted); padding: 0 .25rem; }
    .chat-steps-wrap {
      max-width: 88%; margin-top: -.4rem;
    }
    .chat-steps-wrap details {
      font-size: .72rem; background: #f0f4ff; border: 1px solid var(--border);
      border-radius: .4rem; padding: .3rem .6rem; color: var(--muted);
    }
    .chat-steps-wrap summary { cursor: pointer; color: var(--brand); font-weight: 600; }
    .chat-steps-wrap ol { margin: .25rem 0; padding-left: 1.2rem; }
    .chat-footer {
      border-top: 1px solid var(--border); padding: .75rem 1rem;
      display: flex; gap: .5rem; flex-shrink: 0; background: #fff; align-items: flex-end;
    }
    #chat-input {
      flex: 1; resize: none; min-height: 52px; max-height: 120px; border: 1.5px solid var(--border);
      border-radius: .5rem; padding: .5rem .75rem; font-size: .85rem; font-family: inherit;
      line-height: 1.4; overflow-y: auto;
    }
    #chat-input:focus { outline: none; border-color: var(--brand); }
    .chat-send {
      padding: .55rem 1rem; background: var(--brand); color: #fff; border: none;
      border-radius: .5rem; cursor: pointer; font-weight: 700; font-size: .85rem;
      align-self: flex-end; flex-shrink: 0;
    }
    .chat-send:hover { background: #0a3b7a; }
    .chat-send:disabled { opacity: .5; cursor: not-allowed; }

    /* ── Sandbox plan banner ── */
    .plan-banner {
      background: linear-gradient(90deg, #052e5f 0%, #0060a0 100%);
      color: #fff; padding: .45rem 2.5rem; font-size: .78rem;
      display: flex; align-items: center; gap: 1rem;
    }
    .plan-banner-badge {
      background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
      border-radius: .3rem; padding: .15rem .55rem; font-weight: 800;
      letter-spacing: .05em; text-transform: uppercase; font-size: .7rem;
    }
    .plan-banner-text { flex: 1; }
    .plan-banner-cta {
      background: var(--accent); color: #fff; border: none; border-radius: .35rem;
      padding: .25rem .75rem; font-size: .75rem; font-weight: 700; cursor: pointer;
      text-decoration: none; transition: background .15s;
    }
    .plan-banner-cta:hover { background: #c45218; }

    /* ── Modeler tab ── */
    .modeler-shell {
      display: flex; flex-direction: column; height: calc(100vh - 130px);
      background: #fff; border: 1px solid var(--border); border-radius: .75rem;
      overflow: hidden; box-shadow: 0 1px 4px rgba(5,46,95,.06);
    }
    .modeler-toolbar {
      display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem;
      border-bottom: 1px solid var(--border); background: #f8fafd; flex-shrink: 0;
      flex-wrap: wrap;
    }
    .modeler-kind-tabs { display: flex; gap: .25rem; }
    .modeler-kind-tab {
      padding: .3rem .75rem; font-size: .8rem; border-radius: .35rem; cursor: pointer;
      border: 1.5px solid var(--border); background: #fff; color: var(--text);
      font-weight: 600; transition: border-color .12s, background .12s, color .12s;
    }
    .modeler-kind-tab.active {
      border-color: var(--brand); background: var(--brand); color: #fff;
    }
    .modeler-kind-tab:hover:not(.active) { border-color: var(--brand); color: var(--brand); }
    .modeler-actions { display: flex; gap: .4rem; margin-left: auto; align-items: center; }
    .modeler-btn {
      padding: .3rem .75rem; font-size: .8rem; border-radius: .35rem; cursor: pointer;
      border: 1.5px solid var(--border); background: #fff; color: var(--text);
      transition: border-color .12s; font-weight: 500;
    }
    .modeler-btn:hover { border-color: var(--brand); color: var(--brand); }
    .modeler-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
    .modeler-btn.primary:hover { background: #0a3b7a; }
    .modeler-btn:disabled { opacity: .45; cursor: not-allowed; }
    .modeler-msg { font-size: .78rem; min-height: 1.1rem; }
    .modeler-msg.ok  { color: var(--green); }
    .modeler-msg.err { color: var(--red); }
    .modeler-canvas { flex: 1; position: relative; overflow: hidden; }
    .modeler-canvas > div { width: 100%; height: 100%; }
    /* bpmn-js / dmn-js / cmmn-js container styles */
    .djs-container { width: 100%; height: 100%; }
    .modeler-placeholder {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 100%; gap: 1rem; color: var(--muted); font-size: .88rem;
    }
    .modeler-placeholder h3 { margin: 0; color: var(--brand); font-size: 1rem; }
    .modeler-placeholder p { margin: 0; max-width: 380px; text-align: center; line-height: 1.55; }
    .modeler-new-btn {
      padding: .5rem 1.4rem; background: var(--brand); color: #fff; border: none;
      border-radius: .5rem; font-size: .88rem; font-weight: 700; cursor: pointer;
    }
    .modeler-new-btn:hover { background: #0a3b7a; }

    /* ── Modeler: split layout with toolbox + canvas + property panel ── */
    .modeler-body {
      display: flex; flex: 1; overflow: hidden;
    }
    .modeler-palette-wrap {
      width: 48px; flex-shrink: 0; border-right: 1px solid var(--border);
      background: #f8fafd; overflow: hidden;
      /* bpmn-js injects its own .djs-palette inside here */
    }
    .modeler-canvas-wrap {
      flex: 1; position: relative; overflow: hidden;
    }
    .modeler-canvas-wrap > div { width: 100%; height: 100%; }
    .modeler-prop-panel {
      width: 260px; flex-shrink: 0; border-left: 1px solid var(--border);
      background: #fff; overflow-y: auto; display: none; flex-direction: column;
    }
    .modeler-prop-panel.open { display: flex; }
    .modeler-prop-header {
      background: var(--brand); color: #fff; padding: .65rem .9rem;
      font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
      flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    }
    .modeler-prop-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 1rem; opacity: .8; }
    .modeler-prop-body { padding: .8rem; flex: 1; }
    .modeler-prop-row { margin-bottom: .8rem; }
    .modeler-prop-label { font-size: .72rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; margin-bottom: .25rem; }
    .modeler-prop-input {
      width: 100%; padding: .35rem .5rem; font-size: .83rem;
      border: 1.5px solid var(--border); border-radius: .35rem; box-sizing: border-box;
      font-family: inherit;
    }
    .modeler-prop-input:focus { outline: none; border-color: var(--brand); }
    .modeler-prop-type { font-size: .78rem; color: var(--brand); background: #e8eeff; padding: .2rem .5rem; border-radius: .3rem; display: inline-block; margin-bottom: .6rem; }

    /* make bpmn-js palette overlay the modeler canvas (default bpmn-js behaviour) */
    .djs-palette { left: 0 !important; }

    /* ── Start Instance Modal ── */
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(5,46,95,.45); z-index: 400;
      display: none; align-items: center; justify-content: center;
    }
    .modal-overlay.show { display: flex; }
    .modal-box {
      background: #fff; border-radius: .9rem; width: 480px; max-width: 95vw;
      box-shadow: 0 8px 40px rgba(5,46,95,.22); overflow: hidden;
    }
    .modal-header {
      background: var(--brand); color: #fff; padding: .9rem 1.2rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    .modal-header h3 { margin: 0; font-size: .95rem; }
    .modal-close { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; opacity: .8; }
    .modal-body { padding: 1.4rem; }
    .modal-label { font-size: .78rem; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; margin-bottom: .3rem; margin-top: .9rem; }
    .modal-label:first-child { margin-top: 0; }
    .modal-input, .modal-textarea {
      width: 100%; padding: .5rem .75rem; border: 1.5px solid var(--border);
      border-radius: .45rem; font-size: .87rem; box-sizing: border-box; font-family: inherit;
    }
    .modal-input:focus, .modal-textarea:focus { outline: none; border-color: var(--brand); }
    .modal-textarea { min-height: 90px; resize: vertical; font-family: monospace; font-size: .82rem; }
    .modal-help { font-size: .75rem; color: var(--muted); margin-top: .2rem; }
    .modal-footer { display: flex; gap: .7rem; justify-content: flex-end; padding: .9rem 1.2rem; border-top: 1px solid var(--border); background: #f8fafd; }
    .modal-btn { padding: .45rem 1.1rem; border-radius: .4rem; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1.5px solid var(--border); background: #fff; color: var(--text); }
    .modal-btn:hover { border-color: var(--brand); color: var(--brand); }
    .modal-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
    .modal-btn.primary:hover { background: #c45218; border-color: #c45218; }
    .modal-btn:disabled { opacity: .5; cursor: not-allowed; }
    .modal-msg { font-size: .82rem; min-height: 1.1rem; margin-top: .5rem; color: var(--muted); }

    /* ── CMMN stage management ── */
    .cmmn-plan-item {
      background: #f8fafd; border: 1px solid var(--border); border-radius: .45rem;
      padding: .6rem .8rem; margin-bottom: .5rem;
    }
    .cmmn-plan-item-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
    .cmmn-plan-item-name { font-size: .84rem; font-weight: 600; color: var(--text); }
    .cmmn-plan-item-type { font-size: .7rem; background: #e3f2fd; color: #1565c0; padding: .1rem .4rem; border-radius: .25rem; }
    .cmmn-plan-item-state { font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: .25rem; margin-left: auto; }
    .cmmn-state-active    { background: #e8f5e9; color: #2e7d32; }
    .cmmn-state-available { background: #e3f2fd; color: #1565c0; }
    .cmmn-state-completed { background: #f3e5f5; color: #6a1b9a; }
    .cmmn-state-disabled  { background: #fafafa; color: #aaa; }
    .cmmn-stage-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
    .cmmn-stage-btn {
      padding: .25rem .65rem; font-size: .75rem; border-radius: .3rem; cursor: pointer;
      border: 1px solid var(--border); background: #fff; color: var(--text);
      transition: border-color .12s, background .12s; font-weight: 500;
    }
    .cmmn-stage-btn:hover { border-color: var(--brand); color: var(--brand); }
    .cmmn-stage-btn.danger { border-color: #c62828; color: #c62828; }
    .cmmn-stage-btn.danger:hover { background: #fbe9e7; }
    .cmmn-stage-btn.success { border-color: #2e7d32; color: #2e7d32; }
    .cmmn-stage-btn.success:hover { background: #e8f5e9; }

    /* ── Apps gallery ── */
    .apps-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
    .apps-header h2 { margin:0; font-size:1.1rem; color:var(--brand); }
    .apps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
    }
    @media(max-width:480px){ .apps-grid { grid-template-columns: repeat(2, 1fr); gap:.75rem; } }
    .app-card {
      background: #fff; border: 1px solid var(--border); border-radius: 12px;
      padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
      cursor: pointer; transition: border-color .2s, box-shadow .2s;
    }
    .app-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(5,46,95,.1); }
    .app-card-title { font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .app-card-icon  { font-size: 2rem; line-height: 1; }
    .app-card-name  { font-size: .9rem; font-weight: 700; color: var(--text); }
    .app-card-desc  { font-size: .78rem; color: var(--muted); line-height: 1.5; min-height: 1.2em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .app-status { display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: .2rem .55rem; border-radius: 99px; }
    .app-status.initialized { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
    .app-status.deployed    { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
    .app-status.archived    { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
    .app-card-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .4rem; border-top: 1px solid var(--border); }
    .app-act-btn { background: none; border: none; cursor: pointer; font-size: .9rem; color: var(--muted); padding: .2rem .35rem; border-radius: 4px; transition: background .15s; }
    .app-act-btn:hover { background: var(--bg2); color: var(--text); }
    .app-create-card {
      background: #fafbff; border: 2px dashed var(--border); border-radius: 12px;
      padding: 1rem; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: .5rem; cursor: pointer; min-height: 110px;
      transition: border-color .2s, background .2s; color: var(--muted);
    }
    .app-create-card:hover { border-color: var(--brand); background: #f0f4ff; color: var(--brand); }
    .app-create-card span { font-size: 1.5rem; }
    .app-create-card p { margin: 0; font-size: .82rem; font-weight: 600; }
    /* Template picker */
    .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .75rem; margin: 1rem 0; }
    .tpl-card {
      border: 2px solid var(--border); border-radius: 10px; padding: .85rem .75rem;
      cursor: pointer; text-align: center; transition: border-color .2s, background .2s;
    }
    .tpl-card:hover, .tpl-card.selected { border-color: var(--brand); background: #f0f4ff; }
    .tpl-card span { font-size: 1.6rem; display: block; margin-bottom: .35rem; }
    .tpl-card p { margin: 0; font-size: .78rem; font-weight: 600; color: var(--text); }
    .tpl-card small { font-size: .68rem; color: var(--muted); }
    /* App editor overlay */
    #app-editor-wrap {
      display: none; position: fixed; inset: 0; z-index: 650;
      flex-direction: column; background: #fff;
    }
    #app-editor-wrap.open { display: flex; }
    .app-editor-bar {
      display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem;
      background: var(--brand); color: #fff; flex-shrink: 0;
    }
    .app-editor-bar h3 { margin: 0; font-size: .9rem; font-weight: 700; flex: 1; }
    .app-editor-bar button { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: .3rem .7rem; font-size: .78rem; cursor: pointer; }
    .app-editor-bar button:hover { background: rgba(255,255,255,.28); }
    .app-editor-toolbar {
      display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem;
      background: #f5f7fa; border-bottom: 1px solid rgba(5,46,95,.08); flex-shrink: 0; flex-wrap: wrap;
    }
    .app-editor-toolbar .ifml-tool-btn {
      background: #eef1f6; color: #0d1a2e; border: 1px solid rgba(5,46,95,.15);
      border-radius: 6px; padding: .28rem .65rem; font-size: .78rem; cursor: pointer;
    }
    .app-editor-toolbar .ifml-tool-btn:hover { background: rgba(5,46,95,.08); }
    .app-editor-body { display: flex; flex: 1; overflow: hidden; }
    /* ── GrapesJS blocks sidebar (left) ── */
    #app-gjs-blocks {
      width: 160px; overflow-y: auto; background: #f5f7fa;
      border-right: 1px solid rgba(5,46,95,.08); flex-shrink: 0;
    }
    #app-gjs-blocks .gjs-block-categories { padding: .3rem 0; }
    #app-gjs-blocks .gjs-block-category { border-bottom: 1px solid rgba(5,46,95,.06); }
    #app-gjs-blocks .gjs-block-category .gjs-title {
      font-size: .65rem; font-weight: 700; color: #5a6a82;
      padding: .5rem .65rem .35rem; text-transform: uppercase; letter-spacing: .08em;
      background: transparent; cursor: pointer; user-select: none;
      display: flex; align-items: center; justify-content: space-between;
    }
    #app-gjs-blocks .gjs-block-category .gjs-title:hover { color: #0d1a2e; }
    #app-gjs-blocks .gjs-blocks-c {
      display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: .3rem .4rem .5rem;
    }
    #app-gjs-blocks .gjs-block {
      padding: .55rem .25rem .4rem; text-align: center; cursor: grab;
      border: 1px solid rgba(5,46,95,.1); border-radius: 7px;
      background: #fff;
      transition: border-color .15s, background .15s;
    }
    #app-gjs-blocks .gjs-block:hover { border-color: rgba(0,96,160,.7); background: rgba(0,96,160,.12); }
    #app-gjs-blocks .gjs-block svg { width: 22px; height: 22px; color: #5a6a82; display: block; margin: 0 auto; }
    #app-gjs-blocks .gjs-block-label { font-size: .62rem; color: #5a6a82; margin-top: .3rem; display: block; line-height: 1.2; }
    /* ── Canvas ── */
    #app-gjs { flex: 1; height: 100%; overflow: hidden; }
    /* Remove GrapesJS default dark editor background */
    #app-gjs .gjs-editor { background: transparent !important; }
    /* Hide empty panels container (we use our own sidebar) */
    #app-gjs .gjs-pn-panels { display: none !important; }
    /* Canvas fills the full container — no grey surround */
    #app-gjs .gjs-cv-canvas {
      background: #f0f0f0 !important;
      top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
      width: 100% !important; height: 100% !important;
      padding: 0 !important;
    }
    #app-gjs .gjs-cv-canvas__frames { width: 100% !important; height: 100% !important; }
    #app-gjs .gjs-frame-wrapper { width: 100% !important; margin: 0 !important; }
    #app-gjs .gjs-frame-wrapper__top { display: none !important; }
    /* ── Right panel (styles / traits / layers) ── */
    #app-gjs-right {
      width: 230px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden;
      background: #f5f7fa; border-left: 1px solid rgba(5,46,95,.08);
    }
    .gjs-right-tabs {
      display: flex; flex-shrink: 0;
      border-bottom: 1px solid rgba(5,46,95,.08);
    }
    .gjs-rtab {
      flex: 1; padding: .5rem .2rem; background: none; border: none; border-bottom: 2px solid transparent;
      color: #5a6a82; font-size: .7rem; font-weight: 700; cursor: pointer;
      text-transform: uppercase; letter-spacing: .06em; transition: color .15s, border-color .15s;
    }
    .gjs-rtab:hover { color: #0d1a2e; }
    .gjs-rtab.active { color: #0060a0; border-bottom-color: #0060a0; }
    .gjs-right-pane { flex: 1; overflow-y: auto; }
    /* Style manager sectors */
    #app-gjs-styles .gjs-sm-sector {
      border-bottom: 1px solid rgba(5,46,95,.07);
    }
    #app-gjs-styles .gjs-sm-sector-title {
      background: #eef1f6; color: #0d1a2e;
      font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
      padding: .5rem .75rem; cursor: pointer;
    }
    #app-gjs-styles .gjs-sm-sector-title:hover { background: rgba(5,46,95,.08); }
    #app-gjs-styles .gjs-sm-properties { padding: .5rem .5rem .65rem; }
    #app-gjs-styles .gjs-sm-property { margin-bottom: .55rem; }
    #app-gjs-styles .gjs-sm-label { font-size: .67rem; color: #5a6a82; margin-bottom: .2rem; display: block; text-transform: capitalize; }
    #app-gjs-styles .gjs-sm-field input,
    #app-gjs-styles .gjs-sm-field select {
      background: #fff; border: 1px solid rgba(5,46,95,.15);
      color: #0d1a2e; border-radius: 5px; font-size: .8rem; padding: .3rem .45rem;
      width: 100%; box-sizing: border-box;
    }
    #app-gjs-styles .gjs-sm-field input:focus,
    #app-gjs-styles .gjs-sm-field select:focus {
      border-color: #0060a0; outline: none;
    }
    /* Trait manager */
    #app-gjs-traits .gjs-trt-traits { padding: .5rem; }
    #app-gjs-traits .gjs-label { font-size: .67rem; color: #5a6a82; display: block; margin-bottom: .2rem; }
    #app-gjs-traits .gjs-field input,
    #app-gjs-traits .gjs-field select,
    #app-gjs-traits .gjs-field textarea {
      background: #fff; border: 1px solid rgba(5,46,95,.15);
      color: #0d1a2e; border-radius: 5px; font-size: .8rem; padding: .3rem .45rem;
      width: 100%; box-sizing: border-box;
    }
    /* Layers */
    #app-gjs-layers .gjs-layer { padding: .3rem .6rem; color: #0d1a2e; font-size: .78rem; cursor: pointer; }
    #app-gjs-layers .gjs-layer:hover,
    #app-gjs-layers .gjs-layer.gjs-hovered { background: rgba(0,96,160,.12); }
    #app-gjs-layers .gjs-layer.gjs-selected { background: rgba(0,96,160,.2); color: #0060a0; }
    #app-gjs-layers .gjs-layer-title { display: flex; align-items: center; gap: .35rem; }

    /* ── Mobile editor bottom nav ── */
    #app-editor-mobile-nav { display: none; }   /* hidden on desktop */

    @media (max-width: 768px) {
      /* Show bottom nav */
      #app-editor-mobile-nav {
        display: flex; align-items: center; justify-content: space-around;
        background: #f5f7fa; border-top: 1px solid rgba(5,46,95,.1);
        padding: .45rem .2rem;
        padding-bottom: calc(.45rem + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
        --aemn-h: 64px; /* used by drawer bottom offset */
      }
      .aemn-btn {
        display: flex; flex-direction: column; align-items: center; gap: .18rem;
        background: none; border: none; color: #5a6a82;
        padding: .38rem .42rem; border-radius: 9px; cursor: pointer;
        font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
        transition: color .15s, background .15s;
      }
      .aemn-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
      .aemn-btn.active { color: #0060a0; background: rgba(0,96,160,.15); }
      .aemn-btn:hover { color: #0d1a2e; }

      /* Hide desktop toolbar + side panels */
      .app-editor-toolbar { display: none !important; }
      #app-gjs-blocks { display: none !important; width: 0 !important; border: none !important; }
      #app-gjs-right  { display: none !important; width: 0 !important; border: none !important; }

      /* Canvas fills full width */
      .app-editor-body { position: relative; overflow: visible; }
      #app-gjs { flex: 1; min-width: 0; }

      /* Drawer — slides up from bottom when .mobile-open */
      #app-gjs-blocks.mobile-open,
      #app-gjs-right.mobile-open {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        left: 0; right: 0;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
        height: 62vh;
        width: auto !important;
        z-index: 655;
        background: #f5f7fa;
        border-radius: 14px 14px 0 0;
        border: 1px solid rgba(5,46,95,.14) !important;
        border-bottom: none !important;
        box-shadow: 0 -10px 40px rgba(5,46,95,.18);
        overflow: hidden;
      }
      /* Drag-handle pill */
      #app-gjs-blocks.mobile-open::before,
      #app-gjs-right.mobile-open::before {
        content: '';
        display: block; flex-shrink: 0;
        width: 36px; height: 4px;
        background: rgba(5,46,95,.22);
        border-radius: 2px;
        margin: .65rem auto .3rem;
      }
      /* Make block grid scrollable inside drawer */
      #app-gjs-blocks.mobile-open .gjs-block-categories { overflow-y: auto; flex: 1; }
      /* Blocks inside drawer: show full width list instead of 2-col grid */
      #app-gjs-blocks.mobile-open .gjs-blocks-c {
        display: grid; grid-template-columns: repeat(3,1fr);
      }
    }

    /* ── Workspace tab (IFML + GrapesJS) ── */
    .workspace-shell {
      display: flex; flex-direction: column; height: calc(100vh - 130px);
      background: #fff; border: 1px solid var(--border); border-radius: .75rem;
      overflow: hidden;
    }
    .workspace-toolbar {
      display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem;
      border-bottom: 1px solid var(--border); background: #f8fafd; flex-shrink: 0;
    }
    .workspace-mode-tab {
      padding: .3rem .75rem; font-size: .8rem; border-radius: .35rem;
      border: 1.5px solid var(--border); background: #fff; color: var(--text);
      cursor: pointer; font-weight: 600;
    }
    .workspace-mode-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
    .workspace-body { flex: 1; overflow: hidden; position: relative; }
    .workspace-panel { display: none; width: 100%; height: 100%; }
    .workspace-panel.active { display: block; }
    /* IFML canvas */
    #ifml-canvas { width: 100%; height: 100%; background: #fafbff; cursor: default; }
    .ifml-node {
      position: absolute; cursor: grab; user-select: none;
      border-radius: .5rem; font-size: .78rem; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
      text-align: center; padding: .4rem .6rem;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
    .ifml-node:active { cursor: grabbing; }
    .ifml-type-viewcontainer { background: #e3f2fd; border: 2px solid #1565c0; color: #1565c0; min-width: 120px; min-height: 60px; }
    .ifml-type-viewcomponent  { background: #e8f5e9; border: 2px solid #2e7d32; color: #2e7d32; min-width: 100px; min-height: 50px; border-radius: .25rem; }
    .ifml-type-action         { background: #fff3e0; border: 2px solid #e65100; color: #e65100; min-width: 80px; min-height: 80px; border-radius: 50%; }
    .ifml-type-event          { background: #f3e5f5; border: 2px dashed #6a1b9a; color: #6a1b9a; min-width: 80px; min-height: 50px; border-radius: .25rem; }
    .ifml-node.selected       { outline: 3px solid var(--accent); outline-offset: 2px; }
    .ifml-toolbar {
      position: absolute; top: 10px; left: 10px; z-index: 10;
      display: flex; flex-direction: column; gap: .35rem;
      background: #fff; border: 1px solid var(--border); border-radius: .5rem;
      padding: .4rem;
    }
    .ifml-tool-btn {
      padding: .35rem .6rem; font-size: .75rem; border-radius: .3rem; cursor: pointer;
      border: 1px solid var(--border); background: #fff; color: var(--text);
      white-space: nowrap; font-weight: 500; text-align: center;
    }
    .ifml-tool-btn:hover { border-color: var(--brand); color: var(--brand); background: #f0f4ff; }
    .ifml-tool-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
    /* GrapesJS overrides */
    #gjs { height: 100%; }
    #gjs .gjs-one-bg { background: var(--brand) !important; }
    #gjs .gjs-two-bg  { background: #0a3b7a !important; }

    /* Run button in definitions table */
    .run-btn {
      padding: .2rem .6rem; font-size: .73rem; border-radius: .3rem;
      background: var(--accent); color: #fff; border: none; cursor: pointer;
      font-weight: 700; white-space: nowrap; transition: background .12s;
    }
    .run-btn:hover { background: #c45218; }
    .run-btn.cmmn { background: #2e7d32; }
    .run-btn.cmmn:hover { background: #1b5e20; }

    /* ── App Profile overlay ── */
    #app-profile-wrap {
      display: none; position: fixed; inset: 0; z-index: 600;
      flex-direction: column; background: #f8fafc; overflow-y: auto;
    }
    #app-profile-wrap.open { display: flex; }
    .app-profile-bar {
      display: flex; align-items: center; gap: .6rem;
      padding: .7rem 1.1rem; background: var(--brand); color: #fff;
      position: sticky; top: 0; z-index: 10; flex-shrink: 0;
    }
    .app-profile-back {
      background: none; border: 1px solid rgba(255,255,255,.35); color: #fff;
      border-radius: 6px; padding: .35rem .8rem; cursor: pointer; font-size: .82rem;
      white-space: nowrap;
    }
    .app-profile-btn-sec {
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
      color: #fff; border-radius: 6px; padding: .35rem .85rem; cursor: pointer;
      font-size: .82rem; white-space: nowrap;
    }
    .app-profile-btn-sec:hover { background: rgba(255,255,255,.22); }
    .app-profile-btn-pri {
      background: var(--accent); border: none; color: #fff;
      border-radius: 6px; padding: .35rem .85rem; cursor: pointer;
      font-size: .82rem; font-weight: 700; white-space: nowrap;
    }
    .app-profile-btn-pri:hover { background: #c45218; }
    .app-profile-btn-pri:disabled { opacity: .45; cursor: default; }

    .app-profile-body {
      flex: 1; max-width: 920px; margin: 0 auto; width: 100%;
      padding: 1.5rem 1.25rem; box-sizing: border-box;
    }
    .app-profile-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;
    }
    @media(max-width:620px){ .app-profile-grid { grid-template-columns: 1fr; } }

    .app-profile-card {
      background: #fff; border: 1px solid var(--border); border-radius: 12px;
      padding: 1.15rem 1.25rem;
    }
    .app-profile-card h3 {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .09em; color: #64748b; margin: 0 0 .9rem;
    }
    .app-info-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .84rem;
    }
    .app-info-row:last-child { border: none; }
    .app-info-row .lbl { color: #64748b; }
    .app-info-row .val { font-weight: 600; color: var(--text); }

    /* Lifecycle stepper */
    .lifecycle-stepper { display: flex; margin: .5rem 0 1rem; border-radius: 8px; overflow: hidden; }
    .lifecycle-step {
      flex: 1; text-align: center; padding: .65rem .4rem; font-size: .78rem;
      font-weight: 600; cursor: pointer; border: 1.5px solid var(--border);
      border-right: none; transition: all .18s; color: #64748b;
    }
    .lifecycle-step:last-child { border-right: 1.5px solid var(--border); }
    .lifecycle-step.active { background: var(--brand); color: #fff; border-color: var(--brand); }
    .lifecycle-step.done   { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }

    /* Version list */
    .version-list { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; }
    .version-item {
      display: flex; align-items: center; gap: .6rem;
      padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .82rem;
    }
    .version-item:last-child { border: none; }
    .version-num  { font-weight: 700; color: var(--brand); min-width: 2rem; font-size: .78rem; }
    .version-label{ flex: 1; color: var(--text); }
    .version-date { font-size: .72rem; color: #94a3b8; white-space: nowrap; }
    .version-restore {
      font-size: .73rem; font-weight: 600; color: var(--accent);
      cursor: pointer; background: none; border: none; padding: 0;
    }
    .version-restore:hover { text-decoration: underline; }
    .version-empty { font-size: .82rem; color: #94a3b8; text-align: center; padding: 1rem 0; }

    /* Process link */
    .process-link-row {
      display: flex; align-items: center; gap: .6rem;
      padding: .5rem; border: 1.5px solid var(--border); border-radius: 8px;
      font-size: .84rem; cursor: pointer; transition: border-color .15s;
    }
    .process-link-row:hover { border-color: var(--brand); }
    .process-link-row .proc-icon { font-size: 1.2rem; }
    .process-link-row .proc-name { flex: 1; font-weight: 600; }
    .process-link-row .proc-unlink { font-size: .73rem; color: #94a3b8; cursor: pointer; }
    .process-link-row .proc-unlink:hover { color: var(--red); }

    /* Stage badge */
    .app-stage-badge {
      font-size: .7rem; font-weight: 700; padding: .22rem .65rem;
      border-radius: 99px; text-transform: uppercase; letter-spacing: .06em;
    }
    .app-stage-badge.draft      { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); }
    .app-stage-badge.staging    { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
    .app-stage-badge.production { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }

    /* Danger zone */
    .danger-zone {
      border: 1.5px solid #fca5a5; border-radius: 12px;
      padding: 1.1rem 1.25rem; background: #fff5f5; margin-top: 1rem;
    }
    .danger-zone h3 { color: #c62828; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 .65rem; }
    .btn-danger { background: #c62828; color: #fff; border: none; border-radius: 8px; padding: .55rem 1.1rem; cursor: pointer; font-size: .85rem; font-weight: 600; }
    .btn-danger:hover { background: #b71c1c; }

    /* Save version input row */
    .save-version-row { display: flex; gap: .5rem; margin-top: .75rem; }
    .save-version-row input { flex: 1; padding: .45rem .7rem; border: 1.5px solid var(--border); border-radius: 6px; font-size: .82rem; outline: none; }
    .save-version-row button { padding: .45rem .9rem; border-radius: 6px; background: var(--brand); color: #fff; border: none; font-size: .82rem; font-weight: 600; cursor: pointer; }

    /* ── Butterfly diagram ── */
    .butterfly-wrap { width:100%; overflow-x:auto; margin:1rem 0; }
    .butterfly-wrap svg { display:block; width:100%; max-width:720px; margin:0 auto; height:auto; }
    .butterfly-node { cursor:pointer; transition:opacity .15s; }
    .butterfly-node:hover { opacity:.8; }
    .butterfly-node rect { transition:filter .15s; }
    .butterfly-node:hover rect { filter:drop-shadow(0 2px 6px rgba(5,46,95,.2)); }
    .butterfly-caption { font-size:.76rem; color:#64748b; text-align:center; margin-top:.35rem; }

    /* ── Swim-lane flowchart modeler ── */
    #sec-flowchart { flex-direction:column; }
    #swim-app-ctx-banner {
      align-items:center; justify-content:space-between; gap:.75rem;
      background:#eef6ff; border:1px solid #bfdbfe; border-radius:.6rem;
      padding:.6rem 1rem; margin-bottom:1rem; font-size:.83rem; color:#1e40af;
    }
    #swim-app-ctx-banner button {
      background:none; border:none; cursor:pointer; font-size:.9rem; color:#64748b; flex-shrink:0;
    }
    .swim-header {
      display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem;
      border-bottom:1px solid var(--border); background:#fff; flex-shrink:0;
    }
    .swim-mode-btn {
      display:flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:600;
      color:#64748b; background:none; border:none; cursor:pointer; padding:.3rem .6rem;
      border-radius:6px; transition:all .15s;
    }
    .swim-mode-btn.active { color:var(--brand); background:#eef2ff; }
    .swim-mode-btn .eye { font-size:.95rem; }
    .swim-spacer { flex:1; }
    .swim-undo-btn {
      background:none; border:1px solid var(--border); border-radius:6px;
      width:2rem; height:2rem; cursor:pointer; font-size:.95rem; color:#64748b;
      display:flex; align-items:center; justify-content:center;
    }
    .swim-undo-btn:hover { background:var(--bg2); }
    .swim-back-btn {
      padding:.35rem .7rem; border-radius:6px; font-size:.82rem; font-weight:600; cursor:pointer;
      background:none; border:1px solid var(--border); color:var(--text); flex-shrink:0;
    }
    .swim-back-btn:hover { background:var(--bg2); }
    .swim-save-btn, .swim-deploy-btn {
      padding:.4rem .9rem; border-radius:6px; font-size:.82rem; font-weight:600; cursor:pointer;
    }
    .swim-save-btn   { background:none; border:1px solid var(--border); color:var(--text); }
    .swim-save-btn:hover { background:var(--bg2); }
    .swim-deploy-btn { background:var(--brand); border:none; color:#fff; }
    .swim-deploy-btn:hover { background:#041f42; }

    .swim-table-wrap { flex:1; overflow:auto; }
    .swim-table {
      border-collapse:collapse; min-width:100%;
      font-size:.84rem; font-family:inherit;
    }
    .swim-table th {
      background:#f8fafc; border:1px solid #e8ecf0; padding:.6rem .75rem;
      font-weight:600; color:#374151; white-space:nowrap; min-width:160px;
      text-align:left; position:sticky; top:0; z-index:2;
    }
    .swim-table th:first-child { min-width:180px; position:sticky; left:0; z-index:3; background:#f8fafc; }
    .swim-table td {
      border:1px solid #e8ecf0; padding:.4rem .5rem; vertical-align:top;
      min-width:160px; min-height:72px; position:relative;
    }
    .swim-table td:first-child {
      background:#fff; position:sticky; left:0; z-index:1; padding:.5rem .75rem;
      min-width:180px;
    }
    .swim-participant {
      display:flex; align-items:center; gap:.55rem; white-space:nowrap;
    }
    .swim-avatar {
      width:28px; height:28px; border-radius:50%; background:var(--brand);
      color:#fff; display:flex; align-items:center; justify-content:center;
      font-size:.72rem; font-weight:700; flex-shrink:0;
    }
    .swim-add-participant {
      background:var(--brand); color:#fff; border:none; border-radius:8px;
      padding:.35rem .85rem; font-size:.8rem; font-weight:700; cursor:pointer;
      white-space:nowrap;
    }
    .swim-task {
      background:#1a56db; color:#fff; border-radius:6px;
      padding:.4rem .6rem; font-size:.8rem; font-weight:600;
      cursor:pointer; margin:.2rem; display:inline-block; min-width:120px;
      position:relative;
    }
    .swim-task .swim-task-del {
      position:absolute; top:2px; right:4px; font-size:.7rem;
      opacity:.6; cursor:pointer; background:none; border:none; color:#fff;
    }
    .swim-cell-add {
      width:100%; height:60px; background:none; border:none; cursor:pointer;
      color:#94a3b8; font-size:1.4rem; display:flex; align-items:center;
      justify-content:center; transition:background .15s; border-radius:6px;
    }
    .swim-cell-add:hover { background:#f0f4ff; color:var(--brand); }
    .swim-add-stage {
      background:none; border:1px dashed var(--border); border-radius:8px;
      padding:.5rem 1rem; font-size:.82rem; color:#64748b; cursor:pointer;
      transition:all .15s; white-space:nowrap;
    }
    .swim-add-stage:hover { border-color:var(--brand); color:var(--brand); background:#f0f4ff; }
    .swim-add-row td { padding:.4rem .5rem; }
    @media(max-width:480px){
      .swim-table th, .swim-table td { min-width:120px; }
      .swim-table th:first-child, .swim-table td:first-child { min-width:130px; }
    }

    /* ── Profile header — two-row mobile layout ── */
    .app-profile-bar { flex-direction: column; padding: 0; gap: 0; }
    .apb-row1 {
      display: flex; align-items: center; gap: .55rem;
      padding: .6rem 1rem; width: 100%; box-sizing: border-box;
    }
    .apb-row2 {
      display: flex; align-items: center; gap: .4rem;
      padding: .35rem 1rem .55rem; flex-wrap: wrap;
    }
    @media(min-width:640px) {
      .app-profile-bar { flex-direction: row; padding: .55rem .9rem; align-items: center; gap: .6rem; }
      .apb-row1 { flex: 1; padding: 0; min-width: 0; }
      .apb-row2 { padding: 0; flex-shrink: 0; }
    }

    /* ── Guided checklist ── */
    .profile-checklist { display: flex; flex-direction: column; gap: .5rem; }
    .check-item {
      display: flex; align-items: center; gap: .75rem;
      padding: .55rem .75rem; border-radius: 8px; font-size: .87rem;
      background: #f8fafc; border: 1px solid var(--border);
      transition: background .15s;
    }
    .check-item.done { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
    .check-icon {
      width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #e2e8f0;
      color: #64748b; font-size: .75rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .check-item.done .check-icon { background: #166534; color: #fff; }
    .check-label { flex: 1; }
    .check-action {
      background: var(--brand); color: #fff; border: none; border-radius: 6px;
      padding: .25rem .65rem; font-size: .78rem; font-weight: 600; cursor: pointer;
    }
    .check-action:hover { background: #041f42; }

    /* ── Production share box ── */
    .share-box { padding: .25rem 0; }
    .share-intro { font-size: .88rem; font-weight: 600; color: var(--brand); margin: 0 0 .85rem; }
    .share-row { display: flex; gap: .5rem; margin-bottom: 1rem; }
    .share-input {
      flex: 1; padding: .55rem .75rem; border: 1.5px solid var(--border);
      border-radius: 8px; font-size: .8rem; font-family: monospace;
      color: #64748b; min-width: 0; background: #f8fafc;
    }
    .share-copy-btn {
      background: var(--brand); color: #fff; border: none; border-radius: 8px;
      padding: .55rem 1rem; font-size: .82rem; font-weight: 700; cursor: pointer;
      white-space: nowrap;
    }
    .share-copy-btn:hover { background: #041f42; }
    .share-upsell { border-top: 1px solid var(--border); padding-top: .85rem; }
    .upsell-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
    }
    @media(max-width:480px) { .upsell-grid { grid-template-columns: 1fr; } }
    .upsell-card {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding: .85rem .5rem; border-radius: 10px; text-decoration: none;
      border: 1.5px solid var(--border); transition: all .15s; gap: .25rem;
    }
    .upsell-card:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(5,46,95,.1); }
    .upsell-icon { font-size: 1.5rem; }
    .upsell-title { font-size: .78rem; font-weight: 600; color: var(--text); }
    .upsell-price { font-size: .82rem; font-weight: 700; }
    .upsell-card.free  .upsell-price { color: #2e7d32; }
    .upsell-card.paid  .upsell-price { color: var(--brand); }
    .upsell-card.premium .upsell-price { color: var(--accent); }

/* ── Tutorial onboarding card ──────────────────────────────────────────────── */
#tutorial-card {
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.tut-header {
  background: linear-gradient(135deg, #052e5f 0%, #0a4a8f 100%);
  padding: 1rem 1.25rem .85rem;
}
.tut-title-row {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem;
}
.tut-title {
  color: #fff; font-weight: 700; font-size: .95rem; flex: 1;
}
.tut-step-badge {
  background: rgba(255,255,255,.18); color: #fff; border-radius: 99px;
  padding: .2rem .65rem; font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.tut-progress-bar {
  height: 5px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden;
}
.tut-progress-fill {
  height: 100%; background: #e06520; border-radius: 99px;
  transition: width .4s ease;
}

.tut-steps {
  display: flex; flex-direction: column; gap: 0;
}

.tut-step {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.tut-step:last-child { border-bottom: none; }
.tut-step.tut-active  { background: #f0f7ff; }
.tut-step.tut-done    { background: #f6fef9; opacity: .75; }
.tut-step.tut-locked  { opacity: .45; pointer-events: none; }

.tut-step-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  background: #e2e8f0; color: var(--muted);
}
.tut-step.tut-active .tut-step-icon {
  background: var(--brand); color: #fff;
}
.tut-step.tut-done .tut-step-icon {
  background: #16a34a; color: #fff;
}

.tut-step-body { flex: 1; min-width: 0; }
.tut-step-label {
  font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: .2rem;
}
.tut-step.tut-done .tut-step-label { text-decoration: line-through; color: var(--muted); }
.tut-step-desc {
  font-size: .78rem; color: var(--muted); line-height: 1.5; margin-bottom: .5rem;
}
.tut-step.tut-active .tut-step-desc { color: #374151; }

.tut-step-cta {
  display: none;
  background: var(--brand); color: #fff; border: none; border-radius: 6px;
  padding: .35rem .85rem; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.tut-step.tut-active .tut-step-cta { display: inline-block; }
.tut-step-cta:hover { background: #041f42; }

/* Tutorial complete celebration banner */
#tut-complete-banner {
  display: none;
  background: linear-gradient(135deg, #052e5f, #0a4a8f);
  color: #fff; padding: 1rem 1.25rem;
  text-align: center; font-size: .9rem;
}
#tut-complete-banner strong { color: #fbbf24; }

/* Hide plan-banner on mobile when tutorial is visible */
@media (max-width: 767px) {
  .plan-banner-desktop-only { display: none !important; }
  /* Collapse stats grid on mobile until tutorial done */
  .db-stats-hidden-mobile { display: none !important; }
}

/* ── Tutorial beacon ────────────────────────────────────────── */
#tut-beacon {
  position: fixed;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 9998;
}
.tut-beacon-pulse {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent, #e06520);
  opacity: .9;
  animation: tut-pulse 1.6s ease-out infinite;
}
.tut-beacon-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent, #e06520);
  animation: tut-ring 1.6s ease-out infinite;
}
@keyframes tut-pulse {
  0%   { transform: scale(.8);  opacity: 1; }
  70%  { transform: scale(1.2); opacity: .6; }
  100% { transform: scale(.8);  opacity: 1; }
}
@keyframes tut-ring {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── Tutorial tooltip card ──────────────────────────────────── */
#tut-tooltip {
  position: fixed;
  width: 272px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(5,46,95,.18);
  padding: 1rem 1.1rem;
  z-index: 9999;
  animation: tut-tip-in .2s ease;
}
@keyframes tut-tip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tut-tip-step {
  font-size: .68rem;
  font-weight: 700;
  color: var(--accent, #e06520);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}
.tut-tip-title {
  font-size: .92rem;
  font-weight: 700;
  color: #052e5f;
  margin-bottom: .3rem;
  line-height: 1.3;
}
.tut-tip-body {
  font-size: .8rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: .65rem;
}
.tut-tip-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .65rem;
}
.tut-tip-cta {
  background: var(--accent, #e06520);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: .4rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.tut-tip-cta:hover { background: #c8561a; }
.tut-tip-skip {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: .75rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.tut-tip-skip:hover { color: #64748b; }

/* ── Tutorial toast ─────────────────────────────────────────── */
#tut-toast {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  background: #052e5f;
  color: #fff;
  border-radius: 10px;
  padding: .75rem 1.1rem;
  font-size: .88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .6rem;
  box-shadow: 0 6px 24px rgba(5,46,95,.25);
  z-index: 10001;
  transform: translateY(-120%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  max-width: 320px;
}
#tut-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

/* ── Tutorial share modal ───────────────────────────────────── */
#tut-share-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5,46,95,.45);
  animation: tut-overlay-in .25s ease;
}
@keyframes tut-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tut-share-card {
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 2rem 1.5rem 2.5rem;
  width: 100%;
  max-width: 480px;
  text-align: center;
  animation: tut-sheet-in .3s ease;
}
@keyframes tut-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.tut-share-emoji { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.tut-share-title { font-size: 1.25rem; font-weight: 800; color: #052e5f; margin-bottom: .4rem; }
.tut-share-sub   { font-size: .85rem; color: #64748b; margin-bottom: 1.5rem; line-height: 1.5; }
.tut-share-btns  { display: flex; flex-direction: column; gap: .65rem; }
.tut-share-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .75rem 1rem; border-radius: 9px; font-size: .88rem; font-weight: 700;
  cursor: pointer; border: none; text-decoration: none;
}
.tut-share-btn.linkedin { background: #0a66c2; color: #fff; }
.tut-share-btn.twitter  { background: #000; color: #fff; }
.tut-share-btn.copy     { background: #f1f5f9; color: #052e5f; border: 1.5px solid #e2e8f0; }
.tut-share-btn:hover { opacity: .88; }
.tut-share-close {
  margin-top: 1.1rem; background: none; border: none;
  color: #94a3b8; font-size: .82rem; cursor: pointer; text-decoration: underline;
}

/* ── Build-process banner (app profile) ─────────────────────── */
.app-build-process-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #fffbeb;
  border: 1.5px solid #fbbf24;
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  font-size: .84rem;
  color: #78350f;
  flex-wrap: wrap;
}
.app-build-process-banner button {
  background: var(--accent, #e06520);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: .4rem .9rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIREFLY
   ═══════════════════════════════════════════════════════════════════════════ */

.ff-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 1rem;
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 1.25rem;
  border: 1px solid #dde2ec;
  min-height: 300px;
}

/* SVG container */
.ff-svg {
  width: min(300px, 90vw);
  height: auto;
  filter: drop-shadow(0 0 18px currentColor);
}

/* Wings */
.ff-wing {
  fill: #94a3b8;
  opacity: .85;
  transition: fill .6s ease;
  transform-origin: 150px 148px;
  animation: ffBeat var(--ff-beat, 0s) ease-in-out infinite alternate;
}
.ff-wing-l { transform-origin: 148px 148px; }
.ff-wing-r { transform-origin: 152px 148px; }
.ff-wing-sim { stroke-dasharray: 8 4; stroke: currentColor; stroke-width: 1.5px; }

@keyframes ffBeat {
  from { transform: scaleX(1);   opacity: .85; }
  to   { transform: scaleX(.88); opacity: 1;   }
}
.ff-wing-l { animation-name: ffBeatL; }
.ff-wing-r { animation-name: ffBeatR; }
@keyframes ffBeatL {
  from { transform: scaleX(1);    }
  to   { transform: scaleX(.88);  }
}
@keyframes ffBeatR {
  from { transform: scaleX(1);    }
  to   { transform: scaleX(.88);  }
}

/* Body */
.ff-body {
  fill: #94a3b8;
  transition: fill .6s ease;
}

/* Antennae */
.ff-antenna { stroke: #475569; stroke-width: 2; }
.ff-ant-tip  { fill: #94a3b8; transition: fill .4s ease; }

/* Tail */
.ff-tail {
  fill: #94a3b8;
  opacity: .5;
  transition: fill .6s ease, opacity .4s ease;
  filter: blur(3px);
}

/* Labels inside SVG */
.ff-label {
  fill: rgba(5,46,95,.55);
  font-size: 10px;
  font-family: system-ui, sans-serif;
  pointer-events: none;
}

/* Status pill */
.ff-status-pill {
  margin-top: .75rem;
  padding: .3rem .9rem;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: #eef1f6;
  color: #5a6a82;
}
.ff-pill-green  { background: #dcfce7; color: #166534; }
.ff-pill-amber  { background: #fef3c7; color: #b45309; }
.ff-pill-red    { background: #fee2e2; color: #dc2626; }
.ff-pill-idle   { background: #eef1f6; color: #5a6a82; }

.ff-updated { font-size: .72rem; color: #475569; margin-top: .3rem; }

/* Simulate CTA inside stage */
.ff-sim-cta {
  margin-top: .9rem;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .5rem 1.2rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  animation: ffPulse 2s infinite;
}
@keyframes ffPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(29,78,216,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(29,78,216,0); }
}

/* Legend */
.ff-legend {
  position: absolute;
  top: .75rem; right: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: #94a3b8;
  background: rgba(5,46,95,.05);
  border-radius: 8px;
  padding: .3rem .6rem;
}
.ff-legend-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}
.ff-legend-dot.green { background: #22c55e; }
.ff-legend-dot.amber { background: #f59e0b; }
.ff-legend-dot.red   { background: #ef4444; }
.ff-legend-dot.white { background: #94a3b8; }
.ff-legend-dismiss {
  background: none; border: none; color: #64748b;
  cursor: pointer; padding: 0 .2rem; font-size: .85rem; line-height: 1;
}

/* Metric cards row */
.ff-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.ff-metric-card {
  background: var(--card-bg, #f5f7fa);
  border: 1px solid #dde2ec;
  border-radius: 10px;
  padding: .8rem 1rem;
  cursor: default;
}
.ff-metric-label { font-size: .72rem; color: #5a6a82; margin-bottom: .25rem; }
.ff-metric-val   { font-size: 1.5rem; font-weight: 700; color: #0d1a2e; }
.ff-metric-val.red { color: var(--red, #f87171); }

.ff-no-data { text-align: center; padding: 2rem; color: #5a6a82; }

/* ═══════════════════════════════════════════════════════════════════════════
   WORKSPACE SWITCHER (inside profile dropdown)
   ═══════════════════════════════════════════════════════════════════════════ */

.dbpd-ws-label {
  font-size: .68rem;
  color: #5a6a82;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .5rem 1rem .2rem;
}
.dbpd-ws-item {
  display: flex !important;
  align-items: center;
  gap: .5rem;
}
.dbpd-ws-badge {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.dbpd-ws-active { background: rgba(5,46,95,.08) !important; }
.dbpd-ws-create { border-top: 1px solid #dde2ec !important; margin-top: .25rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   WORKSPACE WIZARD
   ═══════════════════════════════════════════════════════════════════════════ */

.ws-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  margin-bottom: 1.25rem;
}
.ws-step {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #94a3b8;
  font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s;
}
.ws-step.active { background: var(--brand, #052e5f); color: #fff; }
.ws-step-line { flex: 1; max-width: 40px; height: 2px; background: #e2e8f0; }

.ws-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .4rem;
}
.ws-type-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: .8rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.ws-type-card:hover  { border-color: var(--brand, #052e5f); background: #f8fafd; }
.ws-type-card.selected { border-color: var(--brand, #052e5f); background: #eff6ff; }
.ws-type-card span  { display: block; font-size: 1.4rem; margin-bottom: .25rem; }
.ws-type-card small { display: block; font-size: .73rem; color: #64748b; margin-top: .2rem; }

.ws-color-grid {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}
.ws-color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: border-color .15s, transform .15s;
}
.ws-color-swatch:hover   { transform: scale(1.18); }
.ws-color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px #052e5f; }

.ws-review-card {
  background: #f8fafd;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.ws-checklist { display: flex; flex-direction: column; gap: .4rem; }
.ws-check-item { font-size: .84rem; color: #16a34a; }

/* Workspace grid */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.ws-card {
  background: var(--card-bg, #f5f7fa);
  border: 1px solid #dde2ec;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.ws-card-badge {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; color: #fff;
}
.ws-card-body { flex: 1; min-width: 0; }
.ws-card-name { font-weight: 700; font-size: .95rem; color: #0d1a2e; }
.ws-card-type { font-size: .72rem; color: #5a6a82; text-transform: capitalize; }
.ws-card-desc { font-size: .78rem; color: #94a3b8; margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-card-actions { display: flex; flex-direction: column; gap: .35rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIMULATE WORKER
   ═══════════════════════════════════════════════════════════════════════════ */

/* FAB */
.sim-fab {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 600;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #fff;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(29,78,216,.5);
  display: flex; align-items: center; justify-content: center;
  animation: ffPulse 2.5s infinite;
}
.sim-fab-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: .65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.sim-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .8rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: .4rem;
  transition: border-color .15s, background .15s;
}
.sim-job-row:hover    { border-color: #1d4ed8; background: #eff6ff; }
.sim-job-row.selected { border-color: #1d4ed8; background: #dbeafe; }
.sim-job-topic { font-size: .88rem; font-weight: 600; color: #1e293b; }
.sim-job-key   { font-size: .72rem; color: #64748b; font-family: monospace; }

.sim-scenarios { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.sim-scenario  {
  padding: .4rem .9rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  background: none;
  font-size: .82rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sim-scenario.active { border-color: #1d4ed8; background: #dbeafe; color: #1d4ed8; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONNECTOR LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.conn-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #5a6a82;
  border: 1.5px dashed #dde2ec;
  border-radius: 14px;
  margin-top: .5rem;
}
.conn-empty h3 { color: #0d1a2e; margin-bottom: .5rem; }

.conn-list { display: flex; flex-direction: column; gap: .5rem; }
.conn-list-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  background: var(--card-bg, #f5f7fa);
  border: 1px solid #dde2ec;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.conn-list-item:hover { border-color: #0060a0; }
.conn-list-icon  { font-size: 1.2rem; flex-shrink: 0; color: #0060a0; font-weight: 700; }
.conn-list-info  { flex: 1; min-width: 0; }
.conn-list-name  { font-weight: 700; color: #0d1a2e; font-size: .9rem; }
.conn-list-meta  { font-size: .75rem; color: #5a6a82; margin-top: .15rem; }

.conn-status-badge {
  padding: .2rem .55rem;
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.conn-status-draft    { background: #eef1f6;  color: #5a6a82; }
.conn-status-active   { background: #dcfce7;  color: #166534; }
.conn-status-inactive { background: #f1f5f9;  color: #5a6a82; }
.conn-status-error    { background: #fee2e2;  color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONNECTOR BUILDER (fullscreen)
   ═══════════════════════════════════════════════════════════════════════════ */

#conn-builder-wrap {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.conn-builder-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  background: #f5f7fa;
  border-bottom: 1px solid #dde2ec;
  flex-shrink: 0;
}
.conn-builder-bar button { flex-shrink: 0; }
.conn-builder-title-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #dde2ec;
  color: #0d1a2e;
  border-radius: 6px;
  padding: .35rem .7rem;
  font-size: .95rem;
  font-weight: 700;
}

.conn-builder-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* Left palette */
.conn-palette {
  width: 170px;
  flex-shrink: 0;
  background: #f5f7fa;
  border-right: 1px solid #dde2ec;
  overflow-y: auto;
  padding: .5rem 0;
}
.conn-palette-title {
  font-size: .7rem;
  color: #5a6a82;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .4rem .75rem .2rem;
}
.conn-palette-group { margin-bottom: .5rem; }
.conn-palette-label {
  font-size: .68rem;
  color: #475569;
  padding: .3rem .75rem .1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.conn-palette-item {
  padding: .45rem .75rem;
  font-size: .82rem;
  color: #94a3b8;
  cursor: grab;
  transition: background .15s, color .15s;
  border-radius: 4px;
  margin: 0 .3rem;
}
.conn-palette-item:hover { background: #eef1f6; color: #0d1a2e; }

/* Center canvas */
.conn-canvas-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
}
.conn-canvas {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.conn-canvas-empty {
  color: #475569;
  font-size: .88rem;
  border: 1.5px dashed #dde2ec;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  width: 100%;
}

.conn-activity {
  width: 100%;
  background: #f5f7fa;
  border: 1.5px solid #dde2ec;
  border-radius: 10px;
  padding: .7rem .9rem;
  cursor: pointer;
  transition: border-color .15s;
}
.conn-activity:hover    { border-color: #0060a0; }
.conn-activity.selected { border-color: #1d4ed8; background: #e8eeff; }
.conn-act-header {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.conn-act-icon       { font-size: 1rem; flex-shrink: 0; }
.conn-act-label      { font-size: .88rem; font-weight: 600; color: #0d1a2e; flex: 1; }
.conn-act-type-badge {
  font-size: .65rem;
  color: #475569;
  background: #eef1f6;
  border-radius: 4px;
  padding: .1rem .4rem;
}
.conn-act-del {
  background: none; border: none; color: #475569;
  cursor: pointer; font-size: .8rem; padding: 0 .2rem;
  opacity: 0; transition: opacity .15s;
}
.conn-activity:hover .conn-act-del { opacity: 1; }
.conn-act-del:hover { color: #dc2626 !important; }

.conn-act-flags { display: flex; gap: .35rem; margin-top: .4rem; flex-wrap: wrap; }
.acf-flag {
  font-size: .65rem;
  background: #1d4ed8;
  color: #bfdbfe;
  border-radius: 4px;
  padding: .1rem .4rem;
}

.conn-act-arrow {
  text-align: center;
  color: #475569;
  font-size: 1.1rem;
  line-height: 1.6;
  pointer-events: none;
}

/* Right ACF panel */
.conn-acf-panel {
  width: 260px;
  flex-shrink: 0;
  background: #f5f7fa;
  border-left: 1px solid #dde2ec;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conn-acf-tabs {
  display: flex;
  border-bottom: 1px solid #dde2ec;
  flex-shrink: 0;
}
.conn-acf-tab {
  flex: 1;
  padding: .55rem .3rem;
  font-size: .72rem;
  background: none;
  border: none;
  color: #5a6a82;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conn-acf-tab.active { color: #0060a0; border-bottom-color: #0060a0; }

.conn-acf-pane { flex: 1; overflow-y: auto; padding: .75rem; }
.acf-hint { font-size: .8rem; color: #64748b; }

.conn-acf-lib-item {
  display: block;
  padding: .55rem .6rem;
  background: #ffffff;
  border: 1px solid #dde2ec;
  border-radius: 7px;
  margin-bottom: .5rem;
  cursor: grab;
  font-size: .82rem;
  color: #94a3b8;
  transition: border-color .15s;
}
.conn-acf-lib-item:hover { border-color: #0060a0; color: #0d1a2e; }
.conn-acf-lib-item small { display: block; font-size: .7rem; color: #475569; margin-top: .15rem; }

/* ACF toggles */
.acf-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px solid #eef1f6;
  gap: .5rem;
}
.acf-toggle-label {
  display: flex;
  flex-direction: column;
  font-size: .82rem;
  color: #0d1a2e;
  flex: 1;
  min-width: 0;
}
.acf-toggle-label small { font-size: .68rem; color: #64748b; }

.acf-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.acf-switch input { opacity: 0; width: 0; height: 0; }
.acf-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #cbd5e1; border-radius: 20px;
  transition: .2s;
}
.acf-slider:before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.acf-switch input:checked + .acf-slider { background: #1d4ed8; }
.acf-switch input:checked + .acf-slider:before { transform: translateX(16px); }

.acf-edit-btn {
  background: none; border: 1px solid #dde2ec; color: #94a3b8;
  border-radius: 4px; padding: .15rem .35rem; cursor: pointer; font-size: .8rem;
}
.acf-edit-btn:hover { border-color: #0060a0; color: #0060a0; }

.conn-test-log { display: flex; flex-direction: column; gap: .25rem; }
.conn-test-log-row {
  font-size: .78rem;
  padding: .3rem .5rem;
  border-radius: 4px;
  background: #ffffff;
  color: #16a34a;
  font-family: monospace;
}

/* AI bar at bottom of builder */
.conn-ai-bar {
  border-top: 1px solid #dde2ec;
  background: #f5f7fa;
  padding: .6rem 1rem;
  flex-shrink: 0;
}
.conn-ai-inner { display: flex; gap: .5rem; }
.conn-ai-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #dde2ec;
  color: #0d1a2e;
  border-radius: 8px;
  padding: .45rem .8rem;
  font-size: .85rem;
}
.conn-ai-input:focus { outline: none; border-color: #0060a0; }
.conn-ai-input::placeholder { color: #475569; }
.conn-ai-btn {
  background: #1d4ed8; color: #fff; border: none;
  border-radius: 8px; padding: .45rem .8rem;
  font-size: .82rem; cursor: pointer;
}
.conn-ai-btn:hover { background: #1e40af; }
#conn-ai-response {
  font-size: .8rem;
  color: #94a3b8;
  margin-top: .35rem;
  max-height: 80px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* ── Mobile responsive overrides ─────────────────────────────── */
@media (max-width: 680px) {
  .ff-metrics { grid-template-columns: repeat(2, 1fr); }
  .conn-builder-body { flex-direction: column; }
  .conn-palette { width: 100%; height: 120px; overflow-x: auto; overflow-y: hidden;
    display: flex; padding: .4rem; border-right: none; border-bottom: 1px solid #dde2ec; }
  .conn-palette-group { display: flex; gap: .25rem; align-items: center; flex-shrink: 0; }
  .conn-acf-panel { width: 100%; height: 220px; border-left: none; border-top: 1px solid #dde2ec; }
  .ws-type-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   B-0001–B-0600  First-Run Experience — all new styles
═══════════════════════════════════════════════════════════════ */

/* ── System notices (B-0033, B-0056–B-0059) ── */
.sys-notice-bar {
  display: flex; align-items: center; gap: .6rem;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 8px; padding: .6rem .9rem;
  font-size: .83rem; margin: .75rem 0; color: #1e40af;
}
.sys-notice-text { flex: 1; }
.sys-notice-close {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; color: #0060a0; padding: 0 .2rem;
}
.sys-degraded-bar {
  background: #fffbeb; border: 1px solid #fcd34d;
  border-radius: 8px; padding: .55rem .9rem;
  font-size: .83rem; margin: .5rem 0; color: #92400e;
  display: flex; align-items: center; gap: .5rem;
}
.sys-degraded-bar button {
  background: none; border: none; cursor: pointer;
  font-size: .82rem; color: #b45309; margin-left: auto;
}

/* ── Quick actions (B-0034) ── */
.ov-quick-actions {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin: .75rem 0 1rem;
}
.qa-btn {
  background: #f8fafd; border: 1.5px solid var(--border);
  border-radius: 8px; padding: .45rem .85rem;
  font-size: .81rem; font-weight: 600; cursor: pointer;
  color: var(--brand); transition: all .15s;
  white-space: nowrap;
}
.qa-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Overview grid (B-0019–B-0034, B-0085–B-0094) ── */
.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.ov-card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 12px; padding: 1rem; display: flex;
  flex-direction: column; gap: .6rem;
}
.ov-card-header {
  display: flex; align-items: center; gap: .5rem;
}
.ov-card-title {
  font-size: .85rem; font-weight: 700; color: var(--brand);
  flex: 1;
}
.ov-card-actions { display: flex; align-items: center; gap: .3rem; }
.ov-icon-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; font-size: .78rem;
  padding: .2rem .45rem; color: var(--muted);
}
.ov-icon-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Activity feed (B-0019–B-0024) */
.ov-feed {
  display: flex; flex-direction: column; gap: .3rem;
  max-height: 240px; overflow-y: auto;
}
.ov-feed-item {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .3rem .1rem; border-bottom: 1px solid var(--border);
  font-size: .8rem;
}
.ov-feed-item:last-child { border-bottom: none; }
.ov-feed-evt-icon { font-size: .95rem; flex-shrink: 0; }
.ov-feed-body { flex: 1; }
.ov-feed-msg { color: var(--text); line-height: 1.3; }
.ov-feed-time { font-size: .72rem; color: var(--muted); }
.ov-feed-empty { font-size: .82rem; color: var(--muted); text-align: center; padding: 1rem 0; }
.ov-feed-ok { color: #16a34a; }
.ov-feed-filter {
  font-size: .76rem; border: 1px solid var(--border);
  border-radius: 5px; padding: .15rem .3rem;
  background: #fff; color: var(--text); cursor: pointer;
}

/* Sparkline + monthly stats (B-0025–B-0029) */
.ov-sparkline {
  width: 100%; height: 64px; display: block;
}
.ov-month-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .35rem; margin-top: .25rem;
}
.ov-mstat {
  display: flex; flex-direction: column; align-items: center;
  gap: .1rem;
}
.ov-mstat-val {
  font-size: 1.1rem; font-weight: 700; color: var(--brand);
}
.ov-mstat-lbl {
  font-size: .66rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; text-align: center;
}

/* Top processes (B-0030) */
.ov-top-procs {
  display: flex; flex-direction: column; gap: .35rem;
}
.ov-top-proc-row {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem;
}
.ov-top-proc-rank {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  width: 1.1rem; text-align: center;
}
.ov-top-proc-name { flex: 1; color: var(--text); font-weight: 500; }
.ov-top-proc-count {
  font-size: .76rem; background: #eff6ff; color: #1d4ed8;
  border-radius: 10px; padding: .1rem .45rem; font-weight: 600;
}
.ov-top-proc-bar {
  height: 4px; background: var(--accent); border-radius: 2px;
}

/* Recent failures (B-0031–B-0032) */
.ov-failures { display: flex; flex-direction: column; gap: .35rem; }
.ov-failure-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .4rem; background: #fef2f2; border-radius: 6px;
  font-size: .8rem;
}
.ov-failure-id { font-weight: 600; color: #dc2626; flex: 1; }
.ov-failure-reason { color: var(--muted); font-size: .75rem; }
.ov-failure-retry {
  background: none; border: 1px solid #fca5a5; color: #dc2626;
  border-radius: 5px; padding: .15rem .4rem; cursor: pointer;
  font-size: .72rem;
}
.ov-failure-retry:hover { background: #dc2626; color: #fff; }

/* Pro tips (B-0085–B-0086) */
.ov-pro-tip {
  font-size: .82rem; color: var(--text); line-height: 1.5;
  padding: .5rem .75rem; background: #f8fafd; border-radius: 8px;
  border-left: 3px solid var(--accent);
}

/* Daily challenge (B-0087–B-0094) */
.ch-body {
  font-size: .82rem; color: var(--text); line-height: 1.5;
}
.ch-streak {
  font-size: .75rem; font-weight: 700; color: #f59e0b;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 10px; padding: .1rem .4rem;
}
.ch-cta {
  background: #22c55e; color: #fff; border: none;
  border-radius: 8px; padding: .45rem .85rem; font-size: .8rem;
  font-weight: 600; cursor: pointer; margin-top: .5rem;
}
.ch-cta:hover { background: #16a34a; }
.ch-complete { color: #16a34a; font-weight: 600; }

/* Leaderboard (B-0091–B-0092) */
.ov-leaderboard { display: flex; flex-direction: column; gap: .25rem; }
.ov-lb-row {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; padding: .2rem 0;
}
.ov-lb-rank { font-size: .8rem; font-weight: 700; width: 1.5rem; text-align: center; }
.ov-lb-name { flex: 1; color: var(--text); }
.ov-lb-score { font-weight: 700; color: var(--brand); font-size: .78rem; }

/* ── Dashboard footer (B-0053–B-0059) ── */
.db-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  padding: .55rem 1.25rem;
  background: #f8fafd; border-top: 1px solid var(--border);
  font-size: .75rem; color: var(--muted);
  position: sticky; bottom: 0; z-index: 10;
}
.footer-item { color: var(--muted); }
.footer-sep { color: #94a3b8; }
.footer-link {
  background: none; border: none; cursor: pointer;
  font-size: .75rem; color: var(--muted); padding: 0;
  text-decoration: none;
}
.footer-link:hover { color: var(--accent); text-decoration: underline; }

/* ── Welcome modal (B-0001–B-0018) ── */
.welcome-box {
  max-width: 600px; text-align: center;
}
.welcome-role-msg {
  font-size: .82rem; color: var(--accent); font-weight: 600;
  margin-bottom: .5rem; min-height: 1.2em;
}
.welcome-title { font-size: 1.35rem; margin: .25rem 0; color: var(--brand); }
.welcome-subtitle { font-size: .88rem; color: var(--muted); margin-bottom: 1.25rem; }
.welcome-paths {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.welcome-path {
  display: flex; flex-direction: column; align-items: center;
  gap: .25rem; padding: .85rem 1.1rem; min-width: 130px;
  border: 2px solid var(--border); border-radius: 12px;
  background: #fff; cursor: pointer; transition: all .15s;
}
.welcome-path:hover {
  border-color: var(--accent); background: #eff6ff;
  transform: translateY(-2px);
}
.wp-icon { font-size: 1.5rem; }
.wp-label { font-size: .85rem; font-weight: 700; color: var(--brand); }
.wp-desc { font-size: .73rem; color: var(--muted); text-align: center; }

/* Demo section (B-0014–B-0018) */
.welcome-demo-row {
  display: flex; gap: 1rem; align-items: flex-start;
  text-align: left; margin-top: .5rem;
  padding-top: 1rem; border-top: 1px solid var(--border);
}
.welcome-demo-gif {
  flex: 0 0 180px;
}
.demo-gif-placeholder {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 2px dashed #93c5fd; border-radius: 10px;
  padding: 1rem; text-align: center; color: #1d4ed8;
}
.welcome-demo-actions {
  flex: 1; display: flex; flex-direction: column; gap: .6rem;
}
.demo-live {
  background: #f0fdf4; border: 1px solid #86efac;
  border-radius: 8px; padding: .4rem .7rem;
  font-size: .8rem; color: #166534;
}
.demo-how-works {
  font-size: .82rem;
}
.demo-how-works summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.demo-how-works p { margin: .4rem 0 0; color: var(--text); line-height: 1.5; }
.btn-secondary {
  background: none; border: 1.5px solid var(--accent);
  color: var(--accent); border-radius: 8px;
  padding: .45rem .85rem; font-size: .83rem; font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--accent); color: #fff; }
.welcome-skip {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .78rem; margin-top: .75rem;
  text-decoration: underline;
}

/* ── Keyboard shortcuts overlay (B-0035–B-0041) ── */
.ks-overlay {
  display: none; position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.ks-overlay.show { display: flex; }
.ks-box {
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(5,46,95,.2);
  padding: 1.5rem; width: min(380px, 92vw);
}
.ks-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
}
.ks-header h3 { margin: 0; font-size: 1rem; color: var(--brand); }
.ks-header button { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--muted); }
.ks-grid { display: flex; flex-direction: column; gap: .45rem; }
.ks-row {
  display: flex; align-items: center; gap: .75rem;
  font-size: .83rem; padding: .25rem 0;
}
.ks-row kbd {
  background: #f3f4f6; border: 1px solid #d1d5db;
  border-radius: 5px; padding: .15rem .5rem;
  font-size: .78rem; font-family: monospace; font-weight: 700;
  color: var(--brand); white-space: nowrap;
}
.ks-row span { color: var(--text); }

/* ── Global search (B-0042–B-0045) ── */
.gs-overlay {
  display: none; position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
  align-items: flex-start; justify-content: center;
  padding-top: 8vh;
}
.gs-overlay.show { display: flex; }
.gs-box {
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(5,46,95,.2);
  width: min(560px, 94vw);
  overflow: hidden;
}
.gs-input-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
}
.gs-icon { font-size: 1rem; color: var(--muted); flex-shrink: 0; }
.gs-input {
  flex: 1; border: none; outline: none;
  font-size: .95rem; color: var(--text);
  background: transparent;
}
.gs-close {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; color: var(--muted);
}
.gs-history {
  padding: .4rem .75rem;
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.gs-hist-tag {
  background: #f3f4f6; border-radius: 5px;
  padding: .15rem .5rem; font-size: .75rem;
  cursor: pointer; color: var(--muted); border: none;
}
.gs-hist-tag:hover { background: #eff6ff; color: var(--accent); }
.gs-results {
  max-height: 340px; overflow-y: auto; padding: .25rem 0;
}
.gs-hint { padding: .75rem 1rem; font-size: .82rem; color: var(--muted); }
.gs-group-label {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  padding: .45rem 1rem .2rem;
}
.gs-result-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem; cursor: pointer; font-size: .83rem;
}
.gs-result-item:hover { background: #f8fafd; }
.gs-result-icon { font-size: .9rem; flex-shrink: 0; }
.gs-result-main { flex: 1; }
.gs-result-id { font-weight: 600; color: var(--brand); }
.gs-result-sub { font-size: .75rem; color: var(--muted); }

/* ── Bug report modal (B-0060–B-0063) ── */
/* Uses existing .modal-* classes — no extra CSS needed */

/* ── Feedback stars (B-0064–B-0070) ── */
.fb-stars {
  display: flex; gap: .3rem; font-size: 1.6rem;
  color: #94a3b8; cursor: pointer; margin: .25rem 0;
}
.fb-star { transition: color .1s; }
.fb-star.active { color: #f59e0b; }
.fb-star:hover { color: #fbbf24; }

/* ── Survey (B-0071–B-0079) ── */
.survey-q { font-size: .9rem; color: var(--text); margin-bottom: .75rem; }
.survey-options { display: flex; flex-direction: column; gap: .4rem; }
.survey-opt {
  background: #f8fafd; border: 1.5px solid var(--border);
  border-radius: 8px; padding: .55rem .85rem;
  cursor: pointer; font-size: .83rem; text-align: left;
  transition: all .15s;
}
.survey-opt:hover { border-color: var(--accent); background: #eff6ff; }
.survey-opt.selected { border-color: var(--accent); background: #eff6ff; font-weight: 600; }
.survey-followup {
  margin-top: .75rem; padding: .75rem; background: #fffbeb;
  border: 1px solid #fcd34d; border-radius: 8px;
  font-size: .83rem; color: #92400e; line-height: 1.5;
}

/* ── Sandbox modal (B-0095–B-0112) ── */
.sandbox-box { max-width: 480px; }
.sandbox-limits { display: flex; flex-direction: column; gap: .35rem; margin: .75rem 0; }
.sb-limit { font-size: .83rem; color: var(--text); }
.sb-templates-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .5rem; margin-top: .25rem;
}
.sb-tpl {
  background: #f8fafd; border: 1.5px solid var(--border);
  border-radius: 8px; padding: .6rem .5rem;
  font-size: .82rem; cursor: pointer; text-align: center;
  transition: all .15s;
}
.sb-tpl:hover { border-color: var(--accent); background: #eff6ff; }
.sb-timer-row {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .35rem;
}
.sb-timer-label { font-size: .83rem; color: var(--muted); }
.sb-timer {
  font-size: 1.2rem; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.sb-progress {
  background: #e5e7eb; border-radius: 4px; height: 6px;
  margin-bottom: .75rem;
}
.sb-progress-fill {
  background: #22c55e; height: 100%; border-radius: 4px;
  transition: width 1s linear;
}
.sb-active-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.sb-share-link {
  background: #f8fafd; border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem .75rem;
  font-size: .78rem; font-family: monospace;
  word-break: break-all; margin-top: .5rem;
  color: var(--brand);
}
.sandbox-timer-pill {
  position: fixed; bottom: 48px; right: 90px; z-index: 500;
  background: #f0fdf4; border: 1.5px solid #86efac;
  border-radius: 20px; padding: .35rem .8rem;
  font-size: .8rem; font-weight: 700; color: #166534;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* ── Empty state framework (B-0113–B-0600) ── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 2.5rem 1rem;
  text-align: center; gap: .6rem;
}
.es-icon { font-size: 2.5rem; }
.es-title { font-size: .95rem; font-weight: 700; color: var(--brand); }
.es-body { font-size: .82rem; color: var(--muted); max-width: 280px; line-height: 1.5; }
.es-cta {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: .5rem 1rem; font-size: .83rem;
  font-weight: 600; cursor: pointer; margin-top: .25rem;
}
.es-cta:hover { opacity: .9; }
.es-secondary {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: .4rem .85rem; font-size: .8rem;
  cursor: pointer; color: var(--text);
}

/* ── Mobile overrides (all new sections) ── */
@media (max-width: 680px) {
  .ov-grid { grid-template-columns: 1fr; }
  .ov-month-stats { grid-template-columns: repeat(2, 1fr); }
  .welcome-demo-row { flex-direction: column; }
  .welcome-demo-gif { flex: none; }
  .welcome-paths { flex-direction: column; align-items: center; }
  .welcome-path { width: 80%; }
  .sb-templates-grid { grid-template-columns: 1fr; }
  .db-footer { gap: .2rem; padding: .4rem .75rem; }
  .ov-quick-actions { gap: .3rem; }
  .qa-btn { padding: .35rem .6rem; font-size: .76rem; }
}

/* ═══════════════════════════════════════════════════════════
   B-0601–B-0640  Workspace enhancements
═══════════════════════════════════════════════════════════ */
.ws-card-id { font-size: .68rem; color: var(--muted); font-family: monospace; margin-top: .15rem; }
.ws-badge-today {
  background: #ecfdf5; color: #059669; border: 1px solid #6ee7b7;
  border-radius: 999px; font-size: .68rem; font-weight: 600; padding: .1rem .5rem; margin-left: .5rem;
}
.ws-checklist { margin-top: .75rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ws-check-row {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem;
  border-bottom: 1px solid var(--border); font-size: .82rem;
}
.ws-check-row:last-child { border-bottom: none; }
.ws-check-icon { font-size: .85rem; width: 1.2rem; text-align: center; }
.ws-check-label { flex: 1; }
.ws-check-pct { font-size: .78rem; font-weight: 700; color: var(--brand); }
.ws-checklist-progress {
  height: 4px; background: var(--border); border-radius: 2px; margin: .5rem .75rem .75rem;
}
.ws-checklist-fill { height: 100%; background: var(--brand); border-radius: 2px; transition: width .3s; }
.ws-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: .68rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
/* Token management */
.ws-token-row {
  display: flex; align-items: center; gap: .5rem; padding: .4rem 0;
  border-bottom: 1px solid var(--border); font-size: .82rem;
}
.ws-token-row:last-child { border-bottom: none; }
.ws-token-val { font-family: monospace; font-size: .75rem; flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ws-token-copy, .ws-token-revoke {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: .2rem .55rem; font-size: .75rem; cursor: pointer; color: var(--text);
}
.ws-token-revoke { color: var(--red); border-color: var(--red); }

/* ═══════════════════════════════════════════════════════════
   B-0641–B-0680  Firefly enhancements
═══════════════════════════════════════════════════════════ */
/* Firefly idle-white animation */
@keyframes ff-idle-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.ff-idle .ff-wing-l, .ff-idle .ff-wing-r, .ff-idle .ff-body, .ff-idle .ff-tail {
  fill: #94a3b8 !important; animation: ff-idle-pulse 2.5s ease-in-out infinite;
}

/* Firefly mini dot (sidebar indicator) */
.ff-mini-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #94a3b8; margin-left: .35rem; flex-shrink: 0;
}
.ff-mini-dot.green  { background: #22c55e; }
.ff-mini-dot.amber  { background: #f59e0b; }
.ff-mini-dot.red    { background: #ef4444; animation: ff-idle-pulse 1s ease-in-out infinite; }

/* Firefly health score label */
.ff-health-score {
  text-align: center; font-size: .78rem; color: var(--muted);
  margin-top: .25rem; font-variant-numeric: tabular-nums;
}

/* Firefly updated timestamp */
.ff-updated { text-align: center; font-size: .7rem; color: var(--muted); margin-top: .2rem; }

/* Firefly tooltip */
.ff-tooltip {
  position: absolute; top: 1.5rem; right: 1.5rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: .75rem 1rem;
  max-width: 240px; box-shadow: 0 4px 16px rgba(0,0,0,.12); z-index: 200; font-size: .82rem;
}
.ff-tooltip strong { display: block; margin-bottom: .4rem; }
.ff-tooltip p { margin: 0 0 .6rem; color: var(--muted); }

/* Firefly drill-down */
.ff-drill-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 500;
  display: flex; justify-content: flex-end;
}
.ff-drill-panel {
  width: min(380px, 100vw); background: var(--bg); height: 100%;
  box-shadow: -4px 0 24px rgba(0,0,0,.15); display: flex; flex-direction: column;
  animation: slideInRight .2s ease;
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.ff-drill-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 1rem;
}
.ff-drill-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; font-size: .85rem; }
.ff-drill-metric { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.ff-drill-metric:last-child { border-bottom: none; }
.ff-drill-label { color: var(--muted); }
.ff-drill-val { font-weight: 700; }

/* Firefly mobile simplified indicator */
.ff-mobile-bar {
  display: none;
  gap: .5rem; align-items: center; padding: .4rem .75rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: .78rem; margin-top: .5rem;
}
@media (max-width: 640px) {
  .ff-stage { display: none; }
  .ff-mobile-bar { display: flex; }
}
.ff-mob-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
/* No-connector nudge */
.ff-no-conn-nudge {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px;
  font-size: .82rem; margin-top: .75rem;
}
/* Hover tooltip on SVG elements */
.ff-svg-tip {
  position: absolute; background: #eef1f6; color: #0d1a2e; border: 1px solid #dde2ec; border-radius: 6px;
  padding: .3rem .65rem; font-size: .75rem; pointer-events: none;
  white-space: nowrap; z-index: 300; display: none;
}

/* ═══════════════════════════════════════════════════════════
   B-0681–B-0740  Connector builder enhancements
═══════════════════════════════════════════════════════════ */
/* Unsaved pill */
.conn-unsaved-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  border-radius: 999px; font-size: .7rem; font-weight: 600; padding: .15rem .65rem;
}
/* Builder header with zoom + unsaved */
.conn-builder-top {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.conn-zoom-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: .2rem .55rem; font-size: .8rem; cursor: pointer; color: var(--text);
}
.conn-zoom-btn:hover { background: var(--bg-2); }
/* Connector logs */
.conn-logs-body {
  font-family: monospace; font-size: .78rem; background: #0f172a; color: #94a3b8;
  border-radius: 8px; padding: .75rem; min-height: 200px; max-height: 400px; overflow-y: auto;
  white-space: pre-wrap;
}
.conn-log-ok   { color: #4ade80; }
.conn-log-err  { color: #f87171; }
.conn-log-warn { color: #fbbf24; }
/* Connector version list */
.conn-ver-row {
  display: flex; align-items: center; gap: .6rem; padding: .5rem 0;
  border-bottom: 1px solid var(--border); font-size: .82rem;
}
.conn-ver-row:last-child { border-bottom: none; }
.conn-ver-badge {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; font-size: .7rem; padding: .1rem .45rem; font-weight: 700; flex-shrink: 0;
}
/* Template marketplace grid */
.conn-market-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem;
}
.conn-market-card {
  border: 1px solid var(--border); border-radius: 10px; padding: .75rem;
  text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.conn-market-card:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.conn-market-card .cm-icon { font-size: 1.8rem; margin-bottom: .35rem; }
.conn-market-card .cm-name { font-size: .82rem; font-weight: 600; }
.conn-market-card .cm-desc { font-size: .72rem; color: var(--muted); margin-top: .2rem; }

/* ═══════════════════════════════════════════════════════════
   B-0741–B-0788  Business Apps
═══════════════════════════════════════════════════════════ */
.biz-empty { text-align: center; padding: 3rem 1rem; }
.biz-empty-illus { font-size: 3.5rem; margin-bottom: .75rem; }
.biz-empty h3 { margin: 0 0 .4rem; }
.biz-empty p  { color: var(--muted); font-size: .88rem; margin: 0 auto .9rem; max-width: 360px; }
.biz-autopause {
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px;
  padding: .6rem 1rem; font-size: .85rem; margin-bottom: 1rem;
}
.biz-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem;
}
.biz-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 1rem;
  display: flex; flex-direction: column; gap: .45rem; cursor: pointer;
  transition: box-shadow .15s, border-color .15s; background: var(--bg);
}
.biz-card:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.07); }
.biz-card-header { display: flex; align-items: center; gap: .6rem; }
.biz-card-name { font-weight: 700; font-size: .95rem; flex: 1; }
.biz-tls-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  background: #ecfdf5; color: #059669; border: 1px solid #6ee7b7;
  border-radius: 6px; font-size: .68rem; font-weight: 700; padding: .1rem .45rem;
}
.biz-tls-badge.pending { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.biz-card-domain { font-size: .78rem; color: var(--muted); font-family: monospace; }
.biz-card-status { font-size: .75rem; display: flex; align-items: center; gap: .35rem; }
.biz-status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.biz-card-footer { display: flex; gap: .4rem; margin-top: .25rem; }
/* Wizard steps */
.biz-steps {
  display: flex; align-items: center; gap: .2rem;
  margin-bottom: 1.2rem; justify-content: center;
}
.biz-step {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--bg-2); border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--muted); flex-shrink: 0;
}
.biz-step.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.biz-step.done   { background: #22c55e; border-color: #22c55e; color: #fff; }
.biz-step-line { flex: 1; height: 2px; background: var(--border); }
/* Subdomain status */
.biz-subdomain-status { font-size: .75rem; margin-top: .3rem; min-height: 1rem; }
.biz-subdomain-status.ok    { color: #059669; }
.biz-subdomain-status.taken { color: var(--red); }
.biz-subdomain-status.check { color: var(--muted); }
/* Definition picker */
.biz-defs-list { display: flex; flex-direction: column; gap: .4rem; }
.biz-def-row {
  display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  font-size: .82rem; transition: background .15s;
}
.biz-def-row:hover { background: var(--bg-2); }
.biz-def-row input[type=checkbox] { accent-color: var(--brand); }
/* CNAME box */
.biz-cname-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; }
.biz-app-url { font-family: monospace; font-size: .88rem; color: var(--brand); font-weight: 600; }
/* Review card */
.biz-review-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: .85rem; font-size: .85rem; }
.biz-review-row { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.biz-review-row:last-child { border-bottom: none; }
/* Detail panel */
.biz-detail-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; font-size: .82rem; }
.biz-detail-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--border); margin-bottom: .75rem; }
.biz-detail-tab {
  padding: .35rem .75rem; background: none; border: none; cursor: pointer;
  font-size: .82rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.biz-detail-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.biz-detail-pane { font-size: .85rem; }
/* Activity log */
.biz-activity-log { display: flex; flex-direction: column; gap: .4rem; max-height: 300px; overflow-y: auto; }
.biz-log-row { display: flex; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .8rem; }
.biz-log-time { color: var(--muted); white-space: nowrap; }
.biz-log-event { flex: 1; }
/* Credit breakdown */
.biz-credit-breakdown { display: flex; flex-direction: column; gap: .35rem; }
.biz-credit-row { display: flex; justify-content: space-between; font-size: .82rem; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.biz-credit-row:last-child { border-bottom: none; }
/* Subdomain list */
.biz-subdomain-list { display: flex; flex-direction: column; gap: .4rem; }
.biz-sub-row {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem;
  border: 1px solid var(--border); border-radius: 8px; font-size: .82rem;
}
.biz-sub-row .biz-sub-domain { flex: 1; font-family: monospace; font-size: .78rem; }

/* Mobile overrides (new sections) */
@media (max-width: 680px) {
  .biz-grid { grid-template-columns: 1fr; }
  .ff-drill-panel { width: 100vw; }
  .conn-market-grid { grid-template-columns: 1fr 1fr; }
}


    /* A-0181: Welcome banner */
    .welcome-banner { margin-bottom: 1rem; }
    .welcome-banner-inner { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg,#052e5f,#1a56db); color: #fff; border-radius: 10px; padding: 1rem 1.25rem; }
    .welcome-banner-icon { font-size: 1.8rem; flex-shrink: 0; }
    .welcome-banner-body { flex: 1; font-size: 0.9rem; line-height: 1.5; }
    .welcome-banner-body a { color: #93c5fd; }
    .welcome-banner-close { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 1.2rem; padding: 0.25rem; flex-shrink: 0; }
    .welcome-banner-close:hover { color: #fff; }

    /* A-0184: Low-credit banner */
    .low-credit-banner { display: flex; align-items: center; gap: 0.75rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 0.65rem 1rem; margin-bottom: 1rem; font-size: 0.88rem; color: #92400e; }
    .lc-topup-btn { background: #f59e0b; color: #fff; border: none; border-radius: 6px; padding: 0.35rem 0.85rem; cursor: pointer; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
    .lc-dismiss-btn { background: none; border: none; cursor: pointer; color: #92400e; margin-left: auto; font-size: 1rem; }

    /* A-0186: Top-up modal */
    .topup-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9800; display: flex; align-items: center; justify-content: center; padding: 1rem; }
    .topup-modal-inner { background: var(--bg2,#fff); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; max-width: 600px; width: 100%; position: relative; }
    .topup-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
    .topup-modal-header h3 { margin: 0; font-size: 1.2rem; }
    .topup-modal-close { background: none; border: none; cursor: pointer; font-size: 1.4rem; color: var(--muted); }
    .topup-packs { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.85rem; margin-bottom: 1.25rem; }
    @media(max-width:560px){ .topup-packs { grid-template-columns: 1fr; } }
    .topup-pack { border: 2px solid var(--border); border-radius: 12px; padding: 1rem; cursor: pointer; text-align: center; position: relative; transition: border-color 0.15s; }
    .topup-pack:hover { border-color: var(--brand-mid,#3b82f6); }
    .topup-pack.selected { border-color: var(--brand,#1a56db); background: rgba(26,86,219,0.05); }
    .topup-pack-featured { border-color: var(--brand,#1a56db); }
    .topup-pack-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--brand,#1a56db); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 20px; white-space: nowrap; }
    .topup-pack-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.25rem; }
    .topup-pack-credits { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.5rem; }
    .topup-pack-price { font-size: 1.4rem; font-weight: 700; color: var(--brand,#1a56db); }
    .topup-pack-per { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
    .topup-pay-btn { width: 100%; padding: 0.8rem; background: var(--brand,#1a56db); color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
    .topup-pay-btn:hover { opacity: 0.9; }
    .topup-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── A-0418–A-0421: In-app notification bell ─────────────────────────────── */
.db-notif-wrap { position: relative; }
.db-notif-btn {
  background: none; border: none; cursor: pointer;
  color: var(--nav-icon,#94a3b8); padding: 0.4rem;
  border-radius: 8px; position: relative; line-height: 0;
  transition: color 0.15s;
}
.db-notif-btn:hover { color: var(--brand,#1a56db); }
.db-notif-badge {
  position: absolute; top: 0; right: 0;
  background: #ef4444; color: #fff;
  font-size: 0.65rem; font-weight: 700;
  min-width: 1.1rem; height: 1.1rem;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  padding: 0 0.2rem;
}
.db-notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 320px; background: var(--bg,#fff);
  border: 1px solid var(--border,#e2e8f0); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 1000;
  overflow: hidden;
}
.db-notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border,#e2e8f0);
  font-size: 0.85rem; font-weight: 600;
}
.db-notif-mark-all {
  background: none; border: none; cursor: pointer;
  color: var(--brand,#1a56db); font-size: 0.78rem; font-weight: 500;
}
.db-notif-list { max-height: 360px; overflow-y: auto; }
.db-notif-empty { padding: 1.5rem; text-align: center; color: var(--muted,#64748b); font-size: 0.85rem; }
.db-notif-item {
  display: flex; gap: 0.75rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border,#e2e8f0);
  cursor: pointer; transition: background 0.1s;
}
.db-notif-item:last-child { border-bottom: none; }
.db-notif-item:hover { background: var(--bg2,#f8fafc); }
.db-notif-item.unread { background: #eff6ff; }
.db-notif-item.unread:hover { background: #dbeafe; }
.db-notif-icon {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
}
.db-notif-icon.system  { background: #dbeafe; }
.db-notif-icon.process { background: #dcfce7; }
.db-notif-icon.marketing { background: #fef9c3; }
.db-notif-icon.error   { background: #fee2e2; }
.db-notif-body { flex: 1; min-width: 0; }
.db-notif-title { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.15rem; }
.db-notif-desc  { font-size: 0.78rem; color: var(--muted,#64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-notif-time  { font-size: 0.72rem; color: var(--muted,#94a3b8); margin-top: 0.2rem; }

/* A-0658: Contact support button */
.db-support-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 0.4rem; border-radius: 8px; line-height: 0;
  color: var(--nav-icon,#94a3b8); transition: color 0.15s;
}
.db-support-btn:hover { color: var(--brand,#1a56db); }