:root { --briefq-header-offset: 90px; }
.briefq-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px auto; align-items: center; justify-content: center; max-width: 420px; }
.briefq-toolbar input[type=search] { flex: 1 1 240px; padding: 8px 16px; border: 1px solid #ddd; border-radius: 999px; font-size: 14px; }
.briefq-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; justify-content: center; }
.briefq-chip { padding: 6px 14px; border: 1px solid #ddd; border-radius: 999px; background: #fff; cursor: pointer; font-size: 13px; user-select: none; font-family: inherit; color: inherit; }
.briefq-chip:focus-visible { outline: 2px solid var(--primary-color, #5b3df0); outline-offset: 2px; }
.briefq-chip[aria-pressed="true"] { background: var(--primary-color, #5b3df0); color: #fff; border-color: transparent; }
.brief-item { padding: 14px 0; border-bottom: 1px solid #eee; scroll-margin-top: var(--briefq-header-offset, 90px); }
.brief-item.is-hidden { display: none; }
.brief-item h2.brief-q { margin: 0 0 6px; }
.brief-item .brief-a { margin: 0; }
.brief-item .brief-a > *:first-child { margin-top: 0; }
.brief-item .brief-a > *:last-child { margin-bottom: 0; }
.brief-q { font-weight: 600; font-size: 17px; line-height: 1.45; }
.brief-q .brief-num { color: #888; font-weight: 500; margin-right: 4px; font-variant-numeric: tabular-nums; }
.brief-q .stars { color: #f5b400; margin-left: 6px; font-size: 14px; }
.brief-a { color: #333; line-height: 1.6; font-size: 15px; }
.brief-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.brief-meta .tag { background: #f0f0f5; padding: 3px 10px; border-radius: 6px; font-size: 12px; color: #555; }
.briefq-premium-lock { background: #fff8e6; border: 1px dashed #f0c000; padding: 12px; border-radius: 8px; font-size: 14px; color: #6b4e00; }
.briefq-empty { text-align: center; padding: 40px 0; color: #888; }
.briefq-load-more { display: block; margin: 24px auto; padding: 10px 22px; background: #fff; border: 1px solid var(--primary-color, #5b3df0); color: var(--primary-color, #5b3df0); border-radius: 8px; cursor: pointer; font-weight: 500; font-family: inherit; }
.briefq-load-more:hover { background: var(--primary-color, #5b3df0); color: #fff; }
.briefq-modebar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; font-size: 14px; justify-content: center; }
.briefq-modebtn { padding: 8px 14px; border: 1px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 14px; }
.briefq-modebtn[aria-pressed="true"] { background: var(--primary-color, #5b3df0); color: #fff; border-color: transparent; }
.briefq-progress { display: none; align-items: center; gap: 10px; color: #555; }
.briefq-progress.is-on { display: inline-flex; }
.briefq-progress-bar { width: 120px; height: 8px; background: #eee; border-radius: 999px; overflow: hidden; }
.briefq-progress-fill { height: 100%; background: #16a34a; width: 0; transition: width 0.3s; }
.briefq-reset { background: none; border: none; color: var(--primary-color, #5b3df0); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; display: none; }
.briefq-reset.is-on { display: inline; }
mark { background: #fff3a0; padding: 0 1px; border-radius: 2px; }
.flashcard-mode .brief-item { background: #fafafa; padding: 12px 16px; border-radius: 10px; margin-bottom: 8px; border: 1px solid #eee; }
.flashcard-mode .brief-item.is-mastered { opacity: 0.45; background: #f0f9f4; border-color: #c6f6d5; }
.flashcard-mode .brief-a:not(.is-revealed) { display: none; }
.flashcard-mode .briefq-reveal { display: inline-block; }
.flashcard-mode .briefq-card-actions { display: none; }
.flashcard-mode .briefq-card-actions.is-shown { display: flex; gap: 8px; margin-top: 12px; }
.briefq-reveal { display: none; padding: 5px 12px; background: var(--primary-color, #5b3df0); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; margin-top: 4px; font-family: inherit; }
.briefq-card-actions { display: none; }
.briefq-card-actions button { padding: 6px 14px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; }
.briefq-card-actions .btn-got { border-color: #16a34a; color: #16a34a; }
.briefq-card-actions .btn-got:hover { background: #16a34a; color: #fff; }
.briefq-card-actions .btn-review { border-color: #d97706; color: #d97706; }
.briefq-card-actions .btn-review:hover { background: #d97706; color: #fff; }
.brief-share { position: relative; }
.brief-share summary { list-style: none; cursor: pointer; padding: 3px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 12px; color: #555; user-select: none; }
.brief-share summary::-webkit-details-marker { display: none; }
.brief-share summary::marker { display: none; content: ''; }
.brief-share summary:hover { background: #fafafa; }
.brief-share[open] summary { background: #f5f5f5; border-color: #bbb; }
.brief-share .share-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 5; min-width: 140px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.brief-share .share-menu .copy-link,
.brief-share .share-menu .wa-share { display: block; text-align: left; padding: 7px 10px; font-size: 13px; border: none; background: none; cursor: pointer; color: #333; text-decoration: none; border-radius: 4px; font-family: inherit; }
.brief-share .share-menu .copy-link:hover,
.brief-share .share-menu .wa-share:hover { background: #f5f5f5; }
.briefq-readall { padding: 8px 14px; border: 1px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.briefq-readall:hover { background: #fafafa; }
.briefq-readall.is-speaking { background: var(--primary-color, #5b3df0); color: #fff; border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
    .brief-share { opacity: 0.35; transition: opacity 0.15s; }
    .brief-item:hover .brief-share,
    .brief-share[open],
    .brief-share:focus-within { opacity: 1; }
}
.briefq-related { margin: 40px 0 20px; padding-top: 24px; border-top: 1px solid #eee; }
.briefq-related h2 { font-size: 18px; margin: 0 0 16px; }
.briefq-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.briefq-related-card { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid #ddd; border-radius: 10px; text-decoration: none; color: #333; transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.briefq-related-card:hover { border-color: var(--primary-color, #5b3df0); background: #faf9ff; transform: translateY(-1px); }
.briefq-related-icon { font-size: 18px; flex-shrink: 0; line-height: 1; width: 24px; text-align: center; color: var(--primary-color, #5b3df0); }
.briefq-related-label { font-weight: 500; font-size: 14.5px; }