.aipa-seq { max-width: 1280px; }
      .aipa-seq-notice { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; font-size: .82rem; color: var(--muted); line-height: 1.6; }
      .aipa-seq-notice strong { color: var(--ink); }
      /* position+z-index needed so the toolbar's own stacking level beats .aipa-seq-grid's (each
         .aipa-seq-card is .aipa-glass, which sets isolation:isolate -- its own stacking context at
         z-index:auto/1, same as the toolbar's ambient level) -- without this, the toolbar's Top Up
         Balance dropdown (z-index:1000, but only relative to ITS OWN local stacking context) is capped
         by the toolbar box itself, which paints BEHIND the grid since the grid comes later in DOM order
         at the same effective z-index (confirmed live: the open dropdown rendered behind the card row
         below it instead of floating in front, exactly where it overlapped). */
      .aipa-seq-toolbar { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; position: relative; z-index: 3; }
      .aipa-seq-search { background: var(--field-bg); border: 1px solid var(--field-border); color: var(--ink); border-radius: 8px; padding: 8px 12px; font-size: .82rem; width: 220px; max-width: 100%; }
      .aipa-seq-search::placeholder { color: #64748b; opacity: 1; }
      .aipa-seq-search:focus { outline: none; border-color: var(--glow, #818cf8); box-shadow: 0 0 0 3px var(--glow-dim, rgba(99, 102, 241, .25)); }
      .aipa-seq-topup { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: .82rem; }
      .aipa-seq-topup__balance { color: var(--muted); }
      .aipa-seq-topup__balance strong { color: #fff; }
      .aipa-seq-topup__menu { position: relative; }
      .aipa-seq-topup__menu summary { list-style: none; cursor: pointer; }
      .aipa-seq-topup__menu summary::-webkit-details-marker { display: none; }
      .aipa-seq-topup__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000; min-width: 340px; max-height: 70vh; overflow-y: auto; background: linear-gradient(160deg, rgba(19, 27, 51, .98), rgba(28, 20, 64, .98)); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 20px 45px rgba(2,6,23,.75); }
      .aipa-seq-topup__list a { display: block; padding: 6px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .78rem; }
      .aipa-seq-topup__list a:hover { background: rgba(255,255,255,.12); }
      /* Overrides the block display above (needs equal-or-higher specificity: .aipa-seq-topup__list a
         already carries a class+tag selector) -- only the real Top Up package links get the .aipa-seq-
         topup__pkg class, so Run Now's <button> items (same shared list/menu, no images) are unaffected. */
      .aipa-seq-topup__list a.aipa-seq-topup__pkg { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: .84rem; }
      .aipa-seq-topup__pkg img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
      .aipa-seq-topup__pkg span { line-height: 1.4; }
      /* Run Now's items are real <button>s (not <a>, since they trigger a fetch rather than navigate), and
         once the JS portal (aipa-sequences-shared.js) moves this list to be a direct child of <body> to
         escape ancestor clipping, they're no longer inside .aipa-dash/.aipa-seq-actions -- the ONLY rules
         that ever styled a front-end <button class="button"> at all (wp-admin's own .button styling never
         loads outside wp-admin). Without this they fell back to the raw browser default button chrome
         (light grey, black text, 2px outset border) -- confirmed live. Styled to match the Top Up Balance
         items right above (.aipa-seq-topup__list a) for visual consistency within this one dropdown, rather
         than the card-action-row button look that no longer fits once this is a standalone floating list. */
      .aipa-seq-topup__list button.button { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; background: transparent; border: 0; color: var(--ink); font-size: .78rem; cursor: pointer; }
      .aipa-seq-topup__list button.button:hover { background: rgba(255,255,255,.12); }
      /* Run Now reuses this same .aipa-seq-topup__menu/__list dropdown (originally built for the Top Up
         Balance widget, which sits flush at the toolbar's far right, where the shared rule's `right: 0`
         correctly right-aligns it). Run Now's own <details> instead sits mid-row in each card's narrow
         action bar, so that same `right: 0` anchored its list off the LEFT edge of the page by ~78px --
         confirmed live at 1400px, 480px and 380px viewport widths alike, so this isn't a narrow-screen edge
         case, it's wrong at every width. Making this instance's own <details> position:static hands its
         absolutely-positioned list up to the next positioned ancestor -- .aipa-seq-card itself (already
         position:relative via .aipa-glass) -- so left:0/right:0 here spans the full card width (inset by
         the card's own padding), which can't overflow the card regardless of where Run Now happens to sit
         among its sibling buttons. */
      .aipa-seq-actions .aipa-seq-topup__menu { position: static; }
      .aipa-seq-actions .aipa-seq-topup__list { left: 0; right: 0; width: auto; min-width: 0; }
      .aipa-seq-model-cost { margin: 8px 0 14px; }
      .aipa-seq-model-cost:empty { margin: 0; }
      .aipa-seq-model-cost__label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
      .aipa-seq-feecards { display: flex; flex-wrap: wrap; gap: 10px; }
      .aipa-seq-feecard { flex: 0 1 130px; min-width: 120px; background: rgba(255, 255, 255, .035); border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 14px; }
      .aipa-seq-feecard__label { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
      .aipa-seq-feecard__value { display: block; font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.2; }
      .aipa-seq-feecard__value--pending { font-size: .82rem; font-weight: 600; font-style: italic; color: var(--muted); }
      .aipa-seq-feecard__unit { font-size: .68rem; font-weight: 600; color: var(--muted); margin-left: 3px; }
      .aipa-seq-feecard--accent { border-color: color-mix(in srgb, var(--seq-accent, #818cf8) 45%, var(--glass-border)); background: color-mix(in srgb, var(--seq-accent, #818cf8) 10%, transparent); }
      .aipa-seq-feecard--accent .aipa-seq-feecard__value { color: var(--seq-accent, #a5b4fc); }
      .aipa-seq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
      .aipa-seq-card { border-top: 3px solid var(--seq-accent, #818cf8); border-radius: 18px; padding: 18px 20px; }
      .aipa-seq-card__group { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
      .aipa-seq-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
      .aipa-seq-card__name { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; }
      .aipa-seq-card__subtitle { font-size: .8rem; color: var(--muted); margin: 2px 0 10px; font-style: italic; }
      .aipa-seq-badge { flex: none; display: inline-flex; align-items: center; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
      .aipa-seq-badge--active { background: rgba(16, 185, 129, .18); color: #34d399; }
      .aipa-seq-badge--archived { background: rgba(148, 163, 184, .18); color: var(--muted); }
      .aipa-seq-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
      .aipa-seq-tag { font-size: .66rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); }
      .aipa-seq-device-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: 10px; margin-bottom: 8px; background: rgba(255, 255, 255, .03); }
      .aipa-seq-device-row__info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .aipa-seq-device-status { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
      .aipa-seq-device-status.is-online { background: rgba(16, 185, 129, .18); color: #34d399; }
      .aipa-seq-device-status.is-offline { background: rgba(148, 163, 184, .18); color: var(--muted); }
      .aipa-seq-progress__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
      .aipa-seq-progress__fill { height: 100%; background: linear-gradient(90deg, var(--seq-accent, #818cf8), #6366f1); border-radius: 999px; }
      .aipa-seq-progress__label { font-size: .72rem; color: var(--muted); margin-top: 5px; }
      .aipa-seq-costs { display: flex; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--glass-border); }
      .aipa-seq-stat { display: flex; flex-direction: column; }
      .aipa-seq-stat__num { font-size: 1rem; font-weight: 700; color: var(--seq-accent, #a5b4fc); }
      .aipa-seq-stat__na { font-size: .8rem; font-weight: 600; color: var(--muted); font-style: italic; }
      .aipa-seq-stat__lbl { font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
      .aipa-seq-meta { font-size: .7rem; color: var(--muted); margin-top: 10px; }
      .aipa-seq-empty { padding: 50px 20px; text-align: center; color: var(--muted); }
      .aipa-seq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--glass-border); }
      .aipa-seq-actions .button { font-size: .76rem !important; padding: 2px 10px !important; height: auto !important; line-height: 1.8 !important; }
      /* Run Now is legitimately disabled (via the button's own disabled attribute, not this CSS) whenever
         the linked Sequence has no assigned Agent Member -- aipa_seq_run_sequence_now()/psoo_rest_agents_run()
         have no path to run a bare task list with no agent binding (V1 scope). Without this rule a disabled
         button rendered visually identical to every other button here, so clicking it looked like nothing
         happened rather than "not available yet" -- the disabled title tooltip explains why on hover, but
         only after a user notices there's a reason to hover in the first place. */
      .aipa-seq-actions .button[disabled] { opacity: .45; cursor: not-allowed; }
      .aipa-seq-btn-approve { background: #10b981 !important; border-color: #059669 !important; color: #fff !important; }
      .aipa-seq-btn-approve:hover { background: #059669 !important; }
      .aipa-seq-approval-result { border-radius: 10px; padding: 10px 14px; margin: -6px 0 14px; font-size: .8rem; line-height: 1.5; }
      .aipa-seq-approval-result--ok { background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .35); color: #34d399; }
      .aipa-seq-approval-result--unsupported { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--muted); }
      .aipa-seq-approval-result--error { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .35); color: #f87171; }
      .aipa-seq-field { display: block; margin-bottom: 14px; }
      .aipa-seq-field__label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
      /* Neither the shared .aipa-dash input/select rule nor .aipa-seq-field itself sets a width, so fields
         default to intrinsic sizing -- invisible as plain document flow, but glaring dead space once a
         field sits inside a visibly-bordered .aipa-glass card (e.g. Status next to a full-width Name). */
      .aipa-seq-field > input[type=text], .aipa-seq-field > input[type=number], .aipa-seq-field > select, .aipa-seq-field > textarea { width: 100%; box-sizing: border-box; }
      /* The shared .aipa-dash input/select rule (dashboard-ui.php) sets background/border/color but never
         padding -- on wp-admin pages that's fine, since wp-admin's own forms.css supplies it; on the
         front-end Members Hub page nothing ever did except Youzify's global reset, which is why removing
         Youzify's CSS (see the comment above) left every text input/textarea here flush against its own
         border (computed padding as low as the browser's ~1-2px UA default). Scoped to .psoo-gm so this
         never touches the admin Sequences page or the other aipa-dash-shared-css consumers (Task Profiles,
         Gas Stations, AI Models), which already render correctly via wp-admin's native padding. Not
         !important, so the deliberately-borderless inline title fields (.aipa-seq-task-row__title,
         .aipa-seq-inline-card__title) and other compact overrides below keep winning as intended. */
      /* Scoped to .aipa-dash ALONE, not ".psoo-gm .aipa-seq" (a two-separate-ancestor requirement) --
         confirmed live via DevTools that this rule straight up never matched inside a workspace detail
         modal at all (not even losing the cascade -- genuinely absent from the matched-rules list). The
         modal-portal fix moves these modals to a direct child of <body> wrapped in ONE div carrying
         "aipa-seq aipa-dash psoo-gm aipa-seq-portal" together -- a descendant combinator can't match an
         element against itself, so ".psoo-gm .aipa-seq" (which needs those two classes on two DIFFERENT,
         nested ancestors) can never match anything inside that single-div wrapper. .aipa-dash alone is
         on that same wrapper too, so a selector needing only it still matches regardless of portal state
         -- same root cause as the earlier .aipa-modal__panel blur-stuck-on-entrance bug this session,
         just hitting a different rule. !important carried over from the fix attempt before this one,
         which also needed .aipa-seq-inline-card__title's own exception raised to match it. */
      .aipa-dash input[type=text], .aipa-dash input[type=number], .aipa-dash input:not([type]), .aipa-dash textarea { padding: 13px 16px !important; }
      /* <select> was deliberately left out of the padding fix above -- that one only ever needed to
         reach text-like fields, and the separate note below it is about the OPEN dropdown popup, not
         this gap. The closed select box itself was still left with no padding of its own (same missing-
         rule root cause), most visible now that a trigger's Chatflow dropdown is the main form field
         left in that popup. appearance:menulist stays forced (two rules down) so this doesn't reopen
         the always-expanded-listbox regression that rule was added for. */
      .aipa-dash select { padding: 13px 16px !important; }
      /* The closed <select> box itself picks up the shared .aipa-dash rule's dark background/border, but
         a native select's OPEN dropdown list is a separate, browser/OS-rendered popup that CSS can only
         partially reach -- explicitly styling <option> is the one part of it every major browser does
         respect, and without it the popup falls back to plain white-on-black system default styling that
         clashes badly with this page's dark theme (most visible on the Members Hub page, where a plugin
         that used to incidentally darken this popup via its own unrelated global CSS was removed). */
      /* Forces the compact single-line dropdown rendering explicitly: with Youzify's own global CSS
         gone, some other active theme/plugin rule was landing -webkit-appearance: listbox (or an
         equivalent always-expanded rendering) on a bare <select>, which Youzify's own broad reset had
         been silently overriding until now -- confirmed live by BOTH selects in the same modal
         rendering fully expanded, inline, simultaneously (a real always-expanded listbox render, not a
         browser's native open-dropdown popup, which can only ever show one at a time). */
      .aipa-seq select, .aipa-dash select { appearance: menulist !important; -webkit-appearance: menulist !important; -moz-appearance: menulist !important; color-scheme: dark; }
      .aipa-seq select option, .aipa-dash select option { background-color: #131b33; color: var(--ink); }
      .aipa-seq-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
      .aipa-seq-prompts { border: 1px solid var(--glass-border); border-radius: 10px; padding: 12px; margin-top: 4px; }
      .aipa-seq-prompt-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--glass-border); }
      .aipa-seq-prompt-row:first-child { border-top: none; }
      .aipa-seq-prompt-row__actions { display: flex; flex-direction: column; gap: 4px; }
      .aipa-seq-prompt-row__actions .button { padding: 0 6px !important; font-size: .7rem !important; }
      [data-visible-for] { display: none; }
      .aipa-seq-field__hint { font-size: .7rem; color: var(--muted); margin-top: 4px; display: block; }
      .aipa-seq-run-now-status { font-size: .72rem; color: var(--muted); }
      .aipa-seq-run-now-status--ok { color: #34d399; }
      .aipa-seq-run-now-status--error { color: #f87171; }

      /* ---------- Per-workspace Detail modal (matches the desktop app's own Sequences popup) ---------- */
      .aipa-seq-detail__desc { color: var(--muted); font-size: .85rem; margin: -6px 0 18px; }
      .aipa-seq-detail__section { margin-bottom: 26px; }
      .aipa-seq-detail__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
      .aipa-seq-detail__section-head h3 { margin: 0; font-size: 1rem; color: #fff; }
      .aipa-seq-detail__section-desc { color: var(--muted); font-size: .78rem; line-height: 1.5; margin: 0 0 14px; }
      .aipa-seq-warning { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .3); color: #fbbf24; border-radius: 10px; padding: 10px 14px; font-size: .8rem; margin-bottom: 14px; }
      .aipa-seq-info { background: rgba(129, 140, 248, .12); border: 1px solid rgba(129, 140, 248, .35); color: #c7d2fe; border-radius: 10px; padding: 10px 14px; font-size: .8rem; margin-bottom: 14px; }
      .aipa-seq-inline-card { border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
      .aipa-seq-inline-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
      .aipa-seq-inline-card__title-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
      /* Scoped with the same .aipa-dash ancestor prefix as the generic input padding rule above (not
         just .aipa-seq-inline-card__title alone, and not .psoo-gm .aipa-seq -- see that rule's own
         comment on why a two-separate-ancestor selector silently fails inside a portaled modal) so this
         deliberately tight, borderless inline-editable title (e.g. a Task List's own name field) keeps
         winning now that rule is !important too -- matching !important, this one still wins by being
         the more specific of the two selectors, and .aipa-dash is guaranteed present either way. */
      .aipa-dash .aipa-seq-inline-card__title { font-weight: 700; color: #fff; border: 0 !important; background: transparent !important; padding: 2px 4px !important; flex: 1; min-width: 0; }
      .aipa-seq-inline-card__enabled { font-size: .72rem; color: var(--muted); white-space: nowrap; }
      .aipa-seq-inline-card__btns { display: flex; gap: 6px; flex: none; }
      .aipa-seq-inline-card__btns .button { padding: 0 8px !important; font-size: .72rem !important; height: auto !important; line-height: 1.8 !important; }

      /* Browse gend.me Templates list -- the only place .aipa-seq-inline-card__head wraps a bare
         <strong> title instead of the .aipa-seq-inline-card__title-row div other cards use (which
         already carries flex:1;min-width:0 for exactly this reason). Without it, a long template
         name can't shrink/truncate inside the flex row, forcing the whole card -- and with it the
         modal's scroll container -- into horizontal overflow (confirmed live). Also gives "Clone
         into this group" the same generous, professional padding every other primary button in this
         file gets (.aipa-dash .button-primary itself sets no padding -- each context has to, and
         this one never did). */
      #aipa-hub-templates-list { overflow-x: hidden; }
      #aipa-hub-templates-list .aipa-seq-inline-card__head > strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      #aipa-hub-templates-list .button-primary { padding: 9px 20px !important; font-size: .78rem !important; border-radius: 10px !important; height: auto !important; line-height: 1.3 !important; white-space: nowrap; flex-shrink: 0; }
      /* Purchase for Team: card-style package picker (radio inputs visually hidden, the whole card is the
         hit target) and an avatar+checkbox recipient list, inside the same .aipa-seq-inline-card/.aipa-glass
         shells used everywhere else on this page so the popup reads as part of the dashboard, not a bolted-on
         plain HTML form. */
      .aipa-team-pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
      /* .aipa-glass (dashboard-ui.php, now also on each card/row here) already supplies the glassmorphic
         blur, the glowing conic-gradient ring sweep, and the 3D perspective tilt on :hover -- these rules
         only add the card's own layout/background/selected-state on top. The package card's own hover
         transform was deliberately removed (it fought .aipa-glass:hover's own transform at equal
         specificity and, loading later in this same file, silently won outright -- there was never going
         to be a visible 3D tilt while it stayed). */
      .aipa-team-pkg-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-bg-strong); cursor: pointer; text-align: center; transition: border-color .15s ease; }
      .aipa-team-pkg-card input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
      .aipa-team-pkg-card.is-selected { border-color: var(--glow, #818cf8); box-shadow: 0 0 0 2px var(--glow-dim, rgba(99, 102, 241, .35)); }
      .aipa-team-pkg-card img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
      .aipa-team-pkg-card__name { font-weight: 600; color: var(--ink); font-size: .85rem; }
      .aipa-team-pkg-card__meta { font-size: .74rem; color: var(--muted); }
      .aipa-team-recipient-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
      .aipa-team-recipient-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
      .aipa-team-recipient-row img { border-radius: 50%; flex-shrink: 0; }
      .aipa-team-recipient-row__info { display: flex; flex-direction: column; min-width: 0; }
      .aipa-team-recipient-row__name { color: var(--ink); font-size: .84rem; font-weight: 500; }
      .aipa-team-recipient-row__email { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      /* Animated toggle switch for "Bill monthly" -- a plain checkbox felt disconnected from this being
         a real recurring-charge decision, so it gets its own glowing activation animation on check. */
      .aipa-team-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 2px; }
      .aipa-team-toggle input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
      .aipa-team-toggle__track { position: relative; width: 46px; height: 24px; border-radius: 999px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); flex-shrink: 0; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
      .aipa-team-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #94a3b8; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease; }
      .aipa-team-toggle input:checked + .aipa-team-toggle__track { background: linear-gradient(135deg, var(--glow, #818cf8), #22d3ee); border-color: transparent; box-shadow: 0 0 14px 2px var(--glow-dim, rgba(99, 102, 241, .55)); animation: aipa-team-toggle-pulse .5s ease; }
      .aipa-team-toggle input:checked + .aipa-team-toggle__track .aipa-team-toggle__thumb { transform: translateX(22px); background: #fff; }
      @keyframes aipa-team-toggle-pulse { 0% { box-shadow: 0 0 0 0 var(--glow-dim, rgba(99, 102, 241, .6)); } 100% { box-shadow: 0 0 14px 2px var(--glow-dim, rgba(99, 102, 241, .55)); } }
      .aipa-team-toggle__label { font-size: .84rem; color: var(--ink); }
      .aipa-team-toggle__label em { color: var(--muted); font-style: normal; }
      .aipa-team-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; }
      .aipa-team-summary__line { font-size: .8rem; color: var(--muted); }
      .aipa-team-summary__total { font-size: 1rem; color: var(--ink); }
      .aipa-team-summary__total strong { color: var(--glow, #818cf8); }
      /* Every other .aipa-modal only anchors 4vh from the top (margin:4vh auto on .aipa-modal__panel,
         dashboard-ui.php) rather than truly centering -- left as-is everywhere else to avoid moving every
         modal in this dashboard, but this one popup specifically gets real vertical+horizontal centering. */
      #aipa-am-modal-team-purchase.is-open, #aipa-am-modal-team-purchase.is-closing { display: flex; align-items: center; justify-content: center; }
      /* width:100% is required here -- making the modal a flex container to center the panel also made
         the panel itself a flex ITEM, and flex items shrink-to-fit their content by default instead of
         growing to fill available space up to max-width (confirmed live: it was rendering at ~472px,
         hugging the package grid's natural width, despite max-width:920px on the very same element). */
      #aipa-am-modal-team-purchase .aipa-modal__panel { margin: 0; width: 100%; }
      /* Browse gend.me Templates panel -- the shared .aipa-modal__panel is a solid dark gradient card,
         not actually translucent/blurred like the .aipa-glass cards it contains. Scoped to this one
         modal's id rather than changing the shared rule so every other already-tuned modal is untouched. */
      #aipa-am-modal-hub-templates .aipa-modal__panel {
        background: linear-gradient(160deg, rgba(19, 27, 51, .72), rgba(28, 20, 64, .72));
        backdrop-filter: blur(28px) saturate(160%);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
      }
      #aipa-hub-templates-list .aipa-seq-inline-card { border: 1px solid rgba(255, 255, 255, .14); }
      /* Locks the page behind any open modal from scrolling (toggled by aipaSyncBodyScrollLock() in
         aipa-sequences-shared.js) -- applies to every modal in this dashboard, not just Purchase for Team,
         since a scrollable background behind an open popup was never desirable anywhere. */
      /* !important confirmed necessary live: this theme's own global-styles (a block theme's generated
         stylesheet) sets body overflow-x:clip/overflow-y:visible with high enough specificity/load-order
         that a plain class selector here left overflow computing unchanged even with this class applied. */
      html.aipa-modal-open, body.aipa-modal-open { overflow: hidden !important; }
      /* Purchase for Team step 2: the real WooCommerce checkout, embedded inline (same iframe-embed idiom
         already proven elsewhere on this site, gdc_plan_attach_render_wc_embed()) so "Create Purchase"
         never leaves the page. */
      .aipa-team-purchase-step2 { display: flex; flex-direction: column; gap: 10px; }
      .aipa-team-purchase-iframe-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border); }
      .aipa-team-purchase-iframe-wrap iframe { display: block; width: 100%; min-height: 560px; border: 0; background: #080c15; }
      /* A real WooCommerce checkout page takes a moment to boot (full WP + WC bootstrap, same as loading
         any real checkout) -- this just acknowledges the wait instead of showing a blank box with nothing
         happening; it's removed the moment the iframe's own load event fires. */
      .aipa-team-purchase-iframe-wrap__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #080c15; color: var(--muted); font-size: .82rem; transition: opacity .25s ease; }
      .aipa-team-purchase-iframe-wrap__loading.is-hidden { opacity: 0; pointer-events: none; }
      .aipa-team-purchase-iframe-wrap__spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--glass-border); border-top-color: var(--glow, #818cf8); animation: aipa-team-spin .8s linear infinite; }
      @keyframes aipa-team-spin { to { transform: rotate(360deg); } }
      /* Launch Trigger card's one remaining field (Chatflow) -- reuses the same label-above-field look as
         the workspace header form (Name/Status/Description) instead of the old cramped label-left
         .aipa-seq-trigger-row it replaced, now that Code/Regenerate is gone and this is the only row left.
         Named -wrap specifically because aipa_seq_chatform_select() already puts the UNRELATED
         "aipa-seq-trigger-chatflow" class on the <select> itself (its own change-listener hook) -- same
         prefix, different element, kept distinct here to not read as the same thing. */
      .aipa-seq-trigger-chatflow-wrap { margin: 0; }
      .aipa-seq-trigger-chatflow__actions { display: flex; gap: 6px; margin-top: 10px; }
      .aipa-seq-trigger-chatflow__actions .button { font-size: .72rem !important; padding: 3px 10px !important; height: auto !important; line-height: 1.7 !important; }
      /* Searchable Chatflow combobox (aipa-sequences-shared.js progressive-enhances the native <select> into
         this) -- the dropdown list is portaled to <body> at open time with position:fixed, so its own
         position/width here are a placeholder the JS overwrites immediately; relative only so the wrapper
         itself establishes nothing load-bearing for the list's positioning (that's computed from the input's
         own rect, not this wrapper). */
      /* width:100% explicitly, not inherited: .aipa-seq-field > input/select/textarea only matches DIRECT
         children, and the JS enhancement nests the real <select> and this combo's own input one level
         deeper (inside this wrapper) -- without this they'd fall back to the browser's intrinsic input
         width instead of filling the field like every other field here does. */
      .aipa-chatflow-combo { position: relative; width: 100%; box-sizing: border-box; }
      .aipa-chatflow-combo__input { width: 100%; box-sizing: border-box; }
      .aipa-chatflow-combo__list { z-index: 100001; max-height: 260px; overflow-y: auto; background: linear-gradient(160deg, rgba(19, 27, 51, .98), rgba(28, 20, 64, .98)); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 6px; box-shadow: 0 20px 45px rgba(2,6,23,.75); display: none; }
      .aipa-chatflow-combo__opt { padding: 6px 10px; border-radius: 6px; font-size: .82rem; color: var(--ink); cursor: pointer; }
      .aipa-chatflow-combo__opt:hover, .aipa-chatflow-combo__opt.is-selected { background: rgba(255,255,255,.12); }
      .aipa-chatflow-combo__empty { padding: 6px 10px; font-size: .8rem; color: var(--muted); }
      .aipa-seq-add-card { border: 2px dashed var(--glass-border); background: transparent; }
      .aipa-seq-add-card form { display: flex; gap: 8px; align-items: center; }
      .aipa-seq-add-card input[type=text] { flex: 1; }

      /* ---------- Task List "Add task" control (Sequence / Chatflow / Human) ----------
         A choice row of three kind chips; picking one swaps the row for that kind's own inline
         quick-create panel (one field + Add/Cancel), Cancel swaps back. The [hidden] guards carry
         !important deliberately: these elements are shown/hidden purely via the `hidden` attribute from
         aipa-sequences-shared.js, and any author `display` value on them (a class here, or the inline
         style a first cut used) would otherwise beat the browser's own [hidden]{display:none} and render
         every panel at once -- confirmed live. */
      .aipa-seq-add-task { margin-top: 12px; }
      .aipa-seq-add-task__kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
      .aipa-seq-add-task__kinds[hidden] { display: none !important; }
      .aipa-seq-add-task__kinds-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: 2px; }
      .aipa-seq-add-task__kind {
        display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 11px; border-radius: 12px; cursor: pointer;
        background: var(--glass-bg-strong, rgba(255, 255, 255, .06)); border: 1px solid var(--glass-border, rgba(255, 255, 255, .12));
        color: var(--ink); text-align: left; line-height: 1.15; font: inherit;
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
      }
      .aipa-seq-add-task__kind:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .11); border-color: var(--glow, #818cf8); box-shadow: 0 10px 26px rgba(2, 6, 23, .45), 0 0 0 1px var(--glow-dim, rgba(99, 102, 241, .35)); }
      .aipa-seq-add-task__kind:active { transform: scale(.98); }
      .aipa-seq-add-task__kind:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-dim, rgba(99, 102, 241, .35)); }
      .aipa-seq-add-task__kind-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(129, 140, 248, .14); font-size: .95rem; flex: none; }
      .aipa-seq-add-task__kind-text { display: flex; flex-direction: column; gap: 1px; }
      .aipa-seq-add-task__kind-text strong { font-size: .8rem; font-weight: 700; color: #fff; }
      .aipa-seq-add-task__kind-text small { font-size: .66rem; color: var(--muted); }
      .aipa-seq-add-task__panel {
        display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px;
        background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
        animation: aipa-add-task-in .26s cubic-bezier(.2, .8, .2, 1);
      }
      .aipa-seq-add-task__panel[hidden] { display: none !important; }
      .aipa-seq-add-task__panel-title { flex: 1 1 100%; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
      .aipa-seq-add-task__panel-title small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .85; }
      .aipa-seq-add-task__panel > input[type=text] { flex: 1 1 220px; min-width: 0; }
      .aipa-seq-add-task__picker { flex: 1 1 100%; min-width: 0; }
      .aipa-seq-add-task__panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
      @keyframes aipa-add-task-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
      @media (prefers-reduced-motion: reduce) { .aipa-seq-add-task__panel { animation: none; } .aipa-seq-add-task__kind:hover { transform: none; } }
      .aipa-seq-tasklist { border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; }
      .aipa-seq-tasklist__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
      .aipa-seq-tasklist__head h4 { margin: 0; font-size: .92rem; color: #fff; }
      .aipa-seq-tasklist__count { font-size: .72rem; color: var(--muted); font-weight: 400; }
      .aipa-seq-task-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--glass-border); font-size: .82rem; }
      .aipa-seq-task-row:first-of-type { border-top: none; }
      /* Drag-to-reorder (tasks + sub-tasks) */
      .aipa-seq-drag { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px; margin-right: 2px; border-radius: 6px; color: var(--muted); font-size: 15px; line-height: 1; cursor: grab; touch-action: none; user-select: none; opacity: .55; transition: opacity .15s ease, background .15s ease, color .15s ease; }
      .aipa-seq-task-row:hover .aipa-seq-drag { opacity: 1; }
      .aipa-seq-drag:hover { background: rgba(255, 255, 255, .08); color: #fff; }
      .aipa-seq-task-rows.is-sorting, .aipa-seq-task-rows.is-sorting * { cursor: grabbing !important; user-select: none; }
      .aipa-seq-task-row.is-dragging { position: relative; z-index: 2; border-radius: 10px; background: rgba(129, 140, 248, .16) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(129, 140, 248, .55); }
      .aipa-seq-task-rows[data-saving] { opacity: .6; pointer-events: none; }
      /* "Run tasks / Run sub-tasks" selector */
      .aipa-seq-runmode { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
      .aipa-seq-runmode__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
      .aipa-seq-runmode .aipa-seq-segmented__opt { font-size: .78rem; padding: 6px 12px; }
      /* Sub-task pickers (Agent cards / Person search / role quick-picks) */
      .aipa-pick [hidden] { display: none !important; }
      .aipa-pick__chosen { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(129, 140, 248, .13); border: 1px solid rgba(129, 140, 248, .4); }
      .aipa-pick__ico { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
      .aipa-pick__ico img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); }
      .aipa-pick__emoji { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(129, 140, 248, .18); border: 1px solid rgba(129, 140, 248, .35); }
      .aipa-pick__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; text-align: left; }
      .aipa-pick__text strong { color: #f8fafc; font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .aipa-pick__text small { color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .aipa-pick__x { flex: none; margin-left: auto; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-border); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
      .aipa-pick__x:hover { background: rgba(248, 113, 113, .22); border-color: rgba(248, 113, 113, .5); }
      .aipa-pick__roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 10px; }
      .aipa-pick__role, .aipa-pick__row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
      .aipa-pick__role:hover, .aipa-pick__row:hover, .aipa-pick__role:focus-visible, .aipa-pick__row:focus-visible { background: rgba(129, 140, 248, .16); border-color: rgba(129, 140, 248, .5); outline: none; transform: translateY(-1px); }
      .aipa-pick__search { width: 100%; box-sizing: border-box; }
      .aipa-pick__results { display: grid; gap: 6px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
      .aipa-pick__results:empty { display: none; }
      .aipa-pick__empty { padding: 10px 4px; color: var(--muted); font-size: .78rem; }
      .aipa-seq-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      @media (max-width: 640px) { .aipa-seq-form-grid--3 { grid-template-columns: 1fr; } }
      .aipa-seq-add-subtask { margin-top: 6px; }
      /* Styled confirmation dialog (aipaConfirm in aipa-sequences-shared.js) -- appended to <body>, so no scoping */
      .aipa-confirm { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: inherit; animation: aipa-confirm-fade .18s ease both; }
      .aipa-confirm.is-closing { animation: aipa-confirm-fade .18s ease reverse both; }
      .aipa-confirm__backdrop { position: absolute; inset: 0; background: rgba(4, 7, 17, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
      .aipa-confirm__panel { position: relative; width: 100%; max-width: 400px; padding: 26px 24px 20px; border-radius: 18px; text-align: center; color: #e2e8f0; background: linear-gradient(160deg, rgba(22, 30, 58, .97), rgba(32, 22, 70, .97)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(129, 140, 248, .18); animation: aipa-confirm-pop .22s cubic-bezier(.2, .9, .3, 1.2) both; }
      .aipa-confirm__ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(129, 140, 248, .18); border: 1px solid rgba(129, 140, 248, .4); }
      .aipa-confirm__ico.is-danger { background: rgba(248, 113, 113, .16); border-color: rgba(248, 113, 113, .45); }
      .aipa-confirm__title { margin: 0 0 6px; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
      .aipa-confirm__detail { margin: 0 0 4px; color: #94a3b8; font-size: .84rem; line-height: 1.5; }
      .aipa-confirm__actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
      .aipa-confirm__btn { flex: 1; max-width: 160px; padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #e2e8f0; font-family: inherit; font-size: .86rem; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
      .aipa-confirm__btn:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
      .aipa-confirm__btn:focus-visible { outline: 2px solid rgba(129, 140, 248, .8); outline-offset: 2px; }
      .aipa-confirm__btn.is-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(239, 68, 68, .35); }
      .aipa-confirm__btn.is-danger:hover { box-shadow: 0 10px 26px rgba(239, 68, 68, .5); }
      .aipa-confirm__btn.is-primary { background: linear-gradient(135deg, #818cf8, #6366f1); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(99, 102, 241, .35); }
      @keyframes aipa-confirm-fade { from { opacity: 0; } to { opacity: 1; } }
      @keyframes aipa-confirm-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
      @media (prefers-reduced-motion: reduce) { .aipa-confirm, .aipa-confirm__panel { animation: none !important; } }
      /* "New sequence" chooser (Projects board) */
      .aipa-seq-newchoice { display: grid; gap: 10px; }
      .aipa-seq-newchoice__opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
      .aipa-seq-newchoice__opt:hover, .aipa-seq-newchoice__opt:focus-visible { background: rgba(129, 140, 248, .16); border-color: rgba(129, 140, 248, .5); outline: none; transform: translateY(-1px); }
      .aipa-seq-newchoice__opt strong { display: block; color: #f8fafc; font-size: .95rem; }
      .aipa-seq-newchoice__opt small { display: block; color: var(--muted); font-size: .76rem; margin-top: 2px; }
      .aipa-seq-newchoice__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(129, 140, 248, .18); border: 1px solid rgba(129, 140, 248, .35); }
      /* Task popup: Save/Approve below the sub-task list */
      .aipa-seq-task-actions { border-top: 1px solid var(--glass-border); margin-top: 14px; padding-top: 14px; }
      .aipa-seq-task-row__idx { flex: none; color: var(--seq-accent, #a5b4fc); font-weight: 700; width: 18px; }
      .aipa-seq-task-row__title { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 2px 4px !important; }
      .aipa-seq-task-row__meta { flex: none; font-size: .7rem; color: var(--muted); white-space: nowrap; }
      .aipa-seq-task-row__price { flex: none; font-size: .7rem; font-weight: 700; color: var(--seq-accent, #a5b4fc); white-space: nowrap; }
      .aipa-seq-task-row__price--pending { font-weight: 600; font-style: italic; color: var(--muted); }
      .aipa-seq-task-row select { flex: none; width: auto; font-size: .74rem !important; padding: 2px 6px !important; }
      .aipa-seq-task-row .button { flex: none; padding: 0 6px !important; font-size: .7rem !important; height: auto !important; line-height: 1.6 !important; }
      .aipa-seq-detail__kicker { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--seq-accent, #a5b4fc); }
      .aipa-seq-segmented { display: inline-flex; border: 1px solid var(--glass-border); border-radius: 8px; overflow: hidden; }
      .aipa-seq-segmented__opt { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .8rem; cursor: pointer; background: var(--field-bg); color: var(--muted); border-right: 1px solid var(--glass-border); transition: background .2s ease, color .2s ease; }
      .aipa-seq-segmented__opt:last-child { border-right: 0; }
      .aipa-seq-segmented__opt input { margin: 0; }
      .aipa-seq-segmented__opt.is-active { background: color-mix(in srgb, var(--seq-accent, #818cf8) 30%, transparent); color: #fff; font-weight: 600; }
      .aipa-seq-reviewchain-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--field-bg); margin-bottom: 6px; font-size: .82rem; }
      .aipa-seq-reviewchain-item:last-child { margin-bottom: 0; }
      .aipa-seq-reviewchain-step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--seq-accent, #818cf8); color: #fff; font-size: .68rem; font-weight: 700; }
      .aipa-seq-reviewchain-name { font-weight: 600; color: #fff; }

      /* Model picker: category icons -> Task Profile tier -> Best Quality/Value/Cost buttons. */
      .aipa-model-picker { position: relative; }
      .aipa-model-picker__current { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; }
      .aipa-model-picker__current::after { content: '\25be'; opacity: .6; margin-left: 8px; }
      .aipa-model-picker__panel { margin-top: 8px; border: 1px solid var(--glass-border); border-radius: 10px; padding: 12px; background: var(--field-bg); }
      .aipa-model-picker__step { display: flex; flex-wrap: wrap; gap: 8px; }
      .aipa-model-picker__cat-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(255, 255, 255, .04); color: var(--ink); cursor: pointer; min-width: 120px; transition: border-color .2s ease, background .2s ease; }
      .aipa-model-picker__cat-btn:hover { border-color: var(--seq-accent, #818cf8); background: rgba(255, 255, 255, .08); }
      .aipa-model-picker__cat-btn .dashicons { font-size: 24px; width: 24px; height: 24px; }
      .aipa-model-picker__tier-btn, .aipa-model-picker__pick-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 14px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(255, 255, 255, .04); color: var(--ink); cursor: pointer; min-width: 170px; text-align: left; transition: border-color .2s ease, background .2s ease; }
      .aipa-model-picker__tier-btn:hover, .aipa-model-picker__pick-btn:hover { border-color: var(--seq-accent, #818cf8); background: rgba(255, 255, 255, .08); }
      .aipa-model-picker__tier-btn span, .aipa-model-picker__pick-btn span { font-size: .72rem; color: var(--muted); font-weight: 400; }
      .aipa-model-picker__back { flex-basis: 100%; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: .78rem; padding: 4px 0; text-align: left; }

      /* ---------- Cinematic entrance/exit + 3D glass hover, layered on top of the shared .aipa-glass/
         .aipa-anim system (dashboard-ui.php) rather than a separate one -- everything below just extends
         that same design language to this page's inline cards, rows, and modals. ---------- */

      /* A lighter row-level hover glow for dense lists (subtask/task rows) -- the full .aipa-glass 3D lift
         reads as jittery at this density, so rows get a border/glow transition without the tilt-and-lift. */
      .aipa-seq-row-glow { border-radius: 10px; transition: background .25s ease, border-color .25s ease, box-shadow .3s ease, transform .2s ease; }
      .aipa-seq-row-glow:hover { background: rgba(255, 255, 255, .05); border-color: var(--seq-accent, #818cf8); box-shadow: 0 0 0 1px color-mix(in srgb, var(--seq-accent, #818cf8) 45%, transparent), 0 6px 18px rgba(2, 6, 23, .35); transform: translateX(2px); }

      /* Modal entrance/exit: upgrades the shared fade+scale (dashboard-ui.php's .aipa-modal__panel) with a
         3D tilt-and-focus settle -- scoped under .aipa-seq so it doesn't change the Task Profiles/Gas
         Stations/AI Models pages sharing that base rule. */
      .aipa-seq .aipa-modal__panel {
        transform: perspective(1400px) rotateX(-10deg) scale(.9) translateY(46px);
        filter: blur(8px);
        transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
      }
      .aipa-seq .aipa-modal.is-open .aipa-modal__panel { transform: perspective(1400px) rotateX(0deg) scale(1) translateY(0); filter: blur(0); }
      .aipa-seq .aipa-modal.is-closing .aipa-modal__panel { transform: perspective(1400px) rotateX(7deg) scale(.94) translateY(24px); filter: blur(5px); }
      @media (prefers-reduced-motion: reduce) {
        .aipa-seq .aipa-modal__panel { transform: none !important; filter: none !important; transition: opacity .2s ease !important; }
      }

      /* Cascading reveal for a modal's own content once it's open -- reuses .aipa-anim's fade-up keyframe
         and stagger table (dashboard-ui.php) by applying the same class to modal-internal elements; browsers
         restart CSS animations whenever an ancestor goes display:none -> block, so this replays every open,
         no extra JS needed. */
      .aipa-modal .aipa-anim { animation-duration: .5s; }
      @media (max-width: 782px) {
        .aipa-seq-form-grid { grid-template-columns: 1fr; }
        .aipa-seq-prompt-row { grid-template-columns: 1fr; }
        .aipa-seq-task-row { flex-wrap: wrap; }
      }