/* CSS Variables */
:root {
	--widget-circle-size: 15px; /* original was 20px */
	--widget-circle-size-hover: 30px; /* expanded size on hover */
	--widget-container-width: 16px; /* Fixed width - text always starts after this */
	--widget-container-height: 15px; /* Container height for Q/T/M widgets */
	--widget-center-x: 12px; /* Circle center X position within container */
	--widget-center-y: 7px; /* Circle center Y position within container */
	--widget-vertical-offset: 0px;
	--q-letter-offset-x: 0px;
	--q-letter-offset-y: 5px;
	--t-letter-offset-x: 0px;
	--t-letter-offset-y: 2px;
	--m-letter-offset-x: 0px;
	--m-letter-offset-y: 2px;
}

/* Q Widget Styling */
.qa-q-widget {
	display: inline-block;
	width: var(--widget-container-width);
	height: var(--widget-container-height);
	margin-left: 2px;
	margin-right: 0.3em;
	position: relative;
	top: var(--widget-vertical-offset);
	cursor: pointer;
	user-select: none;
	clip-path: inset(-50px 0px -50px -50px); /* clip right edge, allow overflow elsewhere */
	isolation: isolate; /* Create stacking context so ::before z-index:-1 doesn't go behind text */
	flex-shrink: 0; /* Prevent shrinking in flex container */
	align-self: flex-start; /* Stay at top when text wraps to multiple lines */
}

/* Q widget circle - centered at fixed position */
.qa-q-widget::before {
	z-index: -1;
	content: "o";
	position: absolute;
	left: var(--widget-center-x);
	top: var(--widget-center-y);
	transform: translate(-50%, -50%) translate(var(--q-letter-offset-x), calc(var(--q-letter-offset-y) - 1px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--widget-circle-size);
	height: var(--widget-circle-size);
	border-radius: 50%;
	background-color: transparent;
	color: var(--text-normal);
	font-family: Calibri, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
}

.qa-q-widget:hover::before {
	content: "Q";
	transform: translate(-50%, -50%) translate(var(--q-letter-offset-x), var(--q-letter-offset-y));
	width: var(--widget-circle-size-hover);
	height: var(--widget-circle-size-hover);
	background-color: var(--background-modifier-hover);
}

/* A Widget Styling (shown when editing answer field) */
.qa-a-widget {
	display: inline-block;
	width: var(--widget-container-width);
	height: var(--widget-container-height);
	margin-left: 2px;
	margin-right: 0.3em;
	position: relative;
	top: var(--widget-vertical-offset);
	cursor: pointer;
	user-select: none;
	clip-path: inset(-50px 0px -50px -50px);
	isolation: isolate;
	flex-shrink: 0;
	align-self: flex-start;
}

.qa-a-widget::before {
	z-index: -1;
	content: "A";
	position: absolute;
	left: var(--widget-center-x);
	top: var(--widget-center-y);
	transform: translate(-50%, -50%) translate(var(--q-letter-offset-x), var(--q-letter-offset-y));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--widget-circle-size);
	height: var(--widget-circle-size);
	border-radius: 50%;
	background-color: transparent;
	color: var(--text-normal);
	font-family: Calibri, sans-serif;
	font-size: var(--widget-font-size);
	font-weight: 500;
}

.qa-a-widget:hover::before {
	width: var(--widget-circle-size-hover);
	height: var(--widget-circle-size-hover);
	background-color: var(--background-modifier-hover);
}

/* T Widget Styling */
.qa-t-widget {
	display: inline-block;
	width: var(--widget-container-width);
	height: var(--widget-container-height);
	margin-left: 2px;
	margin-right: 0.3em;
	position: relative;
	top: var(--widget-vertical-offset);
	cursor: pointer;
	user-select: none;
	clip-path: inset(-50px 0px -50px -50px); /* clip right edge, allow overflow elsewhere */
}

/* T widget square - centered at fixed position */
.qa-t-widget::before {
	z-index: -1;
	content: "t";
	position: absolute;
	left: var(--widget-center-x);
	top: var(--widget-center-y);
	transform: translate(-50%, -50%) translate(var(--t-letter-offset-x), var(--t-letter-offset-y));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--widget-circle-size);
	height: var(--widget-circle-size);
	border-radius: 3px;
	background-color: transparent;
	color: var(--text-normal);
	font-family: Calibri, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 14px;
}

.qa-t-widget:hover::before {
	width: var(--widget-circle-size-hover);
	height: var(--widget-circle-size-hover);
	border-radius: 4px;
	background-color: var(--background-modifier-hover);
}

/* Bullet Widget (for child lines under T/M) */
.qa-bullet-widget {
	display: inline;
	font-size: 1.3em;
	color: #aaaaaa;
	margin-right: 0.2em;
}

/* Card Marker Widget ({{card:id}} format - database-backed) */
.qa-card-marker {
	display: inline-flex;
	align-items: baseline;
	cursor: pointer;
	position: relative;
}

/* Selection styling handled by .qa-line-selected line decoration */

.qa-question-text {
	display: inline;
	cursor: text;
	min-width: 0; /* Allow shrinking in flex context when max-width constrains container */
	overflow: hidden;
}

/* Selected Q line styling */
.qa-line-selected {
	background-color: rgba(0, 0, 0, 0.03);
	outline: 1px solid #ccc;
	outline-offset: -1px;
	border-radius: 4px;
}

.theme-dark .qa-line-selected {
	background-color: rgba(255, 255, 255, 0.03);
	outline: 1px solid #555;
}

/* Editing mode line styling (same as selected) */
.qa-line-editing {
	background-color: rgba(0, 0, 0, 0.03);
	outline: 1px solid #ccc;
	outline-offset: -1px;
	border-radius: 4px;
}

.theme-dark .qa-line-editing {
	background-color: rgba(255, 255, 255, 0.03);
	outline: 1px solid #555;
}

.qa-edit-textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background: transparent;
	border: none;
	outline: none;
	resize: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
	color: inherit;
	caret-color: auto !important;
	/* Make it inline and size to content */
	display: inline-block;
	vertical-align: top;
	min-width: 50px;
	width: auto;
	max-width: calc(100% - 2em);
	field-sizing: content;
	overflow-wrap: break-word;
	word-break: break-all;
}

/* Hide ALL cursor mechanisms in selection mode */
.qa-selection-mode .cm-cursorLayer {
	display: none !important;
	visibility: hidden !important;
}
.qa-selection-mode .cm-cursor,
.qa-selection-mode .cm-cursor-primary {
	display: none !important;
}
.qa-selection-mode .cm-content {
	caret-color: transparent !important;
}

/* Hide ALL cursor mechanisms in editing mode */
.qa-editing-mode .cm-cursorLayer {
	display: none !important;
	visibility: hidden !important;
}
.qa-editing-mode .cm-cursor,
.qa-editing-mode .cm-cursor-primary {
	display: none !important;
}
.qa-editing-mode .cm-content {
	caret-color: transparent !important;
}

/* Card Editor Modal - style the entire modal */
.modal:has(.qa-card-editor),
.modal:has(.qa-card-editor) .modal-content {
	background-color: #F0F0F0;
}

.theme-dark .modal:has(.qa-card-editor),
.theme-dark .modal:has(.qa-card-editor) .modal-content {
	background-color: #3a3a38;
}

.qa-card-editor {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qa-editor-title {
	font-size: 0.85em;
	color: var(--text-muted);
	margin-bottom: -0.5em;
}



.qa-card-editor .qa-srs-browse-editor-textarea {
	min-height: 80px;
	resize: vertical;
}

.qa-card-editor .qa-button-row {
	display: flex;
	justify-content: flex-end;
	gap: 0.5em;
}

.qa-card-editor button {
	padding: 0.5em 1em;
}

/* Preview pane for markdown rendering */
.qa-preview-pane {
	min-height: 80px;
	padding: 0.75em;
	background-color: #ffffff;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow-y: auto;
	max-height: 200px;
}

.theme-dark .qa-preview-pane {
	background-color: #2a2a2a;
	border-color: #555;
}

/* Rendered markdown styling in preview */
.qa-preview-pane p {
	margin: 0.5em 0;
}

.qa-preview-pane p:first-child {
	margin-top: 0;
}

.qa-preview-pane p:last-child {
	margin-bottom: 0;
}

.qa-preview-pane code {
	background-color: rgba(0, 0, 0, 0.05);
	padding: 0.1em 0.3em;
	border-radius: 3px;
	font-family: var(--font-monospace);
}

.theme-dark .qa-preview-pane code {
	background-color: rgba(255, 255, 255, 0.1);
}

.qa-preview-pane pre {
	background-color: rgba(0, 0, 0, 0.05);
	padding: 0.75em;
	border-radius: 4px;
	overflow-x: auto;
}

.theme-dark .qa-preview-pane pre {
	background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   Add Card Modal - Deck Selector & Deck Picker
   ============================================================================ */

.qa-add-card-deck-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.qa-add-card-deck-btn {
	padding: 4px 12px;
	border-radius: 4px;
	cursor: pointer;
	background: var(--interactive-normal);
	border: 1px solid var(--background-modifier-border);
	color: var(--text-normal);
	font-size: 13px;
}
.qa-add-card-deck-btn:hover {
	background: var(--interactive-hover);
}

/* Deck picker modal */
.modal:has(.qa-deck-picker),
.modal:has(.qa-deck-picker) .modal-content {
	background-color: #F0F0F0;
}
.theme-dark .modal:has(.qa-deck-picker),
.theme-dark .modal:has(.qa-deck-picker) .modal-content {
	background-color: #3a3a38;
}
.qa-deck-picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.qa-deck-picker-list {
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
}
.qa-deck-picker-item {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 13px;
	border-bottom: 1px solid var(--background-modifier-border);
}
.qa-deck-picker-item:last-child {
	border-bottom: none;
}
.qa-deck-picker-item:hover {
	background: var(--interactive-hover);
}
.qa-deck-picker-selected {
	background: var(--interactive-accent);
	color: #fff;
}
.qa-deck-picker-selected:hover {
	background: var(--interactive-accent-hover);
	color: #fff;
}
.qa-deck-picker-create {
	color: var(--interactive-accent);
	font-weight: 500;
}
.qa-deck-picker-input {
	flex: 1;
	padding: 4px 8px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	margin-right: 8px;
	background: var(--background-primary);
	color: var(--text-normal);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.qa-hidden {
	display: none !important;
}

/* Status bar */
.qa-status-bar {
	cursor: pointer;
	padding: 0 0.5em;
}

.qa-status-bar:hover {
	background-color: var(--background-modifier-hover);
	border-radius: 3px;
}

/* ============================================================================
   M Widget Styling (Mind Map)
   ============================================================================ */

.qa-m-widget {
	display: inline-block;
	width: var(--widget-container-width);
	height: var(--widget-container-height);
	margin-left: 2px;
	margin-right: 0.3em;
	position: relative;
	top: var(--widget-vertical-offset);
	cursor: pointer;
	user-select: none;
	clip-path: inset(-50px -2px -50px -50px); /* clip right edge, allow overflow elsewhere */
}

/* M widget triangle - centered at fixed position */
.qa-m-widget::before {
	z-index: -1;
	content: "m";
	position: absolute;
	left: var(--widget-center-x);
	top: var(--widget-center-y);
	transform: translate(-50%, -50%) translate(var(--m-letter-offset-x), var(--m-letter-offset-y));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--widget-circle-size);
	height: var(--widget-circle-size);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	background-color: var(--text-normal);
	color: transparent;
	font-family: Calibri, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 14px;
}

.qa-m-widget:hover::before {
	width: var(--widget-circle-size-hover);
	height: var(--widget-circle-size-hover);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	background-color: var(--background-modifier-hover);
}

/* ============================================================================
   Bubble Modal Styling
   ============================================================================ */

.qa-bubble-modal {
	width: 90vw !important;
	max-width: 1200px !important;
	height: 80vh !important;
}

.qa-bubble-modal .modal-content {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	overflow: hidden;
}

.qa-bubble-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 1.5em;
	background-color: #f5f5f5;
	border-bottom: 1px solid #ddd;
	color: #333;
}

.qa-bubble-title {
	margin: 0;
	font-size: 1.3em;
	font-weight: 500;
	color: #333;
}

.qa-bubble-close {
	background: #e0e0e0;
	border: none;
	color: #666;
	font-size: 1.5em;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.qa-bubble-close:hover {
	background: #d0d0d0;
	color: #333;
}

.qa-bubble-container {
	flex: 1;
	position: relative;
	background: #666666;  /* Grey - matches grid background */
	overflow: hidden;
}

/* Tab bar */
.qa-bubble-tabs {
	display: flex;
	gap: 0;
	padding: 0 1.5em;
	background: #e8e8e8;
}

.qa-bubble-tab {
	padding: 0.6em 1.5em;
	color: #666;
	font-size: 0.95em;
	cursor: pointer;
	transition: color 0.2s ease;
}

.qa-bubble-tab:hover {
	color: #333;
}

.qa-bubble-tab.active {
	color: #333;
	border-bottom: 2px solid #555;
}

/* Grid view container */
.qa-grid-container {
	flex: 1;
	position: relative;
	background: #666666;
	overflow: auto;
}

.qa-grid-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.qa-grid-boxes {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: 400px;
}

.qa-grid-box-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
}

.qa-grid-box-wrapper.dragging {
	cursor: grabbing;
}

.qa-grid-blob {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	pointer-events: none;
	border: none;
	box-shadow: none;
	outline: none;
	background: transparent;
}

.qa-grid-box {
	background: transparent;
	border: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 1;
	min-width: 15ch;
	min-height: 2em;
	text-align: center;
}

.qa-grid-box-text {
	color: #222222;
	font-size: 0.95em;
	font-weight: 500;
	text-align: center;
	display: block;
	white-space: pre-wrap;
	word-wrap: break-word;
	position: relative;
	z-index: 1;
}

/* ============ Sand tab ============ */
.qa-sand-container {
	flex: 1;
	position: relative;
	background: #e8d5a3;
	overflow: auto;
}

.qa-sand-filtered {
	width: 100%;
	height: 100%;
}

.qa-sand-grid {
	display: grid;
	gap: 12px;
	padding: 24px;
	justify-items: center;
	align-items: center;
}

.qa-sand-cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	min-width: 15ch;
	min-height: 2em;
	text-align: center;
	transition: opacity 0.8s ease, box-shadow 0.8s ease, background 0.8s ease, border-radius 0.8s ease;
	will-change: transform;
	box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
	background: transparent;
	border-radius: 0;
}

.qa-sand-cell-highlight {
	background: rgba(160, 155, 145, 0.35);
	border-radius: 12px;
	box-shadow: 0 2px 10px 3px rgba(100, 95, 85, 0.4);
}

.qa-sand-cell-empty {
	visibility: hidden;
}

.qa-sand-cell-text {
	color: #000000;
	font-size: 0.95em;
	font-weight: 500;
	text-align: center;
	display: block;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.qa-sand-slider-wrap {
	position: absolute;
	bottom: 12px;
	right: 16px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.85);
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 0.85em;
}

.qa-sand-slider-label {
	color: #333;
	font-weight: 500;
	min-width: 3em;
}

.qa-sand-slider {
	width: 100px;
	cursor: pointer;
}

.qa-sand-select {
	font-size: 0.85em;
	padding: 2px 4px;
	border-radius: 4px;
	border: 1px solid #ccc;
	cursor: pointer;
}

/* Wrapper positioned absolutely */
.qa-bubble-wrapper {
	transition: transform 0.15s ease;
}

.qa-bubble-wrapper:hover {
	transform: scale(1.05);
}

/* Inner bubble - background comes from JS-generated canvas */
.qa-bubble {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em;
	overflow: hidden;
}

.qa-bubble-text {
	color: #333;
	font-size: 0.9em;
	text-align: center;
	word-wrap: break-word;
	overflow: hidden;
	max-width: 100%;
	max-height: 100%;
}

/* Child bubbles container (inside parent bubble) */
.qa-bubble-children {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
}

.qa-bubble-children .qa-bubble {
	pointer-events: auto;
}

/* ============================================================================
   Mode Toggle (Q/S switch)
   ============================================================================ */

.qa-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
	user-select: none;
}

.qa-mode-toggle:hover {
	background-color: var(--background-modifier-hover);
}

.qa-mode-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	transition: color 0.15s;
}

.qa-mode-label.active {
	color: var(--text-normal);
}

.qa-mode-switch {
	width: 24px;
	height: 14px;
	background: var(--background-modifier-border);
	border-radius: 7px;
	position: relative;
	transition: background 0.15s;
}

.qa-mode-switch.statement {
	background: var(--interactive-accent);
}

.qa-mode-knob {
	width: 10px;
	height: 10px;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: left 0.15s;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.qa-mode-switch.statement .qa-mode-knob {
	left: 12px;
}

/* Sync button */
.qa-sync-button {
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 14px;
}

.qa-sync-button:hover {
	background-color: var(--background-modifier-hover);
}

/* ============================================================================
   Statement Sync Modal
   ============================================================================ */

.qa-sync-modal {
	padding: 20px;
}

.qa-sync-modal h2 {
	margin-top: 0;
	margin-bottom: 16px;
}

.qa-sync-status {
	margin-bottom: 12px;
	color: var(--text-muted);
}

.qa-sync-progress-container {
	width: 100%;
	height: 8px;
	background: var(--background-modifier-border);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 8px;
}

.qa-sync-progress-bar {
	height: 100%;
	background: var(--interactive-accent);
	border-radius: 4px;
	transition: width 0.2s;
}

.qa-sync-progress-text {
	text-align: center;
	color: var(--text-muted);
	font-size: 12px;
}

/* Statement mode indicator */
.qa-question-text.qa-statement-mode {
	font-style: italic;
	color: var(--text-accent);
}

/* Empty card placeholder */
.qa-empty-placeholder {
	color: #aaa;
	font-style: italic;
}

/* Truncated card indicator */
.qa-truncated {
	color: #969696;
}

/* ============================================================================
   Short Card Widget (inline auto-edit for cards <100 chars)
   ============================================================================ */

.qa-short-card {
	display: inline-flex;
	align-items: baseline;
	position: relative; /* For absolute positioning of hand area */
}

.qa-short-edit-textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	resize: none;
	padding: 0 !important;
	margin: 0;
	overflow: hidden;
	color: inherit;
	display: inline-block;
	vertical-align: baseline;
	min-width: 1ch; /* Minimal - let content determine width */
	min-height: 0;
	width: auto;
	max-width: calc(100% - 3em);
	field-sizing: content;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Ensure caret is visible (parent .cm-content may hide it in editing mode) */
	caret-color: auto !important;
}

.qa-short-edit-textarea:focus {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Short card display text - clickable to edit */
.qa-short-display {
	cursor: text;
}

/* Buffer zone to the right of short card text - click to position at end */
.qa-short-buffer {
	display: inline-block;
	width: 50px;
	min-width: 50px;
	max-width: 50px;
	flex-shrink: 0;
	flex-grow: 0;
	height: 1em;
	cursor: text;
}

/* Hand area - extends to fill rest of line, click enters Selected state */
.qa-short-hand-area {
	position: absolute;
	left: 100%; /* Start after the widget content */
	top: 0;
	width: 2000px;
	height: 100%;
	cursor: pointer;
}

/* Left hand area - extends to fill indent space before widget */
.qa-short-left-hand-area {
	position: absolute;
	right: 100%; /* End at the start of widget content */
	top: 0;
	width: 2000px;
	height: 100%;
	cursor: pointer;
}

/* Ensure hand areas show pointer cursor in CardMarkerWidget context */
.qa-card-marker .qa-short-hand-area,
.qa-card-marker .qa-short-left-hand-area {
	cursor: pointer;
	z-index: 1; /* Ensure hand areas are above other elements */
}

/* Disabled toggle (F/X when in statement mode) */
.qa-toggle-disabled {
	opacity: 0.4;
	cursor: not-allowed !important;
}

.qa-toggle-disabled:hover {
	background-color: transparent !important;
}

/* Preview icon - small grey circle, positioned by JS at right edge of line */
.qa-preview-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
	z-index: 10;
}

.qa-preview-icon:hover {
	background-color: #999;
}

/* Preview popup - shown on hover */
.qa-preview-popup {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	background-color: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 12px;
	min-width: 300px;
	max-width: 500px;
	max-height: 400px;
	overflow-y: auto;
	margin-top: 4px;
}

.qa-preview-question {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--background-modifier-border);
	margin-bottom: 8px;
}

.qa-preview-answer {
	color: var(--text-muted);
}

/* ============================================================================
   Floating Topic Labels (spreadsheet overlay)
   ============================================================================ */

.qa-topic-label {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	color: var(--text-muted);
	pointer-events: none;
	z-index: 11;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	writing-mode: horizontal-tb;
}

/* Vertical lines from top/bottom of group to label text */
.qa-topic-label::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -1px;
	height: calc(50% - 0.55em);
	border-left: 1px solid var(--text-faint);
}

.qa-topic-label::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	height: calc(50% - 0.55em - 2px);
	border-left: 1px solid var(--text-faint);
}

/* Hide horizontal grid lines on topic column cells (keep right border for col 1's left edge) */
.qa-spreadsheet .spreadsheet-cell[data-col="0"] {
	border-bottom: none;
	border-top: none;
}

.qa-spreadsheet .spreadsheet-row:first-child .spreadsheet-cell[data-col="0"] {
	border-top: none;
}

/* Grey dot for card ID cells */
.qa-spreadsheet-id-text {
	color: var(--text-faint);
	font-size: 0.85em;
}

/* Separator cells between topic sections (skip topic column) */
.spreadsheet-cell.qa-separator-cell:not([data-col="0"]) {
	background: #EBEBEB;
}

/* ============================================================================
   Topic Panel Sidebar (Obsidian right pane)
   ============================================================================ */

.qa-topic-panel-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.qa-topic-panel-search-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--background-modifier-border);
}

.qa-topic-panel-search {
	width: 100%;
	padding: 8px 10px;
	padding-right: 28px;
	border: none;
	background: var(--background-primary);
	color: var(--text-normal);
	font-size: 0.9em;
	outline: none;
	box-sizing: border-box;
}

.qa-topic-panel-search:focus {
	border-bottom-color: var(--interactive-accent);
}

.qa-topic-panel-search-clear {
	position: absolute;
	right: 6px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-muted);
	font-size: 14px;
	border-radius: 3px;
}

.qa-topic-panel-search-clear:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.qa-topic-panel-list {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.qa-topic-panel-item {
	padding: 6px 10px;
	cursor: pointer;
	color: var(--text-normal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.1s;
}

.qa-topic-panel-item:hover {
	background: var(--background-modifier-hover);
}

.qa-topic-panel-item.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

.qa-topic-panel-all {
	font-weight: 600;
	border-bottom: 1px solid var(--background-modifier-border);
}

/* Preview icon on each row's far right */
.qa-spreadsheet-preview-icon {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-faint);
	cursor: pointer;
	z-index: 12;
	pointer-events: auto;
	opacity: 0.5;
	transition: opacity 0.15s;
}

.qa-spreadsheet-preview-icon:hover {
	opacity: 1;
	background: var(--text-muted);
}

/* Markdown preview popup */
.qa-spreadsheet-preview {
	z-index: 1000;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 12px 16px;
	max-width: 400px;
	max-height: 300px;
	overflow-y: auto;
	font-size: var(--font-text-size);
}

.qa-spreadsheet-preview-q {
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--background-modifier-border);
}

.qa-spreadsheet-preview-a {
	color: var(--text-muted);
}

.qa-spreadsheet-preview p {
	margin: 0 0 4px 0;
}

.qa-spreadsheet-preview p:last-child {
	margin-bottom: 0;
}

/* ============================================================================
   QA Spreadsheet View
   ============================================================================ */

.qa-spreadsheet-container {
	padding: 16px;
	height: 100%;
	overflow: auto;
}

.qa-spreadsheet-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.qa-spreadsheet-table th {
	background: var(--background-secondary);
	padding: 8px 12px;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid var(--background-modifier-border);
	position: sticky;
	top: 0;
	z-index: 1;
}

.qa-spreadsheet-table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--background-modifier-border);
	vertical-align: top;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qa-spreadsheet-cell-topic {
	width: 150px;
	min-width: 150px;
	color: var(--text-muted);
	font-style: italic;
}

.qa-spreadsheet-cell-question,
.qa-spreadsheet-cell-answer {
	cursor: pointer;
}

.qa-spreadsheet-cell-question:hover,
.qa-spreadsheet-cell-answer:hover {
	background: var(--background-secondary);
}

.qa-spreadsheet-cell-selected {
	background: var(--background-secondary-alt) !important;
	outline: 2px solid var(--interactive-accent);
	outline-offset: -2px;
}

.qa-spreadsheet-cell-editing {
	padding: 0 !important;
	white-space: normal;
	overflow: visible;
}

.qa-spreadsheet-editor {
	width: 100%;
	min-height: 60px;
	padding: 8px 12px;
	border: none;
	background: var(--background-primary);
	color: var(--text-normal);
	font-family: inherit;
	font-size: inherit;
	resize: vertical;
	outline: 2px solid var(--interactive-accent);
}

.qa-spreadsheet-editor:focus {
	outline: 2px solid var(--interactive-accent);
}

.qa-spreadsheet-button {
	cursor: pointer;
	padding: 0 4px;
}

.qa-spreadsheet-button:hover {
	color: var(--interactive-accent);
}

/* ============================================================================
   Blob Debug Modal
   ============================================================================ */

.qa-blob-debug-modal {
	width: 90vw;
	max-width: 1400px;
}

.qa-blob-debug-modal .modal-content {
	padding: 20px;
}

.qa-blob-debug-grid {
	max-height: 70vh;
	overflow-y: auto;
}

.qa-blob-debug-cell h4 {
	margin: 0 0 10px 0;
	color: #fff;
}

/* ============ Ideation tab ============ */
.qa-ideation-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #f8f6f2;
	overflow: hidden;
}

.qa-ideation-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Collapsible panels */
.qa-ideation-panel {
	width: 100%;
}

.qa-ideation-panel-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.95em;
	color: #444;
	user-select: none;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 8px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.qa-ideation-panel-header:hover {
	color: #222;
}

.qa-ideation-panel-arrow {
	font-size: 0.7em;
	color: #999;
	margin-left: 8px;
}

.qa-ideation-panel-body {
	padding: 0 0 8px 0;
	max-width: 600px;
	margin: 0 auto;
}

/* Schema panel — two-column layout */
.qa-ideation-schema-columns {
	display: flex;
	gap: 16px;
	margin-bottom: 12px;
	width: 100%;
}

.qa-ideation-schema-col {
	flex: 1;
	min-width: 0;
}

/* Kernel columns wrapper — tighter gap between kernel columns */
.qa-ideation-kernel-cols-wrap {
	display: flex;
	gap: 4px;
}

/* Per-column k allocation row */
.qa-ideation-allocation-row {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.qa-ideation-alloc-item {
	display: flex;
	align-items: center;
	gap: 4px;
}

.qa-ideation-alloc-label {
	font-size: 0.8em;
	color: #666;
}

.qa-ideation-alloc-input-wrap {
	display: flex;
	align-items: stretch;
	border: 1px solid #ccc;
	border-radius: 3px;
	overflow: hidden;
}

.qa-ideation-alloc-input {
	width: 30px;
	padding: 2px 4px;
	font-size: 0.8em;
	text-align: center;
	border: none;
	outline: none;
	-moz-appearance: textfield;
}

.qa-ideation-alloc-input::-webkit-inner-spin-button,
.qa-ideation-alloc-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qa-ideation-alloc-spinners {
	display: flex;
	flex-direction: column;
	border-left: 1px solid #ccc;
}

.qa-ideation-alloc-spin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	flex: 1;
	font-size: 0.55em;
	color: #888;
	cursor: pointer;
	user-select: none;
}

.qa-ideation-alloc-spin:first-child {
	border-bottom: 1px solid #ccc;
}

.qa-ideation-alloc-spin:hover {
	background: #e8e8e8;
	color: #333;
}

/* Warning triangle for overallocated k */
.qa-ideation-warn {
	font-size: 0.75em;
	color: #c9a000;
	margin-left: 2px;
}

/* Load kernels row — button centered, label doesn't shift it */
.qa-ideation-load-row {
	text-align: center;
	margin-bottom: 12px;
}

.qa-ideation-load-wrap {
	position: relative;
	display: inline-block;
}

.qa-ideation-loaded-label {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-size: 0.8em;
	color: #aaa;
	font-style: italic;
	margin-left: 8px;
}

/* Kernel section — positioned to the right, outside the centered panel body */
.qa-ideation-kernel-section {
	position: absolute;
	right: 0;
	top: 0;
	width: 120px;
}

/* Kernel parent select list */
.qa-ideation-kernel-select {
	max-height: 100px;
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 4px;
}

.qa-ideation-kernel-select-item {
	padding: 2px 6px;
	font-size: 0.85em;
	color: #444;
	cursor: pointer;
	border-radius: 3px;
}

.qa-ideation-kernel-select-item:hover {
	background: #eae7e0;
}

.qa-ideation-kernel-select-placeholder {
	font-size: 0.8em;
	color: #aaa;
	font-style: italic;
	padding: 4px 6px;
}

.qa-ideation-schema-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-bottom: 12px;
	font-size: 0.9em;
	color: #333;
	line-height: 1.6;
}

.qa-ideation-schema-item {
	padding: 1px 0;
}

.qa-ideation-schema-gap {
	padding: 1px 0;
	color: #a08520;
	font-weight: bold;
}

.qa-ideation-control-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 12px;
}

.qa-ideation-k-label {
	font-size: 0.9em;
	color: #555;
	min-width: 3em;
}

.qa-ideation-slider {
	width: 100px;
	cursor: pointer;
}

.qa-ideation-btn {
	padding: 5px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f5f5f5;
	cursor: pointer;
	font-size: 0.9em;
	color: #333;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.qa-ideation-btn:hover {
	background: #e8e8e8;
}

/* Selection display — shape layouts */
.qa-ideation-selection-display {
	min-height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.qa-ideation-shape-label {
	font-size: 0.8em;
	color: #aaa;
	margin-bottom: 8px;
}

.qa-ideation-shape-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-bottom: 10px;
}

.qa-ideation-shape-btn {
	padding: 0 4px;
	font-size: 0.8em;
	border: none;
	background: transparent;
	color: #888;
	cursor: pointer;
	font-weight: normal;
}

.qa-ideation-shape-btn:hover {
	color: #555;
}

.qa-ideation-shape-btn.is-active {
	color: #333;
	font-weight: 700;
}

.qa-ideation-layout-circle {
	position: relative;
	width: 260px;
	height: 260px;
}

.qa-ideation-layout-item {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 4px 10px;
	background: #e0dcd4;
	border-radius: 6px;
	font-size: 0.85em;
	color: #333;
	white-space: nowrap;
	text-align: center;
}

.qa-ideation-layout-grid {
	display: grid;
	gap: 8px;
	justify-content: center;
}

.qa-ideation-layout-item-grid {
	padding: 6px 12px;
	background: #e0dcd4;
	border-radius: 6px;
	font-size: 0.85em;
	color: #333;
	text-align: center;
}

.qa-ideation-layout-triangle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.qa-ideation-triangle-row {
	display: flex;
	gap: 8px;
	justify-content: center;
}

/* Parent-child tree layout */
.qa-ideation-layout-parent-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
}

.qa-ideation-pc-parent {
	padding: 6px 14px;
	background: #d4cfc6;
	border-radius: 8px;
	font-size: 0.9em;
	font-weight: 600;
	color: #333;
	text-align: center;
	align-self: flex-start;
}

.qa-ideation-pc-svg {
	flex-shrink: 0;
	display: block;
	overflow: visible;
}

.qa-ideation-pc-children {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

/* Underneath — tilted square with horizontal shadow beneath */
.qa-ideation-layout-underneath {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px 0 10px 40px;
	position: relative;
}

.qa-ideation-underneath-square {
	padding: 14px;
	background: #eae7e0;
	border-radius: 6px;
	border: 1px solid #d5d0c8;
	transform: rotate(-30deg);
	transform-origin: center center;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.12);
	margin: 20px 0 10px 20px;
	position: relative;
	z-index: 1;
}

.qa-ideation-underneath-grid {
	display: grid;
	gap: 8px;
	justify-content: center;
}

.qa-ideation-underneath-item {
	padding: 6px 12px;
	background: #e0dcd4;
	border-radius: 6px;
	font-size: 0.85em;
	color: #333;
	text-align: center;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.06);
}

.qa-ideation-underneath-shadow {
	position: absolute;
	height: 22px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.10) 0%, transparent 70%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 35%;
	font-size: 1.1em;
	color: rgba(0, 0, 0, 0.7);
	z-index: 0;
}

/* Broad layout */
.qa-ideation-layout-broad {
	position: relative;
}

.qa-ideation-broad-svg {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.qa-ideation-broad-node {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 5px 14px;
	background: #e0dcd4;
	border: 1px solid #c8c2b6;
	border-radius: 50%;
	font-size: 0.82em;
	color: #333;
	white-space: nowrap;
	z-index: 1;
}

.qa-ideation-broad-ghost {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background: rgb(128, 128, 128);
	border-radius: 50%;
	opacity: 0.5;
}

.qa-ideation-broad-edge {
	stroke: #b0a898;
	stroke-width: 1.5;
}

.qa-ideation-broad-edge-ghost {
	stroke: rgb(128, 128, 128);
	stroke-width: 1;
	stroke-dasharray: 4 3;
	opacity: 0.5;
}

/* Label switching panel */
.qa-ideation-label-topic {
	font-size: 1.1em;
	font-weight: 500;
	color: #333;
	margin-bottom: 8px;
}

.qa-ideation-label-ref {
	font-size: 0.85em;
	color: #666;
	line-height: 1.5;
	margin-bottom: 12px;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.qa-ideation-labels-row {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
}

.qa-ideation-labels-col {
	flex: 1;
	min-width: 0;
}

.qa-ideation-labels-heading {
	font-size: 0.8em;
	color: #888;
	margin-bottom: 4px;
	text-align: center;
}

/* Textareas */
.qa-ideation-textarea-wrap {
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
}

.qa-ideation-textarea {
	width: 420px;
	max-width: 100%;
	min-height: 80px;
	resize: vertical;
	font-family: inherit;
	font-size: 0.9em;
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fefefe;
	color: #333;
	box-sizing: border-box;
}

.qa-ideation-textarea:focus {
	outline: none;
	border-color: #aaa;
	box-shadow: 0 0 0 2px rgba(150, 150, 150, 0.15);
}

/* Kernels display */
.qa-ideation-kernels-display {
	margin-top: 10px;
}

.qa-ideation-kernel-group {
	margin-bottom: 12px;
}

.qa-ideation-kernel-line {
	padding: 2px 0;
	font-size: 0.88em;
	color: #444;
	line-height: 1.5;
}

.qa-ideation-empty {
	color: #999;
	font-style: italic;
	font-size: 0.9em;
}

/* Prompts overlay */
.qa-ideation-prompts-row {
	display: flex;
	justify-content: flex-start;
}

.qa-ideation-prompts-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(248, 246, 242, 0.97);
	z-index: 20;
	display: flex;
	flex-direction: column;
	padding: 20px;
	overflow-y: auto;
}

.qa-ideation-prompts-close {
	align-self: flex-end;
	background: #e0e0e0;
	border: none;
	color: #666;
	font-size: 1.3em;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	cursor: pointer;
	margin-bottom: 12px;
}

.qa-ideation-prompts-close:hover {
	background: #d0d0d0;
	color: #333;
}

.qa-ideation-prompts-content {
	white-space: pre-wrap;
	font-size: 0.9em;
	color: #444;
	line-height: 1.6;
}

/* ============================================================================
   SRS App — Workspace View
   ============================================================================ */

.qa-srs-view {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/* ## Nav bar */
.qa-srs-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 8px 16px;
	border-bottom: 1px solid var(--background-modifier-border);
	flex-shrink: 0;
}
.qa-srs-nav-left {
	display: flex;
	align-items: center;
	gap: 8px;
}
.qa-srs-nav-right {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 16px;
}
.qa-srs-nav-item {
	font-size: 13px;
	cursor: pointer;
}
.qa-srs-nav-active {
	color: var(--text-normal);
	cursor: pointer;
}
.qa-srs-nav-active:hover {
	color: var(--text-accent);
}
.qa-srs-nav-disabled {
	color: var(--text-faint);
	cursor: default;
}
/* ## Breadcrumb trail */
.qa-srs-breadcrumb {
	display: flex;
	align-items: center;
	padding: 6px 16px;
	font-size: 12px;
	color: var(--text-faint);
}
.qa-srs-breadcrumb-sep {
	margin: 0 6px;
	color: var(--text-faint);
}
.qa-srs-breadcrumb-link {
	color: var(--text-muted);
	cursor: pointer;
}
.qa-srs-breadcrumb-link:hover {
	color: var(--text-accent);
}
.qa-srs-breadcrumb-current {
	color: var(--text-normal);
}

.qa-srs-file-btn {
	color: var(--text-normal);
	margin-right: 8px;
	cursor: pointer;
}
.qa-srs-file-btn:hover {
	color: var(--text-accent);
}

/* ## Content area */
.qa-srs-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
}

/* ## Deck list */
.qa-srs-deck-header {
	display: flex;
	align-items: center;
	max-width: 570px;
	margin-left: auto;
	margin-right: auto;
	padding: 6px 16px 6px 16px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-faint);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--background-modifier-border);
}
.qa-srs-deck-header-name {
	flex: 1;
}
.qa-srs-deck-header-count {
	width: 48px;
	text-align: center;
}
.qa-srs-deck-header-gear {
	width: 28px;
}

.qa-srs-deck-list {
	margin-top: 4px;
}

.qa-srs-deck-row {
	display: flex;
	align-items: center;
	max-width: 570px;
	margin-left: auto;
	margin-right: auto;
	padding: 7px 16px 7px 16px;
	cursor: default;
	border-radius: 4px;
	transition: background 0.1s;
}
.qa-srs-deck-row:hover {
	background: var(--background-modifier-hover);
}
.qa-srs-deck-dragging {
	opacity: 0.5;
}
.qa-srs-deck-dragover {
	background: var(--interactive-accent);
	color: #fff;
}
.qa-srs-deck-drop-root {
	text-align: center;
	padding: 6px 0;
	font-size: 12px;
	color: transparent;
	border: 2px dashed transparent;
	border-radius: 4px;
	margin: 4px 16px;
}
.qa-srs-deck-drop-root.qa-srs-deck-drop-root-visible {
	color: var(--text-muted);
	border-color: var(--background-modifier-border);
}
.qa-srs-deck-drop-root-active {
	background: var(--interactive-accent);
	color: #fff;
	border-color: var(--interactive-accent);
	border-radius: 4px;
}

.qa-srs-deck-toggle {
	width: 18px;
	font-size: 12px;
	color: var(--text-faint);
	text-align: center;
	flex-shrink: 0;
	user-select: none;
}
.qa-srs-deck-toggle-active {
	cursor: pointer;
}
.qa-srs-deck-toggle-active:hover {
	color: var(--text-normal);
}

.qa-srs-deck-name {
	flex: 1;
	font-size: 14px;
	color: var(--text-normal);
	cursor: pointer;
	padding: 0 8px;
}
.qa-srs-deck-name:hover {
	text-decoration: underline;
}

.qa-srs-deck-counts {
	display: flex;
	gap: 0;
}
.qa-srs-deck-counts > span {
	width: 48px;
	text-align: center;
	font-size: 13px;
}
.qa-srs-count-new { color: #4a90d9; }
.qa-srs-count-learn { color: #d9822b; }
.qa-srs-count-due { color: #2ea043; }

.qa-srs-deck-gear {
	width: 28px;
	text-align: center;
	font-size: 14px;
	color: var(--text-faint);
	cursor: pointer;
	border-radius: 3px;
}
.qa-srs-deck-gear:hover {
	color: var(--text-normal);
	background: var(--background-modifier-hover);
}

.qa-srs-deck-footer {
	margin-top: 24px;
	text-align: center;
	font-size: 12px;
	color: var(--text-faint);
}

/* ## Gear menu dropdown */
.qa-srs-gear-menu {
	position: absolute;
	z-index: 100;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	min-width: 160px;
	padding: 4px 0;
}
.qa-srs-gear-menu-item {
	padding: 6px 14px;
	font-size: 13px;
	color: var(--text-normal);
	cursor: pointer;
}
.qa-srs-gear-menu-item:hover {
	background: var(--background-modifier-hover);
}

/* ## Deck overview */
.qa-srs-overview-title {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 24px 0;
	text-align: center;
}
.qa-srs-overview-stats {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-bottom: 32px;
}
.qa-srs-stat-item {
	text-align: center;
}
.qa-srs-stat-label {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 4px;
}
.qa-srs-stat-value {
	font-size: 24px;
	font-weight: 600;
}
.qa-srs-stat-new { color: #4a90d9; }
.qa-srs-stat-learn { color: #d9822b; }
.qa-srs-stat-due { color: #2ea043; }

.qa-srs-overview-mode {
	text-align: center;
	margin-bottom: 16px;
}
.qa-srs-mode-select {
	padding: 0 28px 0 12px;
	border-radius: 4px;
	border: 1px solid var(--background-modifier-border);
	background: var(--background-primary);
	color: var(--text-normal);
	font-size: 14px;
	line-height: 1.4;
	appearance: auto;
	-webkit-appearance: menulist;
	overflow: visible;
}
.qa-srs-study-wrap {
	text-align: center;
}
.qa-srs-study-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 32px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	border: none;
	border-radius: 6px;
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	cursor: pointer;
	transition: opacity 0.15s;
}
.qa-srs-study-btn:hover {
	opacity: 0.85;
}

/* ## Card review */
.qa-srs-review-layout {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.qa-srs-review-top {
	flex: 1;
	overflow-y: auto;
}
.qa-srs-review-bottom {
	flex-shrink: 0;
	border-top: 1px solid var(--background-modifier-border);
	position: relative;
	min-height: 130px;
}
.qa-srs-review-progress {
	position: absolute;
	bottom: 6px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
}
.qa-srs-review-count-new { color: #4a90d9; font-weight: 600; }
.qa-srs-review-count-learn { color: #d97b2a; font-weight: 600; }
.qa-srs-review-count-review { color: #3daa5c; font-weight: 600; }
.qa-srs-review-btn-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 12px 20px 24px;
}
.qa-srs-review-edit-btn {
	position: absolute;
	left: 20px;
	top: 18px;
	padding: 10px 32px;
	border: 1px solid rgba(0,0,0,0.15);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	border-radius: 6px;
	background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(0,0,0,0.04));
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
	color: var(--text-muted);
	cursor: pointer;
	font-size: 13px;
	transition: all 0.15s;
}
.qa-srs-review-edit-btn:hover {
	background: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(0,0,0,0.02));
	box-shadow: 0 2px 5px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
	color: var(--text-normal);
}
.qa-srs-review-edit-btn:active {
	border-bottom-width: 1px;
	transform: translateY(1px);
	box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
/* ## Undo button (card review, right side mirror of Edit) */
.qa-srs-review-undo-btn {
	position: absolute;
	right: 20px;
	top: 18px;
	padding: 10px 16px;
	border: 1px solid rgba(0,0,0,0.15);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	border-radius: 6px;
	background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(0,0,0,0.04));
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
	color: var(--text-muted);
	cursor: pointer;
	font-size: 16px;
	transition: all 0.15s;
	line-height: 1;
}
.qa-srs-review-undo-btn:hover:not(.disabled) {
	background: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(0,0,0,0.02));
	box-shadow: 0 2px 5px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
	color: var(--text-normal);
}
.qa-srs-review-undo-btn:active:not(.disabled) {
	border-bottom-width: 1px;
	transform: translateY(1px);
	box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
.qa-srs-review-undo-btn.disabled {
	opacity: 0.3;
	cursor: default;
}
.qa-srs-review-question {
	padding: 24px;
	min-height: 80px;
}
.qa-srs-review-question p {
	font-size: 18px;
	line-height: 1.6;
}
.qa-srs-review-divider {
	height: 1px;
	background: var(--background-modifier-border);
	margin: 0 24px;
}
.qa-srs-review-answer {
	padding: 24px;
	min-height: 60px;
}
.qa-srs-review-answer p {
	font-size: 16px;
	line-height: 1.6;
}
.qa-srs-reveal-prompt {
	text-align: center;
	padding: 14px 0;
	width: 200px;
	border: 1px solid rgba(0,0,0,0.15);
	border-bottom: 2px solid rgba(0,0,0,0.2);
	border-radius: 6px;
	background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(0,0,0,0.04));
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
	color: var(--text-muted);
	cursor: pointer;
	font-size: 14px;
	transition: all 0.15s;
}
.qa-srs-reveal-prompt:hover {
	background: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(0,0,0,0.02));
	box-shadow: 0 2px 5px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
	color: var(--text-normal);
}
.qa-srs-reveal-prompt:active {
	border-bottom-width: 1px;
	transform: translateY(1px);
	box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

/* ## Rating buttons */
.qa-srs-rating-bar {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding-top: 12px;
}
.qa-srs-rate-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 20px 18px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	background: var(--background-primary);
	cursor: pointer;
	min-width: 72px;
	gap: 4px;
	transition: background 0.1s, border-color 0.1s;
}
.qa-srs-rate-btn:hover {
	background: var(--background-modifier-hover);
}
.qa-srs-rate-interval {
	font-size: 11px;
	color: var(--text-faint);
	line-height: 1;
}
.qa-srs-rate-label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}
.qa-srs-rate-again .qa-srs-rate-label { color: #d32f2f; }
.qa-srs-rate-good .qa-srs-rate-label { color: #2ea043; }
.qa-srs-rate-easy .qa-srs-rate-label { color: #4a90d9; }
.qa-srs-rate-bury .qa-srs-rate-label { color: var(--text-muted); }

/* ## Interval button colors (white text on colored bg: maroon→orange→green→blue) */
.qa-srs-rate-btn.qa-srs-rate-c0 { background: #9E3C39; border-color: #9E3C39; }
.qa-srs-rate-btn.qa-srs-rate-c1 { background: #C07C2B; border-color: #C07C2B; }
.qa-srs-rate-btn.qa-srs-rate-c2 { background: #4CA730; border-color: #4CA730; }
.qa-srs-rate-btn.qa-srs-rate-c3 { background: #2D6AF6; border-color: #2D6AF6; }
.qa-srs-rate-btn.qa-srs-rate-c0 .qa-srs-rate-label,
.qa-srs-rate-btn.qa-srs-rate-c0 .qa-srs-rate-interval,
.qa-srs-rate-btn.qa-srs-rate-c1 .qa-srs-rate-label,
.qa-srs-rate-btn.qa-srs-rate-c1 .qa-srs-rate-interval,
.qa-srs-rate-btn.qa-srs-rate-c2 .qa-srs-rate-label,
.qa-srs-rate-btn.qa-srs-rate-c2 .qa-srs-rate-interval,
.qa-srs-rate-btn.qa-srs-rate-c3 .qa-srs-rate-label,
.qa-srs-rate-btn.qa-srs-rate-c3 .qa-srs-rate-interval { color: #fff; }
.qa-srs-rate-btn.qa-srs-rate-c0:hover { background: #862f2d; }
.qa-srs-rate-btn.qa-srs-rate-c1:hover { background: #a56a22; }
.qa-srs-rate-btn.qa-srs-rate-c2:hover { background: #3e8d28; }
.qa-srs-rate-btn.qa-srs-rate-c3:hover { background: #2459d0; }
/* ## Small topic buttons */
.qa-srs-rate-btn-sm.qa-srs-rate-c0 { background: #9E3C39 !important; border-color: #9E3C39 !important; color: #fff !important; }
.qa-srs-rate-btn-sm.qa-srs-rate-c1 { background: #C07C2B !important; border-color: #C07C2B !important; color: #fff !important; }
.qa-srs-rate-btn-sm.qa-srs-rate-c2 { background: #4CA730 !important; border-color: #4CA730 !important; color: #fff !important; }
.qa-srs-rate-btn-sm.qa-srs-rate-c3 { background: #2D6AF6 !important; border-color: #2D6AF6 !important; color: #fff !important; }

/* ## Bury link (subtle, below interval buttons) */
.qa-srs-bury-link {
	text-align: center;
	margin-top: 6px;
	font-size: 12px;
	color: var(--text-faint);
	cursor: pointer;
}
.qa-srs-bury-link:hover {
	color: var(--text-muted);
	text-decoration: underline;
}
.qa-srs-bury-link-sm {
	color: var(--text-faint);
	font-size: 11px;
	cursor: pointer;
	align-self: center;
	margin-left: 4px;
}
.qa-srs-bury-link-sm:hover {
	color: var(--text-muted);
	text-decoration: underline;
}

/* ## Gear menu schedule mode toggle */
.qa-srs-gear-mode-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
}
.qa-srs-gear-mode-opt {
	padding: 2px 8px;
	font-size: 12px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid var(--background-modifier-border);
	color: var(--text-muted);
}
.qa-srs-gear-mode-opt.active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-color: var(--interactive-accent);
}
.qa-srs-gear-mode-opt:hover:not(.active) {
	background: var(--background-modifier-hover);
}

/* ## Topic review */
.qa-srs-topic-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* ## Topic strip: horizontal list of topic names */
.qa-srs-topic-strip {
	overflow: hidden;
	padding: 12px 0 8px 0;
	border-bottom: 1px solid var(--background-modifier-border);
	margin-bottom: 4px;
}
.qa-srs-topic-strip-inner {
	display: flex;
	align-items: center;
	gap: 0;
	white-space: nowrap;
}
.qa-srs-topic-strip-current {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-normal);
	text-shadow: 0 0 0.5px currentColor, 0 0 0.5px currentColor;
	flex-shrink: 0;
}
.qa-srs-topic-strip-future {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-faint);
	cursor: pointer;
	flex-shrink: 0;
}
.qa-srs-topic-strip-future:hover {
	color: var(--text-muted);
}
.qa-srs-topic-strip-done {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-faint);
	text-decoration: line-through;
	flex-shrink: 0;
	opacity: 0.5;
}
.qa-srs-topic-strip-sep {
	margin: 0 8px;
	color: var(--text-faint);
	font-size: 13px;
	flex-shrink: 0;
}
/* ## Topic review toggle bar */
/* ## Sticky header wraps toggle bar + settings panel */
.qa-srs-topic-sticky-header {
	position: sticky;
	top: -20px;
	z-index: 10;
	background: var(--background-primary);
	margin: -20px -24px 0;
	padding: 0 24px 0;
}
.qa-srs-topic-toggle-bar {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 8px 0;
	border-bottom: 1px solid var(--background-modifier-border);
	margin-bottom: 4px;
}
.qa-srs-topic-gear {
	font-size: 14px;
	cursor: pointer;
	color: var(--text-faint);
	user-select: none;
	line-height: 1;
}
.qa-srs-topic-gear:hover {
	color: var(--text-normal);
}
/* ## Undo button (topic review, next to gear) */
.qa-srs-undo-btn {
	font-size: 16px;
	cursor: pointer;
	color: var(--text-faint);
	user-select: none;
	line-height: 1;
}
.qa-srs-undo-btn:hover:not(.disabled) {
	color: var(--text-normal);
}
.qa-srs-undo-btn.disabled {
	opacity: 0.3;
	cursor: default;
}
/* ## Settings panel (hidden by default, toggled by gear) */
.qa-srs-topic-settings-panel {
	padding: 8px 0 12px;
	border-bottom: 1px solid var(--background-modifier-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.qa-srs-topic-settings-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.qa-srs-topic-settings-label {
	font-size: 12px;
	color: var(--text-muted);
	width: 130px;
	flex-shrink: 0;
}
.qa-srs-topic-toggle-group {
	display: flex;
	align-items: center;
	gap: 6px;
}
.qa-srs-topic-toggle-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-faint);
	cursor: default;
}
.qa-srs-topic-settings-row .qa-srs-topic-toggle-group .qa-srs-topic-toggle-label:first-child {
	width: 60px;
	text-align: right;
	flex-shrink: 0;
}
.qa-srs-topic-toggle-label.active {
	color: var(--text-normal);
}
.qa-srs-topic-toggle-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ## Single-sheet topic headers */
.qa-srs-topic-sheet-header {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-normal);
	padding: 12px 0 4px 0;
}
.qa-srs-topic-sheet-sep {
	border: none;
	border-top: 1px solid var(--background-modifier-border);
	margin: 0 0 8px 0;
}

.qa-srs-topic-card {
	display: flex;
	flex-direction: column;
	border: none;
	margin: 0;
	transition: opacity 0.2s;
	position: relative;
	padding-left: 10px;
	max-width: 70%;
}
/* ## Edit widget: replaces ::before bullet with clickable element */
.qa-srs-edit-widget {
	position: absolute;
	left: -10px;
	top: 0px;
	width: 22px;
	height: 35px;
	background: transparent;
	border-radius: 22px 0 0 22px / 17.5px 0 0 17.5px;
	cursor: pointer;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s;
	overflow: hidden;
	font-size: 0;
	user-select: none;
}
/* ## Visible dot via ::after */
.qa-srs-edit-widget::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: transparent;
}
.qa-srs-card-due .qa-srs-edit-widget::after {
	background: #999;
}
/* ## Hover: darken semicircle, show dot for unscheduled */
.qa-srs-edit-widget:hover {
	background-color: var(--background-modifier-hover);
}
.qa-srs-edit-widget:hover::after {
	background: #999;
}
.qa-srs-topic-card:not(.revealed) {
	cursor: pointer;
}
.qa-srs-topic-card:not(.revealed) > .qa-srs-topic-card-q:hover {
	background: var(--background-modifier-hover);
}
/* ## One-click review: outline pop on question element */
.qa-srs-topic-card-q.qa-srs-outline-pop {
	position: relative;
	--pop-left: 50%;
	--pop-right: 50%;
}
.qa-srs-topic-card-q.qa-srs-outline-pop::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 3px solid #000;
	border-radius: 10px;
	pointer-events: none;
	animation: outline-pop 0.32s ease-out forwards;
}
@keyframes outline-pop {
	0%   { clip-path: inset(0 var(--pop-right) 0 var(--pop-left)); }
	100% { clip-path: inset(0 0 0 0); }
}
.qa-srs-topic-card-rating {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 14px;
}
.qa-srs-topic-card-q {
	padding: 10px 14px;
	border-radius: 10px;
}
.qa-srs-topic-card-q p {
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
}
.qa-srs-topic-card-a {
	padding: 10px 14px;
	border-top: 1px solid var(--background-modifier-border);
	background: var(--background-secondary);
}
.qa-srs-topic-card-a p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}
.qa-srs-rate-btn-sm {
	padding: 4px 18px;
	font-size: 12px;
	font-weight: 500;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: #fff;
}
.qa-srs-rate-btn-sm.qa-srs-rate-c0:hover { background: #862f2d !important; }
.qa-srs-rate-btn-sm.qa-srs-rate-c1:hover { background: #a56a22 !important; }
.qa-srs-rate-btn-sm.qa-srs-rate-c2:hover { background: #3e8d28 !important; }
.qa-srs-rate-btn-sm.qa-srs-rate-c3:hover { background: #2459d0 !important; }
.qa-srs-topic-card-graded {
	font-size: 12px;
	color: #2ea043;
}

/* ## Card reveal overlay */
.qa-srs-card-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 100;
}
.qa-srs-card-overlay-pane {
	position: fixed;
	background: var(--background-primary);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	max-height: 60vh;
	overflow-y: auto;
}
.qa-srs-card-overlay-pane .qa-srs-topic-card-q {
	border-radius: 10px 10px 0 0;
}
.qa-srs-card-overlay-pane .qa-srs-topic-card-a {
	border-radius: 0 0 10px 10px;
}

/* ## Review summary */
.qa-srs-summary-title {
	text-align: center;
	margin: 20px 0;
}
.qa-srs-summary-stats {
	text-align: center;
	font-size: 15px;
	line-height: 2;
	margin-bottom: 16px;
}
.qa-srs-summary-breakdown {
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 24px;
}
.qa-srs-summary-breakdown h4 {
	margin: 8px 0;
}

/* ## Interactive map */
.qa-srs-imap-toggle-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}
.qa-srs-imap-toggle-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-faint);
	cursor: pointer;
}
.qa-srs-imap-toggle-label.active {
	color: var(--text-normal);
}
.qa-srs-imap-toggle {
	width: 36px;
	height: 20px;
	background: var(--background-modifier-border);
	border-radius: 10px;
	position: relative;
	cursor: pointer;
	transition: background 0.2s;
}
.qa-srs-imap-toggle.statement {
	background: var(--interactive-accent);
}
.qa-srs-imap-toggle-knob {
	width: 16px;
	height: 16px;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: left 0.2s;
}
.qa-srs-imap-toggle.statement .qa-srs-imap-toggle-knob {
	left: 18px;
}

.qa-srs-imap-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.qa-srs-imap-topic {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 4px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-normal);
	border-radius: 4px;
	user-select: none;
}
.qa-srs-imap-topic:hover {
	background: var(--background-modifier-hover);
}
.qa-srs-imap-bullet {
	font-size: 10px;
	width: 16px;
	text-align: center;
	color: var(--text-faint);
}
.qa-srs-imap-count {
	font-size: 12px;
	color: var(--text-faint);
	font-weight: 400;
}
.qa-srs-imap-cards {
	padding-left: 28px;
	margin-bottom: 8px;
}
.qa-srs-imap-card {
	padding: 6px 10px;
	border-left: 2px solid var(--background-modifier-border);
	margin: 2px 0;
}
.qa-srs-imap-card-q p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

/* ========== Browse Screen ========== */

/* ## Override content padding/overflow for browse */
.qa-srs-content:has(.qa-srs-browse-layout) {
	padding: 0;
	overflow: hidden;
}

.qa-srs-browse-layout {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* ## Search bar */
.qa-srs-browse-searchbar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--background-modifier-border);
	flex-shrink: 0;
}
.qa-srs-browse-bubble {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: var(--background-modifier-hover);
	border-radius: 12px;
	font-size: 13px;
	white-space: nowrap;
	user-select: none;
}
.qa-srs-browse-bubble-x {
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	opacity: 0.6;
	padding: 0 2px;
}
.qa-srs-browse-bubble-x:hover {
	opacity: 1;
}
.qa-srs-browse-search-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-size: 14px;
	color: var(--text-normal);
	min-width: 100px;
}
.qa-srs-browse-search-input::placeholder {
	color: var(--text-faint);
}

/* ## Body layout: sidebar + main */
.qa-srs-browse-body {
	display: flex;
	flex: 1;
	overflow: hidden;
}

/* ## Sidebar */
.qa-srs-browse-sidebar {
	width: 200px;
	flex-shrink: 0;
	overflow-y: auto;
	border-right: 1px solid var(--background-modifier-border);
	padding: 8px 0;
}
.qa-srs-browse-sidebar-section {
	margin-bottom: 12px;
}
.qa-srs-browse-sidebar-header {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	user-select: none;
	cursor: pointer;
}
.qa-srs-browse-sidebar-header:hover {
	color: var(--text-normal);
}
.qa-srs-browse-sidebar-arrow {
	font-size: 8px;
	width: 10px;
	flex-shrink: 0;
}
.qa-srs-browse-sidebar-deck-arrow {
	font-size: 7px;
	width: 10px;
	flex-shrink: 0;
	opacity: 0.6;
}
.qa-srs-browse-sidebar-deck-arrow:hover {
	opacity: 1;
}
.qa-srs-browse-sidebar-dragging {
	opacity: 0.4;
}
.qa-srs-browse-sidebar-dragover {
	border-top: 2px solid var(--interactive-accent);
}
.qa-srs-browse-sidebar-item.qa-srs-browse-sidebar-dragover {
	border-top: none;
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-radius: 4px;
}
.qa-srs-browse-sidebar-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}
.qa-srs-browse-indent-1 { padding-left: 24px; }
.qa-srs-browse-indent-2 { padding-left: 38px; }
.qa-srs-browse-indent-3 { padding-left: 52px; }
.qa-srs-browse-indent-4 { padding-left: 66px; }
.qa-srs-browse-indent-5 { padding-left: 80px; }
.qa-srs-browse-sidebar-item:hover {
	background: var(--background-modifier-hover);
}
.qa-srs-browse-sidebar-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}
.qa-srs-browse-sidebar-active:hover {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}
.qa-srs-browse-sidebar-dimmed {
	opacity: 0.35;
}
.qa-srs-browse-sidebar-dimmed:hover {
	opacity: 0.7;
}
.qa-srs-browse-sidebar-count {
	font-size: 11px;
	color: var(--text-faint);
	margin-left: auto;
}
.qa-srs-browse-sidebar-active .qa-srs-browse-sidebar-count {
	color: var(--text-on-accent);
	opacity: 0.8;
}
.qa-srs-browse-sidebar-disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* ## Main area (table + editor) */
.qa-srs-browse-main {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
}

/* ## Table */
.qa-srs-browse-table-wrap {
	flex: 1;
	overflow-y: auto;
	overflow-x: auto;
}
.qa-srs-browse-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	table-layout: fixed;
}
.qa-srs-browse-th {
	text-align: left;
	padding: 6px 10px;
	font-weight: 600;
	font-size: 12px;
	border-bottom: 1px solid var(--background-modifier-border);
	white-space: nowrap;
	user-select: none;
	position: sticky;
	top: 0;
	background: var(--background-primary);
	z-index: 1;
}
.qa-srs-browse-th-sorted {
	color: var(--interactive-accent);
}
.qa-srs-browse-sort-arrow {
	font-size: 10px;
}
.qa-srs-browse-row {
	cursor: pointer;
	background: rgb(255, 255, 255);
}
.qa-srs-browse-row:nth-child(even) {
	background: rgb(245, 245, 245);
}
.qa-srs-browse-row:hover {
	background: var(--background-modifier-hover);
}
.qa-srs-browse-row.qa-srs-browse-row-selected {
	background: var(--interactive-accent) !important;
	color: var(--text-on-accent);
}
.qa-srs-browse-row-suspended {
	background: #fce181 !important;
}
.theme-dark .qa-srs-browse-row-suspended {
	background: #5c5020 !important;
}
.qa-srs-browse-cell {
	padding: 6px 10px;
	border-bottom: 1px solid rgb(216, 216, 216);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 0;
}
.qa-srs-browse-status {
	padding: 4px 10px;
	font-size: 11px;
	color: var(--text-muted);
	border-top: 1px solid var(--background-modifier-border);
	flex-shrink: 0;
}

/* ## Column visibility context menu */
.qa-srs-browse-col-menu {
	position: fixed;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	padding: 4px 0;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	min-width: 150px;
}
.qa-srs-browse-col-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}
.qa-srs-browse-col-menu-item:hover {
	background: var(--background-modifier-hover);
}
.qa-srs-browse-col-menu-check {
	display: inline-block;
	width: 14px;
	text-align: center;
	font-size: 13px;
}

/* ## Browse context menu (right-click on card rows) */
.qa-srs-browse-context-menu {
	position: fixed;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	padding: 4px 0;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	min-width: 160px;
}
.qa-srs-browse-context-menu-item {
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}
.qa-srs-browse-context-menu-item:hover {
	background: var(--background-modifier-hover);
}

/* ## Tag popup (add/remove tags bulk action) */
.qa-srs-browse-tag-popup {
	position: fixed;
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 6px;
	padding: 10px 14px;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	min-width: 200px;
	max-width: 300px;
}
.qa-srs-browse-tag-popup-title {
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: 6px;
}
.qa-srs-browse-tag-popup-input {
	width: 100%;
	padding: 4px 8px;
	font-size: 13px;
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	background: var(--background-primary);
	color: var(--text-normal);
	margin-bottom: 6px;
}
.qa-srs-browse-tag-popup-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	font-size: 13px;
}
.qa-srs-browse-tag-popup-btn {
	margin-top: 6px;
	width: 100%;
}

/* ## Multi-select editor info */
.qa-srs-browse-editor-multi {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: var(--text-muted);
	font-size: 14px;
	font-style: italic;
}

/* ## Editor pane */
.qa-srs-browse-editor {
	height: 320px;
	flex-shrink: 0;
	border-top: 1px solid var(--background-modifier-border);
	overflow-y: auto;
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #F0F0F0;
}
.theme-dark .qa-srs-browse-editor {
	background-color: #3a3a38;
}
.qa-srs-browse-editor-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: var(--text-faint);
	font-size: 14px;
}
.qa-srs-browse-editor-meta-field {
	display: flex;
	flex-direction: column;
}
.qa-srs-browse-editor-meta-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 4px;
}
.qa-srs-browse-editor-input {
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 13px;
	color: var(--text-normal);
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}
.qa-srs-browse-editor-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.qa-srs-browse-editor-tag {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 10px;
	padding: 2px 8px;
	font-size: 12px;
	color: var(--text-normal);
}
.qa-srs-browse-editor-tag-remove {
	cursor: pointer;
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1;
	margin-left: 2px;
}
.qa-srs-browse-editor-tag-remove:hover {
	color: var(--text-error);
}
.qa-srs-browse-editor-tag-input {
	background: transparent;
	border: none;
	outline: none;
	font-size: 12px;
	color: var(--text-muted);
	width: 60px;
	padding: 2px 4px;
}
.qa-srs-browse-editor-section {
	display: flex;
	flex-direction: column;
	border: 1px solid #888;
	border-radius: 4px;
	overflow: hidden;
	transition: border-color 0.15s ease;
	min-width: 0;
}
.qa-srs-browse-editor-section:focus-within {
	border-color: #a8d4ff;
}
.qa-srs-browse-editor-label {
	font-weight: normal;
	font-size: 0.85em;
	color: #000;
	background-color: #F0F0F0;
	padding: 0.4em 0.8em;
	margin: 0;
}
.theme-dark .qa-srs-browse-editor-label {
	background-color: #3a3a3a;
	color: #a0b0c0;
}
.qa-srs-browse-editor-textarea {
	flex: 1;
	resize: none;
	background-color: #ffffff;
	border: none;
	border-top: 1px dashed #aaa;
	padding: 0.8em;
	font-size: 13px;
	color: var(--text-normal);
	font-family: var(--font-text);
	min-height: 50px;
}
.theme-dark .qa-srs-browse-editor-textarea {
	background-color: #2a2a2a;
	border-top-color: #666;
}
.qa-srs-browse-editor-textarea:focus {
	outline: none;
	box-shadow: inset 0 0 0 3px rgba(136, 192, 240, 0.5);
	border-top-color: #444;
}
.theme-dark .qa-srs-browse-editor-textarea:focus {
	box-shadow: inset 0 0 0 3px rgba(136, 192, 240, 0.4);
	border-top-color: #999;
}

/* ========== Mind Map ========== */
.qa-srs-content:has(.qa-srs-mindmap-viewport) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	position: relative;
}
.qa-srs-mindmap-toolbar {
	display: flex;
	align-items: center;
	padding: 8px 16px;
	gap: 12px;
	border-bottom: 1px solid var(--background-modifier-border);
}
.qa-srs-mindmap-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	cursor: pointer;
	color: var(--text-muted);
}
.qa-srs-mindmap-reshuffle-btn {
	cursor: pointer;
	font-size: 16px;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}
.qa-srs-mindmap-reshuffle-btn:hover {
	opacity: 1;
}
.qa-srs-mindmap-viewport {
	position: relative;
	flex: 1;
	overflow: auto;
	min-height: 0;
	min-width: 0;
}
.qa-srs-mindmap-spacer {
	position: relative;
}
.qa-srs-mindmap-zoomgroup {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
}
.qa-srs-mindmap-minimap {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 10;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	cursor: crosshair;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.qa-srs-mindmap-canvas {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 0;
}
.qa-srs-mindmap-layer {
	position: relative;
	z-index: 1;
}
.qa-srs-mindmap-topic {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 8px 16px;
	background: var(--interactive-accent);
	color: var(--text-on-accent);
	border-radius: 20px;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	cursor: grab;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.15s ease;
}
.qa-srs-mindmap-topic:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.qa-srs-mindmap-card {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 4px 10px;
	background: var(--background-secondary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 10px;
	font-size: 11px;
	color: var(--text-normal);
	white-space: pre-wrap;
	z-index: 1;
	cursor: grab;
}
.qa-srs-mindmap-card.highlighted {
	border-color: var(--interactive-accent);
	border-width: 2px;
}
/* ## Mind Map Review toolbar */
.qa-srs-mindmap-review-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 16px;
}
/* ## Mind map settings panel (gear-toggled, same style as topic settings) */
.qa-srs-mindmap-settings-panel {
	padding: 8px 16px 12px;
	border-bottom: 1px solid var(--background-modifier-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.qa-srs-mindmap-review-stats {
	font-size: 13px;
	color: var(--text-muted);
	margin-left: auto;
}
.qa-srs-mindmap-review-summary {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--background-primary);
	border: 1px solid var(--background-modifier-border);
	border-radius: 12px;
	padding: 24px 32px;
	text-align: center;
	z-index: 20;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.qa-srs-mindmap-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	color: var(--text-muted);
	font-size: 14px;
}
.qa-srs-mindmap-warning {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 14px;
	background: rgba(200, 150, 50, 0.15);
	border: 1px solid rgba(200, 150, 50, 0.3);
	border-radius: 6px;
	color: var(--text-muted);
	font-size: 12px;
	z-index: 10;
}
.qa-srs-mindmap-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	color: var(--text-muted);
	font-size: 14px;
}

/* ========== Deck Spreadsheet Layout ========== */

.qa-srs-deck-spreadsheet-layout {
	display: flex;
	height: 100%;
	overflow: hidden;
}

.qa-srs-deck-spreadsheet-sidebar {
	width: 180px;
	min-width: 140px;
	border-right: 1px solid var(--background-modifier-border);
	overflow-y: auto;
	padding: 8px 0;
	flex-shrink: 0;
}

.qa-srs-deck-spreadsheet-sidebar-title {
	padding: 4px 12px 8px;
	font-weight: 600;
	font-size: 13px;
	color: var(--text-muted);
}

.qa-srs-deck-spreadsheet-sidebar-item {
	padding: 4px 12px;
	cursor: pointer;
	font-size: 13px;
	border-radius: 4px;
	margin: 0 4px;
}

.qa-srs-deck-spreadsheet-sidebar-item:hover {
	background: var(--background-modifier-hover);
}

.qa-srs-deck-spreadsheet-sidebar-item.is-active {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

.qa-srs-deck-spreadsheet-main {
	flex: 1;
	position: relative;
	overflow: auto;
}