.qm-page { min-height: 100vh; background: var(--color-surface-section) }
.qm-hero { background: var(--color-surface-base); border-bottom: 1px solid var(--color-border); padding: 28px 0 22px }
.qm-hero h1 { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.03em; margin: 0 0 6px }
.qm-hero p { color: var(--color-text-secondary); max-width: 640px }
.qm-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0 }
.qm-toolbar .form-input, .qm-toolbar select { min-width: 160px }
.qm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }
.qm-card { background: var(--color-surface-base); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease }
.qm-card:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--color-border) }
.qm-grid .qm-card:hover, .qm-tiers .qm-tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--color-primary) }
.qm-card h3 { font-size: 18px; margin: 0 }
.qm-card .qm-meta { font-size: 13px; color: var(--color-text-secondary) }
.qm-tags { display: flex; flex-wrap: wrap; gap: 6px }
.qm-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: var(--color-primary-light); color: var(--color-primary); border-radius: 999px; padding: 3px 8px }
.qm-price { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); font-size: 18px }
.qm-stars { color: #F5A524; letter-spacing: 1px; font-size: 13px }
.qm-card-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap }
.qm-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 8px 0 20px }
.qm-tier { border: 1px solid var(--color-border); border-radius: var(--radius-button); padding: 14px; background: var(--color-surface-base); cursor: pointer; text-align: left }
.qm-tier.is-on, .qm-tier:hover { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow) }
.qm-tier strong { display: block; margin-bottom: 4px }
.qm-tier span { font-size: 13px; color: var(--color-text-secondary) }
.qm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 18px }
.qm-tab { border: 0; background: transparent; padding: 8px 12px; font-weight: 600; color: var(--color-text-secondary); border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-ui) }
.qm-tab.is-on { color: var(--color-primary); border-bottom-color: var(--color-primary) }
.qm-panel[hidden] { display: none !important }
.qm-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px }
.qm-stat { background: var(--color-surface-base); border: 1px solid var(--color-border); border-radius: var(--radius-button); padding: 16px }
.qm-stat b { display: block; font-size: 22px; font-family: var(--font-display) }
.qm-stat span { font-size: 12px; color: var(--color-text-secondary) }
.qm-curve { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 8px 0 24px }
.qm-bar { flex: 1; background: var(--color-gradient-accent); border-radius: 8px 8px 2px 2px; min-height: 8px; position: relative }
.qm-bar span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap }
.qm-q { border: 1px solid var(--color-border); border-radius: var(--radius-button); padding: 12px; margin-bottom: 8px; background: var(--color-surface-base) }
.qm-q textarea, .qm-q input { width: 100% }
.qm-diff { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px }
.qm-diff del { color: var(--color-error) }
.qm-diff ins { color: var(--color-success); text-decoration: none }
.qm-toast { position: fixed; bottom: 24px; right: 24px; background: var(--color-text-primary); color: #fff; padding: 12px 16px; border-radius: var(--radius-button); opacity: 0; transform: translateY(8px); pointer-events: none; transition: 180ms ease; z-index: 40; max-width: 320px }
.qm-toast.is-on { opacity: 1; transform: none }
.qm-toast--error { background: var(--color-error) }
.qm-empty { text-align: center; padding: 48px 16px; color: var(--color-text-secondary) }
.qm-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px }
@media (max-width: 860px) {
.qm-split { grid-template-columns: 1fr }
}
.qm-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--color-gradient-accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 20px; flex-shrink: 0 }
.qm-book-sheet { background: var(--color-surface-base); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px; position: sticky; top: 16px }
.qm-stars-input { display: flex; gap: 4px }
.qm-stars-input button { background: none; border: 0; font-size: 22px; cursor: pointer; color: #ccc }
.qm-stars-input button.is-on { color: #F5A524 }
.qm-cert-q { margin-bottom: 16px }
.qm-cert-q label { display: block; padding: 6px 0; cursor: pointer }
.qm-head { display: flex; align-items: center; gap: 12px }
.qm-list { display: flex; flex-direction: column; gap: 10px }
.qm-row label { display: flex; align-items: center; gap: 6px }