/* QEdu UI kit W4. 以 brand/tokens.css 為色彩與排版唯一來源。 */
.q-ui {
  --ui-bg: var(--q-paper, #faf8f3);
  --ui-surface: var(--q-surface, #fff);
  --ui-sunken: var(--q-sunken, #f2efe7);
  --ui-ink: var(--q-text, #131b33);
  --ui-muted: var(--q-text-2, #566075);
  --ui-line: var(--q-line, #e3dfd3);
  --ui-line-strong: var(--q-line-strong, #c9c4b4);
  --ui-primary: var(--q-blue-600, #1a56c9);
  --ui-primary-soft: var(--q-info-bg, #eef4ff);
  --ui-success: var(--q-success, #1e7b4f);
  --ui-success-soft: var(--q-success-bg, #e3f4ea);
  --ui-warn: var(--q-remind, #7a4e00);
  --ui-warn-soft: var(--q-remind-bg, #fff3d6);
  --ui-danger: var(--q-error, #b93a32);
  --ui-danger-soft: var(--q-error-bg, #fdecea);
  --ui-radius: var(--radius, var(--q-r-lg, 22px));
  --ui-tap: max(44px, var(--tap, var(--q-tap, 44px)));
  --ui-font: var(--q-font, system-ui, sans-serif);
  --ui-body-size: var(--fs, var(--q-fs-md, 1rem));
  color: var(--ui-ink);
  background: var(--ui-bg);
  font-family: var(--ui-font);
  font-size: var(--ui-body-size);
  line-height: var(--q-lh-body, 1.75);
  min-height: 100vh;
}

.q-ui *, .q-ui *::before, .q-ui *::after { box-sizing: border-box; }
.q-ui :focus-visible { outline: 3px solid var(--ui-primary); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ui-bg); }
.q-ui :is(button, a, summary, input, select) { font: inherit; }
.q-ui button { color: inherit; }
.q-ui .ui-icon { width: 1.35em; height: 1.35em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ui-kit { width: min(100% - 32px, 1120px); margin-inline: auto; padding: 22px 0 56px; }
.ui-kit__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ui-kit__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-primary); font-weight: 800; text-decoration: none; }
.ui-kit__header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-kit__intro { max-width: 740px; margin: 0 0 20px; }
.ui-kit__intro h1 { margin: 0; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.2; letter-spacing: -.025em; }
.ui-kit__intro p { margin: 8px 0 0; color: var(--ui-muted); }
.ui-kit__section { margin-top: 18px; }
.ui-kit__section > h2 { margin: 0 0 10px; font-size: 1.2rem; line-height: 1.35; }
.ui-kit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ui-kit__stack { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-kit__note { color: var(--ui-muted); font-size: .92em; }

.ui-preview-banner { position: sticky; top: 0; z-index: 11; display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 16px; border: 1px solid var(--ui-line-strong); border-radius: 14px; background: var(--ui-warn-soft); color: var(--ui-warn); font-size: .9rem; font-weight: 700; }
.ui-preview-banner .ui-icon { width: 18px; height: 18px; }

.ui-button { min-height: var(--ui-tap); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border: 1.5px solid transparent; border-radius: var(--q-r-md, 14px); background: var(--q-btn-bg, var(--ui-primary)); color: #fff !important; font-weight: 750; line-height: 1.25; text-decoration: none; cursor: pointer; transition: transform var(--q-dur-1, 120ms) var(--q-ease, ease), background var(--q-dur-1, 120ms) ease, box-shadow var(--q-dur-1, 120ms) ease; }
.ui-button:hover { background: var(--q-blue-700, #1443a0); box-shadow: var(--q-shadow-1, 0 1px 2px #0002); }
.ui-button:active { transform: translateY(1px); }
.ui-button--secondary { color: var(--ui-primary) !important; border-color: var(--ui-line-strong); background: var(--ui-surface); }
.ui-button--secondary:hover { background: var(--ui-primary-soft); }
.ui-button--quiet { color: var(--ui-ink) !important; border-color: transparent; background: transparent; }
.ui-button--quiet:hover { background: var(--ui-sunken); }
.ui-button--danger { background: var(--ui-danger); }
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .56; cursor: not-allowed; box-shadow: none; }

.ui-card { min-width: 0; padding: 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--q-shadow-1, 0 1px 2px #131b3314); }
.ui-card__head { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; font-size: 1.05rem; line-height: 1.4; }
.ui-card__head .ui-icon { color: var(--ui-primary); }
.ui-card__body { margin: 0; color: var(--ui-muted); }

.ui-segmented { display: inline-flex; max-width: 100%; padding: 4px; gap: 3px; border: 1px solid var(--ui-line); border-radius: var(--q-r-md, 14px); background: var(--ui-sunken); }
.ui-segmented button { min-height: calc(var(--ui-tap) - 10px); min-width: 74px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-muted); font-weight: 700; cursor: pointer; }
.ui-segmented button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-primary); box-shadow: var(--q-shadow-1, 0 1px 2px #0002); }

.ui-progress { display: flex; align-items: center; gap: 10px; }
.ui-progress__track { position: relative; height: 12px; flex: 1; overflow: hidden; border-radius: 99px; background: var(--ui-sunken); }
.ui-progress__fill { height: 100%; width: var(--ui-progress-value, 40%); border-radius: inherit; background: var(--ui-primary); transition: width var(--q-dur-2, 220ms) var(--q-ease, ease); }
.ui-progress__label { color: var(--ui-muted); font-size: .9rem; white-space: nowrap; }
.ui-progress--indeterminate .ui-progress__fill { width: 34%; animation: ui-progress-slide 1.3s ease-in-out infinite alternate; }
@keyframes ui-progress-slide { from { transform: translateX(0); } to { transform: translateX(190%); } }

.ui-bubble { max-width: 36ch; padding: 11px 14px; border-radius: 18px 18px 18px 5px; background: var(--ui-primary-soft); color: var(--ui-ink); }
.ui-bubble__speaker { display: block; margin-bottom: 2px; color: var(--ui-primary); font-size: .82rem; font-weight: 800; }
.ui-bubble p { margin: 0; }
.ui-bubble--student { margin-left: auto; border-radius: 18px 18px 5px 18px; background: var(--ui-sunken); }

.ui-timeline { position: relative; display: grid; gap: 12px; }
.ui-timeline::before { content: ""; position: absolute; top: 12px; bottom: 14px; left: 10px; width: 2px; background: var(--ui-line-strong); }
.ui-timeline-card { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.ui-timeline-card__dot { z-index: 1; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid var(--ui-primary); border-radius: 50%; background: var(--ui-surface); color: var(--ui-primary); }
.ui-timeline-card__content { padding: 11px 13px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-timeline-card__content h3 { margin: 0; font-size: 1rem; }
.ui-timeline-card__content time, .ui-timeline-card__content div { color: var(--ui-muted); font-size: .9rem; }

.ui-empty, .ui-state { padding: 18px 14px; border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius); background: var(--ui-surface); text-align: center; }
.ui-empty__icon { display: grid; width: 48px; height: 48px; margin: 0 auto 7px; place-items: center; border-radius: 16px; background: var(--ui-primary-soft); color: var(--ui-primary); }
.ui-empty h3, .ui-state h3 { margin: 0; font-size: 1.05rem; }
.ui-empty div, .ui-state div { margin-top: 3px; color: var(--ui-muted); }
.ui-state[hidden] { display: none; }
.ui-state__icon { display: inline-flex; margin-bottom: 3px; color: var(--ui-primary); }
.ui-state[data-state-panel="error"] .ui-state__icon { color: var(--ui-danger); }
.ui-state[data-state-panel="unauthorized"] .ui-state__icon { color: var(--ui-warn); }
.ui-spinner { width: 22px; height: 22px; border: 3px solid var(--ui-line); border-top-color: var(--ui-primary); border-radius: 50%; animation: ui-spin 800ms linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-toast { position: fixed; right: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 10px; width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--ui-line-strong); border-radius: 14px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--q-shadow-2, 0 6px 18px #131b331a); }
.ui-toast[hidden] { display: none; }
.ui-toast__icon { color: var(--ui-success); }
.ui-toast__message { flex: 1; }
.ui-toast__close { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-muted); cursor: pointer; }

.ui-more { border-top: 1px solid var(--ui-line); padding-top: 10px; }
.ui-more summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-primary); font-weight: 700; cursor: pointer; }
.ui-more__content { max-width: 68ch; margin: 4px 0 0; color: var(--ui-muted); }
.ui-kit__footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ui-line); color: var(--ui-muted); font-size: .88rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  .ui-kit { width: min(100% - 24px, 1120px); padding-top: 14px; }
  .ui-kit__header { align-items: flex-start; }
  .ui-kit__header-actions { justify-content: flex-end; }
  .ui-kit__grid { grid-template-columns: 1fr; }
  .ui-segmented { width: 100%; }
  .ui-segmented button { min-width: 0; flex: 1; padding-inline: 7px; }
}

[data-band="low"] .q-ui { --ui-tap: 56px; --ui-body-size: var(--q-fs-kid, 1.75rem); --ui-radius: var(--q-r-xl, 32px); --q-lh-body: var(--q-lh-kid, 1.9); }
[data-band="low"] .ui-kit__section > h2 { font-size: 1.15em; }
[data-band="low"] .ui-button, [data-band="low"] .ui-segmented button { min-height: 56px; }

@media (prefers-reduced-motion: reduce) {
  .q-ui *, .q-ui *::before, .q-ui *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}