/* Shared plugin-page primitives. Canonical source; package copies are generated.
   Derived from Magpie app.css/pagebridge.js at b9d1cd36; see ../NOTICE. */
:root {
  --ui-bg: var(--magpie-bg, #f4f4f6); --ui-card: var(--magpie-card, #fff);
  --ui-fg: var(--magpie-fg, #1c1c21); --ui-fg-2: var(--magpie-fg-2, #4b4b53);
  --ui-muted: var(--magpie-muted, #85858d); --ui-line: var(--magpie-line, #e3e3e8);
  --ui-accent: var(--magpie-accent, #4f46e5); --ui-soft: var(--magpie-accent-soft, #eeedfd);
  --ui-accent-fg: var(--magpie-accent-fg, #fff); --ui-green: var(--magpie-green, #189a58);
  --ui-red: var(--magpie-red, #d64545); --ui-amber: var(--magpie-amber, #b45309);
  --ui-font: var(--magpie-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif);
  --ui-code: var(--magpie-code, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  --ui-open-ms: 420ms; --ui-close-ms: 220ms;
  --ui-open-ease: cubic-bezier(.16, 1, .3, 1); --ui-close-ease: cubic-bezier(.4, 0, .7, .2);
}
:root[data-theme="dark"] {
  --ui-bg: var(--magpie-bg, #1a1a1e); --ui-card: var(--magpie-card, #232327);
  --ui-fg: var(--magpie-fg, #ededf1); --ui-fg-2: var(--magpie-fg-2, #b9b9c1);
  --ui-muted: var(--magpie-muted, #8b8b94); --ui-line: var(--magpie-line, #333339);
  --ui-accent: var(--magpie-accent, #a5b4fc); --ui-soft: var(--magpie-accent-soft, #2b2c47);
  --ui-accent-fg: var(--magpie-accent-fg, #14142a); --ui-green: var(--magpie-green, #6fd99b);
  --ui-red: var(--magpie-red, #f28b82); --ui-amber: var(--magpie-amber, #f2b544);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --ui-bg: #1a1a1e; --ui-card: #232327; --ui-fg: #ededf1; --ui-fg-2: #b9b9c1;
    --ui-muted: #8b8b94; --ui-line: #333339; --ui-accent: #a5b4fc; --ui-soft: #2b2c47;
    --ui-accent-fg: #14142a; --ui-green: #6fd99b; --ui-red: #f28b82; --ui-amber: #f2b544;
  }
}
.mp-ui { margin: 0; padding: 24px; background: var(--ui-bg); color: var(--ui-fg); font: 13px/1.45 var(--ui-font); -webkit-font-smoothing: antialiased; }
.mp-ui *, .mp-ui *::before, .mp-ui *::after { box-sizing: border-box; }
.mp-ui [hidden] { display: none !important; }
.mp-ui main { max-width: 1080px; margin: 0 auto; }
.mp-ui h1, .mp-ui h2, .mp-ui h3, .mp-ui p { margin: 0; }
.mp-ui h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.mp-ui h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.mp-ui h3 { font-size: 13px; font-weight: 600; }
.mp-ui .muted { color: var(--ui-muted); }
.mp-ui .page-head, .mp-ui .section-head, .mp-ui .toolbar, .mp-ui .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-ui .page-head, .mp-ui .section-head { justify-content: space-between; }
.mp-ui .page-head { margin-bottom: 20px; }
.mp-ui .page-head p { color: var(--ui-fg-2); margin-top: 4px; }
.mp-ui .section-head { margin-bottom: 12px; }
.mp-ui .box { border: 1px solid var(--ui-line); background: var(--ui-card); border-radius: 12px; padding: 16px; margin: 0 0 16px; }
.mp-ui button { appearance: none; -webkit-appearance: none; cursor: default; color: inherit; font: inherit; border: 1px solid var(--ui-line); background: var(--ui-card); border-radius: 6px; padding: 5px 11px; min-height: 30px; transition: background-color .15s, border-color .15s, opacity .15s; }
.mp-ui button:hover:not(:disabled) { border-color: var(--ui-muted); }
.mp-ui button:active:not(:disabled) { background: var(--ui-soft); }
.mp-ui button.primary { color: var(--ui-accent-fg); background: var(--ui-accent); border-color: transparent; }
.mp-ui button[aria-pressed="true"] { background: var(--ui-soft); color: var(--ui-accent); border-color: transparent; }
.mp-ui button:disabled { opacity: .5; }
.mp-ui :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.mp-ui input { font: inherit; color: inherit; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 6px; min-height: 30px; padding: 5px 9px; }
.mp-ui select { font: inherit; color: inherit; background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 6px; min-height: 30px; padding: 5px 9px; max-width: 100%; }
.mp-ui label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 5px 8px 5px 0; min-width: 0; }
.mp-ui input { max-width: 100%; min-width: 0; }
.mp-ui input[type="checkbox"], .mp-ui input[type="radio"] { min-height: auto; padding: 0; accent-color: var(--ui-accent); }
.mp-ui .box > h2 { margin-bottom: 12px; }
.mp-ui .profile-group label { display: flex; margin-right: 0; }
.mp-ui #transfer-inputs { display: grid; gap: 6px; margin-bottom: 12px; }
.mp-ui #quota { margin: 10px 0; overflow-wrap: anywhere; }
.mp-ui #status:not(:empty) { margin: 0 0 16px; }
.mp-ui input[type="radio"] { accent-color: var(--ui-accent); min-height: auto; }
.mp-ui .search { margin-left: auto; width: min(240px, 100%); }
.mp-ui .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; color: var(--ui-fg-2); }
.mp-ui .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mp-ui .badge[data-tone="ok"] { color: var(--ui-green); }
.mp-ui .badge[data-tone="warn"] { color: var(--ui-amber); }
.mp-ui .badge[data-tone="error"], .mp-ui .error { color: var(--ui-red); }
.mp-ui .notice { color: var(--ui-fg-2); padding: 10px 0; }
.mp-ui .empty { padding: 28px 12px; text-align: center; color: var(--ui-fg-2); }
.mp-ui .account-list, .mp-ui .flow-list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.mp-ui .account, .mp-ui .flow { padding: 14px 0; border-top: 1px solid var(--ui-line); }
.mp-ui .account:first-child, .mp-ui .flow:first-child { border-top: 0; }
.mp-ui .account-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mp-ui .account-meta { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; color: var(--ui-fg-2); margin: 7px 0 0; }
.mp-ui .account-meta div { display: flex; gap: 6px; }
.mp-ui dt { color: var(--ui-muted); }
.mp-ui dd { margin: 0; }
.mp-ui code, .mp-ui .code { font-family: var(--ui-code); font-size: 12px; }
.mp-ui fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mp-ui legend { padding: 0; font-weight: 500; margin-bottom: 8px; }
.mp-ui .profile-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.mp-ui .profile { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 8px; }
.mp-ui .profile small { display: block; color: var(--ui-fg-2); }
.mp-ui .disclosure { overflow: hidden; }
.mp-ui .flow input { width: 100%; margin: 10px 0; font-size: 12px; }
.mp-ui .flow .actions { margin-top: 10px; }
.mp-ui .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 560px) { .mp-ui { padding: 16px; } .mp-ui .profile-list { grid-template-columns: 1fr; } .mp-ui .search { margin-left: 0; width: 100%; } .mp-ui .account-meta { display: grid; } }
@media (prefers-reduced-motion: reduce) { .mp-ui { --ui-open-ms: 0ms; --ui-close-ms: 0ms; } .mp-ui button { transition: none; } }

.mp-ui .account-name { display: flex; align-items: center; gap: 9px; min-width: 0; overflow-wrap: anywhere; }
.mp-ui .account-name input { flex: none; accent-color: var(--ui-accent); min-height: auto; }
.mp-ui .account .actions, .mp-ui .bulk-actions { margin-top: 12px; }
.mp-ui .totals, .mp-ui .model-list { padding-left: 20px; overflow-wrap: anywhere; }
.mp-ui .totals li { padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.mp-ui .settings-form { display: grid; gap: 12px; }
.mp-ui .setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mp-ui .confirm-dialog { max-width: min(520px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--ui-line); border-radius: 14px; color: var(--ui-fg); background: var(--ui-card); box-shadow: 0 24px 60px #0004; }
.mp-ui .confirm-dialog::backdrop { background: #0005; }
.mp-ui .confirm-dialog .actions { justify-content: flex-end; }
.mp-ui .transfer-results a { color: var(--ui-accent); }
.mp-ui .task-progress { max-height: 360px; overflow: auto; font-family: var(--ui-code); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 560px) { .mp-ui .account-head { align-items: flex-start; flex-direction: column; } .mp-ui .badge { white-space: normal; } }