.qg-section { margin-top: 22px; }
.qg-section-heading, .qg-card-heading, .qg-card-actions, .qg-cycle-top, .qg-cycle-bottom, .qg-group-heading, .qg-library-card-top, .qg-log-heading, .qg-schedule-date, .qg-detail-heading, .qg-library-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qg-section-heading { align-items: start; margin-bottom: 14px; }
.qg-section-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.5px; }
.qg-section-heading p { color: var(--ink-2, #58645e); font-size: 11px; margin: 5px 0 0; }
.qg-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--hairline, #e8ece8); background: var(--card, white); color: var(--ink-2, #58645e); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; white-space: normal; }
.qg-button:hover { border-color: var(--sage, #739f80); }
.qg-button:disabled { opacity: .45; cursor: default; }
.qg-button:focus-visible, .qg-game-title:focus-visible, .qg-library-card:focus-visible, .qg-schedule-row button:focus-visible { outline: 3px solid var(--sky, #7bb5d0); outline-offset: 3px; }
.qg-primary { background: var(--sage-dark, #537b60); color: white; border-color: transparent; }
.qg-text-button { border-color: transparent; background: transparent; padding: 7px 3px; color: var(--sage-dark, #537b60); }
.qg-cycle { padding: 15px; background: var(--sage-soft, #f0f7f2); border: 1px solid #dceade; border-radius: 17px; }
.qg-cycle-top strong { font-size: 14px; }
.qg-cycle-top > span { font-size: 11px; color: var(--ink-2, #58645e); }
.qg-progress { display: block; appearance: none; width: 100%; height: 5px; border: 0; border-radius: 10px; background: #dbe7de; overflow: hidden; margin: 13px 0 6px; }
.qg-progress::-webkit-progress-bar { background: #dbe7de; border-radius: inherit; }
.qg-progress::-webkit-progress-value { background: var(--sage, #739f80); border-radius: inherit; }
.qg-progress::-moz-progress-bar { background: var(--sage, #739f80); border-radius: inherit; }
.qg-cycle-bottom > span { font-size: 11px; color: var(--ink-2, #58645e); }
.qg-cycle-bottom b { color: var(--sage-dark, #537b60); }
.qg-help { font-size: 11px; line-height: 1.65; color: var(--ink-2, #58645e); margin: 8px 0; }
.qg-cycle .qg-help { margin: 3px 0 0; font-size: 10px; }
.qg-day-group { margin-top: 21px; }
.qg-group-heading { margin: 0 2px 9px; }
.qg-group-heading h3 { font-size: 14px; margin: 0; }
.qg-group-heading > span { font-size: 10px; color: var(--ink-2, #58645e); text-align: right; }
.qg-game-card { background: var(--card, white); padding: 15px; margin-bottom: 10px; border: 1px solid var(--hairline, #e8ece8); border-radius: 16px; box-shadow: 0 2px 7px #2c383103; }
.qg-game-title { display: inline; text-align: left; font: inherit; font-size: 14px; font-weight: 750; line-height: 1.5; border: 0; background: transparent; color: var(--ink, #2e3532); padding: 0; cursor: pointer; }
.qg-code { font-size: 11px; font-weight: 750; color: var(--sage-dark, #537b60); display: inline-block; min-width: 20px; margin-right: 4px; }
.qg-count { font-size: 10px; white-space: nowrap; border-radius: 8px; padding: 4px 6px; color: var(--sage-dark, #537b60); background: var(--sage-light, #e6f2ea); }
.qg-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.qg-tags span { padding: 3px 6px; border-radius: 6px; background: #f4f5f3; color: var(--ink-2, #58645e); font-size: 10px; }
.qg-goal { font-size: 12px; line-height: 1.7; color: var(--ink-2, #58645e); margin: 10px 0 12px; }
.qg-last-log { background: var(--sage-soft, #f0f7f2); border-radius: 8px; padding: 7px 8px; color: var(--sage-dark, #537b60); font-size: 11px; line-height: 1.5; }
.qg-card-actions { margin-top: 5px; }
.qg-notice { padding: 12px; background: var(--warm-soft, #fff6ef); color: #805b40; font-size: 12px; line-height: 1.7; border-radius: 12px; }
.qg-sync-status { font-size: 10px; line-height: 1.7; color: var(--ink-2, #58645e); margin: 15px 3px; }
.qg-empty { font-size: 12px; line-height: 1.8; color: var(--ink-2, #58645e); padding: 16px 10px; text-align: center; }
.qg-modal { border: 0; border-radius: 22px; padding: 0; width: min(94vw, 560px); max-height: min(90vh, 900px); max-height: min(90dvh, 900px); color: var(--ink, #2e3532); background: var(--bg, #f9f8f5); box-shadow: 0 20px 90px #20332935; overflow: hidden; }
.qg-modal::backdrop { background: #243a2f70; backdrop-filter: blur(3px); }
.qg-modal-shell { display: flex; flex-direction: column; max-height: min(90vh, 900px); max-height: min(90dvh, 900px); }
.qg-modal-header { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 14px 17px; background: var(--card, white); border-bottom: 1px solid var(--hairline, #e8ece8); flex: 0 0 auto; }
.qg-modal-header h2 { margin: 0; flex: 1; font-size: 17px; line-height: 1.4; }
.qg-modal-header .qg-button { white-space: nowrap; flex-shrink: 0; }
.qg-modal-content { overflow: auto; overscroll-behavior: contain; padding: 16px 18px 24px; }
.qg-intro { font-size: 12px; color: var(--ink-2, #58645e); line-height: 1.8; margin: 0 0 15px; }
.qg-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.qg-library-actions { margin: 0 0 16px; }
.qg-filter-grid label { font-size: 11px; color: var(--ink-2, #58645e); min-width: 0; }
.qg-filter-grid .qg-search-label { grid-column: 1 / -1; }
.qg-filter-grid input, .qg-filter-grid select, .qg-field input, .qg-field select, .qg-field textarea { width: 100%; min-width: 0; margin-top: 5px; min-height: 42px; padding: 9px 10px; border-radius: 10px; border: 1px solid #dce2dc; background: white; color: var(--ink, #2e3532); font: inherit; font-size: 14px; }
.qg-filter-grid select { font-size: 12px; }
.qg-field textarea { resize: vertical; line-height: 1.6; }
.qg-filter-grid input:focus, .qg-filter-grid select:focus, .qg-field input:focus, .qg-field select:focus, .qg-field textarea:focus { outline: 2px solid #90b39b; outline-offset: 1px; }
.qg-library-summary { font-size: 10px; line-height: 1.7; margin: 12px 1px; color: var(--ink-2, #58645e); }
.qg-library-summary b { white-space: nowrap; }
.qg-library-card { display: block; width: 100%; padding: 14px; border: 1px solid var(--hairline, #e8ece8); border-radius: 13px; text-align: left; background: white; margin-bottom: 9px; cursor: pointer; font: inherit; color: inherit; }
.qg-library-card-top { align-items: start; }
.qg-library-card-top strong { font-size: 13px; line-height: 1.55; }
.qg-card-meta { display: block; font-size: 10px; color: var(--ink-2, #58645e); line-height: 1.6; margin-top: 5px; }
.qg-status { border-radius: 7px; padding: 4px 7px; font-size: 10px; font-weight: 600; white-space: nowrap; flex-shrink: 0; background: #edf3ed; color: #52765a; }
.qg-status-graduated { background: #f1eefa; color: #7a69a9; }
.qg-status-paused { background: #fdf0e7; color: #936647; }
.qg-status-not_separately_reviewed { background: #f0f1f0; color: #747b76; }
.qg-detail-heading { justify-content: flex-start; margin-bottom: 15px; }
.qg-facts { margin: 0; padding: 14px; border-radius: 13px; background: white; }
.qg-facts > div + div { margin-top: 13px; }
.qg-facts dt { font-size: 10px; color: var(--ink-2, #58645e); margin-bottom: 4px; }
.qg-facts dd { font-size: 13px; line-height: 1.7; margin: 0; }
.qg-detail-actions { display: flex; gap: 8px; margin-top: 16px; }
.qg-detail-actions .qg-button { flex: 1; }
.qg-subtitle { font-size: 14px; margin: 25px 0 12px; }
.qg-subtitle span { font-size: 11px; margin-left: 6px; color: var(--ink-2, #58645e); font-weight: normal; }
.qg-log { background: white; border: 1px solid var(--hairline, #e8ece8); border-radius: 12px; padding: 12px; margin-bottom: 9px; }
.qg-log-heading { font-size: 12px; }
.qg-log-heading span { color: var(--sage-dark, #537b60); font-size: 11px; }
.qg-log p { font-size: 11px; line-height: 1.75; color: var(--ink-2, #58645e); margin: 8px 0 0; }
.qg-log .qg-log-note { color: var(--ink, #2e3532); white-space: pre-wrap; }
.qg-history { border-top: 1px solid var(--hairline, #e8ece8); padding: 14px 0; margin-top: 12px; }
.qg-history summary { font-size: 12px; font-weight: 650; cursor: pointer; }
.qg-history > p { font-size: 11px; line-height: 1.7; }
.qg-form-game { margin: 0 0 10px; font-weight: 750; font-size: 15px; }
.qg-field { display: block; font-size: 12px; font-weight: 600; margin: 17px 0; }
.qg-choices { border: 0; margin: 18px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qg-choices legend { font-size: 12px; font-weight: 650; margin-bottom: 10px; }
.qg-choices label { display: inline-flex; position: relative; }
.qg-choices input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.qg-choices span { display: block; font-size: 12px; font-weight: 500; border: 1px solid #dfe5df; border-radius: 10px; background: white; padding: 10px 11px; cursor: pointer; }
.qg-choices input:checked + span { color: var(--sage-dark, #537b60); background: var(--sage-light, #e6f2ea); border-color: #84a68d; }
.qg-choices input:focus-visible + span { outline: 3px solid var(--sky, #7bb5d0); outline-offset: 2px; }
.qg-check { display: flex; gap: 9px; align-items: start; font-size: 12px; line-height: 1.7; margin: 15px 0; }
.qg-check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--sage-dark, #537b60); flex-shrink: 0; }
.qg-confirm { border-radius: 10px; padding: 12px; background: var(--sage-soft, #f0f7f2); }
.qg-form-error { font-size: 12px; color: #a94b4e; line-height: 1.65; }
.qg-form-error:empty { display: none; }
.qg-submit { width: 100%; min-height: 44px; margin-top: 8px; }
.qg-schedule-total { color: var(--sage-dark, #537b60); font-size: 12px; font-weight: 700; margin: 18px 0 12px; }
.qg-schedule-day { background: white; border: 1px solid var(--hairline, #e8ece8); border-radius: 13px; padding: 11px 13px; margin-bottom: 12px; }
.qg-schedule-date strong { font-size: 13px; }
.qg-schedule-row { display: grid; grid-template-columns: 65px 1fr; gap: 5px; margin: 9px 0; font-size: 11px; align-items: start; }
.qg-schedule-row > span { color: var(--ink-2, #58645e); padding-top: 5px; font-size: 10px; }
.qg-schedule-row button { border: 0; border-radius: 7px; background: #f4f7f3; color: var(--ink, #2e3532); font: inherit; padding: 5px 6px; margin: 0 4px 5px 0; cursor: pointer; text-align: left; line-height: 1.5; }
.qg-recommend { border-radius: 15px; background: white; padding: 15px; margin-top: 16px; border: 1px solid var(--hairline, #e8ece8); }
.qg-recommend h3 { font-size: 15px; margin: 0 0 12px; }
.qg-recommend > p { font-size: 12px; line-height: 1.7; color: var(--ink-2, #58645e); }
.qg-recommend-item { padding: 12px 0; border-top: 1px solid var(--hairline, #e8ece8); display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.qg-recommend-item .qg-game-title { grid-column: 1; }
.qg-recommend-item > span { grid-column: 1; font-size: 10px; color: var(--ink-2, #58645e); }
.qg-recommend-item .qg-button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
@media (max-width: 350px) { .qg-modal-content { padding: 14px 12px 20px; } .qg-cycle-top, .qg-cycle-bottom { gap: 5px; } .qg-cycle-top strong { font-size: 12px; } .qg-cycle-top > span { font-size: 10px; } .qg-section-heading h2 { font-size: 19px; } .qg-group-heading > span { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .qg-modal *, .qg-section * { scroll-behavior: auto; } }