/* qAIUIck Design v0.2: one stylesheet, no assets, no CSS build step. */
:root {
  color-scheme: light;
  --q-bg: #f6f7fb;
  --q-surface: #fff;
  --q-surface-soft: #fafbfe;
  --q-ink: #20283b;
  --q-muted: #647087;
  --q-border: #e2e6ef;
  --q-primary: #574ddd;
  --q-primary-dark: #453ac4;
  --q-tint: #eeecff;
  --q-ring: #aaa3ff;
  --q-button-ink: #fff;
  --q-shadow: 0 14px 42px rgb(31 39 69 / 5%);
  --q-radius: 18px;
  --q-space: 20px;
  /* Backwards-compatible v0.1 tokens */
  --q-panel: var(--q-surface);
  --q-fg: var(--q-ink);
  --q-line: var(--q-border);
  --q-accent: var(--q-tint);
}
[data-q-theme="teal"] {
  --q-primary: #067f80;
  --q-primary-dark: #036668;
  --q-tint: #e6f6f4;
  --q-ring: #60c7c3;
}
[data-q-theme="rose"] {
  --q-primary: #b0406f;
  --q-primary-dark: #962a59;
  --q-tint: #fff0f5;
  --q-ring: #df94b2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-q-mode="light"]):not([data-q-mode="dark"]) {
    color-scheme: dark;
    --q-bg: #111624;
    --q-surface: #1c2333;
    --q-surface-soft: #222b3d;
    --q-ink: #f0f2fa;
    --q-muted: #abb5c9;
    --q-border: #374156;
    --q-primary: #a99cff;
    --q-primary-dark: #c2b8ff;
    --q-tint: #322e54;
    --q-ring: #baaaff;
    --q-button-ink: #171628;
    --q-shadow: 0 14px 42px rgb(0 0 0 / 18%);
  }
}
:root[data-q-mode="dark"] {
  color-scheme: dark;
  --q-bg: #111624;
  --q-surface: #1c2333;
  --q-surface-soft: #222b3d;
  --q-ink: #f0f2fa;
  --q-muted: #abb5c9;
  --q-border: #374156;
  --q-primary: #a99cff;
  --q-primary-dark: #c2b8ff;
  --q-tint: #322e54;
  --q-ring: #baaaff;
  --q-button-ink: #171628;
  --q-shadow: 0 14px 42px rgb(0 0 0 / 18%);
}
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--q-bg); color: var(--q-ink); font: 16px/1.58 system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.25; }
h1 { font-size: clamp(2rem, 4.3vw, 3.25rem); margin: 10px 0 12px; }
h2 { font-size: 1.23rem; margin: 0; }
p { margin: 0; }
a { color: var(--q-primary); }
[hidden] { display: none !important; }
.q-page, .q-shell { max-width: 960px; margin: 0 auto; padding: clamp(24px, 5vw, 58px) clamp(18px, 4vw, 40px) 80px; }
.q-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(32px, 5vw, 58px); }
.q-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 780; font-size: 1.1rem; letter-spacing: -.05em; }
.q-brand-mark { background: var(--q-primary); color: var(--q-button-ink); width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 11px; font-weight: 850; }
.q-topmeta { color: var(--q-muted); font-size: .82rem; }
.q-hero { margin: 0 0 28px; max-width: 700px; }
.q-eyebrow { display: block; font-size: .74rem; font-weight: 770; color: var(--q-primary); letter-spacing: .12em; text-transform: uppercase; }
.q-lead, .q-muted { color: var(--q-muted); }
.q-lead { font-size: clamp(.97rem, 1.8vw, 1.08rem); max-width: 640px; }
.q-panel, .q-card { background: var(--q-surface); border: 1px solid var(--q-border); border-radius: var(--q-radius); box-shadow: var(--q-shadow); padding: clamp(20px, 3.2vw, 32px); }
.q-panel + .q-panel, .q-card + .q-card { margin-top: 18px; }
.q-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.q-stack > * + * { margin-top: var(--q-space); }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.q-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.q-form > label { display: grid; gap: 7px; flex: 1 1 180px; min-width: 0; color: var(--q-muted); font-weight: 630; font-size: .86rem; }
.q-form > button { flex: 0 0 auto; }
.q-app :where(input, select, textarea), .q-field, .q-select { display: block; width: 100%; min-width: 0; min-height: 44px; color: var(--q-ink); background: var(--q-surface); border: 1px solid var(--q-border); border-radius: 11px; padding: 10px 13px; transition: border-color .14s, box-shadow .14s; }
.q-app :where(input, textarea)::placeholder, .q-field::placeholder { color: var(--q-muted); opacity: .75; }
.q-app :where(button), .q-button { min-height: 44px; padding: 10px 18px; cursor: pointer; background: var(--q-primary); border: 1px solid var(--q-primary); color: var(--q-button-ink); font-weight: 680; border-radius: 11px; line-height: 1.35; transition: background .14s, transform .14s; }
.q-app :where(button:hover), .q-button:hover { background: var(--q-primary-dark); }
.q-app :where(button:active), .q-button:active { transform: translateY(1px); }
.q-app :where(button:disabled), .q-button:disabled { opacity: .55; cursor: not-allowed; }
.q-app :where(button.q-button--quiet, button.q-button--subtle), .q-button--quiet, .q-button--subtle { color: var(--q-primary); background: var(--q-tint); border-color: transparent; }
.q-app :where(button.q-button--quiet:hover, button.q-button--subtle:hover), .q-button--quiet:hover, .q-button--subtle:hover { background: var(--q-border); }
.q-app :where(button.q-button--small), .q-button--small { min-height: 34px; padding: 7px 12px; font-size: .83rem; border-radius: 9px; }
.q-app :where(button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible), .q-field:focus-visible, .q-button:focus-visible { outline: 3px solid var(--q-ring); outline-offset: 3px; }
.q-pill, .q-tag { display: inline-flex; align-items: center; gap: 7px; border-radius: 100px; padding: 6px 12px; background: var(--q-tint); color: var(--q-primary); font-size: .82rem; font-weight: 650; }
.q-error { color: #bc3459; min-height: 1.5em; }
.q-app .q-error:empty { display: none; }
.q-list { padding: 0; margin: 0; list-style: none; }
.q-list > li { border-top: 1px solid var(--q-border); padding: 15px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow-wrap: anywhere; }
.q-list > li:first-child { border-top: 0; }
.q-list-item { display: flex; flex: 1; gap: 12px; align-items: center; }
.q-list-dot { width: 9px; height: 9px; border-radius: 100%; flex: 0 0 9px; background: var(--q-primary); opacity: .85; }
.q-table-wrap { overflow-x: auto; }
.q-table { border-collapse: collapse; width: 100%; }
.q-table th, .q-table td { padding: 14px 12px; border-bottom: 1px solid var(--q-border); text-align: left; vertical-align: middle; }
.q-table th { color: var(--q-muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; background: var(--q-surface-soft); }
.q-table tr:last-child td { border-bottom: 0; }
.q-empty { border: 1px dashed var(--q-border); background: var(--q-surface-soft); color: var(--q-muted); text-align: center; padding: 28px 18px; border-radius: 14px; }
.q-design-notes { margin-top: 24px; border-top: 1px solid var(--q-border); padding-top: 16px; color: var(--q-muted); font-size: .88rem; }
.q-design-notes summary { cursor: pointer; font-weight: 680; color: var(--q-ink); }
.q-design-notes p { margin-top: 10px; }
.q-footer { margin-top: 26px; font-size: .8rem; color: var(--q-muted); text-align: center; }
@media (max-width: 600px) { .q-form { display: grid; } .q-form > button { width: 100%; } .q-row--stack-mobile { flex-direction: column; align-items: stretch; } .q-row--stack-mobile > * { width: 100%; } .q-table th, .q-table td { padding: 12px 8px; } .q-list > li { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; } }