#ubitto-teacher-cabinet {display: flex; flex-direction: column;}

/* Educator Header with Tier Badge */
#ubitto-teacher-cabinet #educator-header {
	display: flex;
	justify-content: space-between;

	align-items: center;

	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 12px;
	box-shadow: none;
}

#ubitto-teacher-cabinet #educator-header .header-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	
}

#ubitto-teacher-cabinet #tier-badge-display {
	display: flex;
	align-items: center;
	gap: 10px;
}

#ubitto-teacher-cabinet #tier-badge-display .badge {
	font-size: 28px;
	line-height: 1;
}

#ubitto-teacher-cabinet #tier-badge-display .tier-name {
	font-size: 16px;
	font-weight: 600;
	
}
#ubitto-teacher-cabinet > #menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 0 15px 0;
	font-size: 14px;
	background: #ffffff;
	border: 1px solid #e1e4e8;
	border-radius: 6px;
	padding: 8px 0;
}
#ubitto-teacher-cabinet > #menu > .menu-item {
	cursor: pointer;
	padding: 8px 16px;
	margin: 2px 6px;
	border-radius: 4px;
	transition: all 0.15s ease;
	font-weight: 500;
	color: #586069;
	position: relative;
	display: flex;
	align-items: center;
	font-size: 13px;
}
#ubitto-teacher-cabinet > #menu > .menu-item:hover {
	background: #f6f8fa;
	color: #0366d6;
}
#ubitto-teacher-cabinet > #menu > .menu-item[current] {
	color: white;
	background: #0366d6;
	font-weight: 600;
}
#ubitto-teacher-cabinet > #menu > .menu-item[current]:hover {
	background: #0256c7;
}
#ubitto-teacher-cabinet > #menu > .menu-item a {
	color: inherit;
	text-decoration: none;
	display: block;
	width: 100%;
}
#ubitto-teacher-cabinet > #menu > .menu-item:before {
	margin-right: 8px;
	font-size: 16px;
	opacity: 0.3;
	transition: opacity 0.15s ease;
}
#ubitto-teacher-cabinet > #menu > .menu-item:hover:before {
	opacity: 0.6;
}
#ubitto-teacher-cabinet > #menu > .menu-item[current]:before {
	opacity: 1;
}

/* Individual menu item icons */
#ubitto-teacher-cabinet > #menu > #quizzes:before {
	content: '📝';
}
#ubitto-teacher-cabinet > #menu > #coupons:before {
	content: '🎟️';
}
#ubitto-teacher-cabinet > #menu > #my-rewards:before {
	content: '🏆';
}
#ubitto-teacher-cabinet > #menu > #help:before {
	content: '❓';
}
#ubitto-teacher-cabinet > #content {
	flex-basis: 100%;
	width: 100%;
}

#ubitto-teacher-cabinet > #content table tr:hover {background: #eee;}

#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls {padding: 5px 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls * {height: initial; padding: 0;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls select {padding: 5px 10px;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls button {padding: 5px 10px;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls label {font-size: 12px;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #quiz-code {width: 200px;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #quiz-language {margin-right: 30px;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls button#add-quiz[disabled] {opacity: 0.6; pointer-events: none;}

#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tbody {position: relative;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tbody tr:hover {background: #eee;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tbody:empty:before {content: 'There are no quizzes yet'; margin: 10px; width: 100%; display: flex; text-align: center;} 
#ubitto-teacher-cabinet > #content[page = "quizzes"] #actions[disabled] {opacity: 0.3; pointer-events: none;}
#ubitto-teacher-cabinet > #content[page = "quizzes"] .action {font-size: 12px; border-bottom: 1px dotted #bbb; cursor: pointer; margin: 0 5px;}


#ubitto-teacher-cabinet > #content[page = "income"] #controls {padding: 5px 0; text-align: right;}
#ubitto-teacher-cabinet > #content[page = "income"] #controls > select {height: initial; padding: 0; padding: 5px 10px;}
#ubitto-teacher-cabinet > #content[page = "income"] #income {margin-bottom: 5px;}
#ubitto-teacher-cabinet > #content[page = "income"] #income tbody {position: relative;}
#ubitto-teacher-cabinet > #content[page = "income"] #income tbody tr:hover {background: #eee;}
#ubitto-teacher-cabinet > #content[page = "income"] #income tbody tr #amount[currency="cookie"]::before {display: inline-block; margin-right: 5px; width: 16px; height: 16px; background-image: url(/wp-content/plugins/ubitto/assets/images/coin16.png); content: ' '; background-size: cover; position: relative; top: 2px;}
#ubitto-teacher-cabinet > #content[page = "income"] #income tbody:empty:before {content: 'No income'; margin: 10px; position: absolute; width: 100%; display: block; text-align: center;} 
#ubitto-teacher-cabinet > #content[page = "income"] #income #details > span {border-bottom: 1px dotted #666;}
#ubitto-teacher-cabinet > #content[page = "income"] #total {font-size: 24px; text-align: right;}
#ubitto-teacher-cabinet > #content[page = "income"] #total::before {display: inline-block; margin-right: 5px; width: 16px; height: 16px; background-image: url(/wp-content/plugins/ubitto/assets/images/coin24.png); content: ' '; background-size: cover; position: relative; top: -1px;}


#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog .modal__container {width: 400px;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog .option {margin-bottom: 10px;} 
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #label {display: block; width: 100%;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #description {font-size: 12px; color: #999;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #quiz-block {flex-grow: 2; display: none;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog[coupon-type="quiz"] #quiz-block {display: block;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #quiz-block #quiz-ids {display: block;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #quiz-block .ss-values {min-height: 33px;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #quiz-block .ss-main .ss-values .ss-value .ss-value-delete {margin-right: 10px;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #quiz-block .ss-main .ss-values .ss-value .ss-value-delete svg {box-sizing: initial; overflow: initial; }
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #request-block {flex-grow: 2; display: none;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog[coupon-type="request"] #request-block {display: block;}

#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog .option-input label {min-width: 110px; display: inline-block;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog .option-input input {width: 150px; text-align: center; margin-left: 10px;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #add-coupon-dialog #buttons {text-align: center; margin-top: 20px;}

#ubitto-teacher-cabinet > #content[page = "coupons"] #controls {padding: 5px 0; display: flex; justify-content: space-between; align-items: baseline;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #controls #add-coupon{margin-left: 5px;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #controls label {font-size: 12px; margin: 0;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons {margin-bottom: 5px;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons[type="quiz"] thead tr th:nth-of-type(4)::before {content: 'Quizzes'}
#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons[type="request"] thead tr th:nth-of-type(4)::before {content: 'Discount'}
#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tbody {position: relative;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tbody tr:hover {background: #eee;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tbody:empty:before {content: 'There are no coupons'; margin: 10px; width: 100%; display: flex; text-align: center;} 
#ubitto-teacher-cabinet > #content[page = "coupons"] .action {font-size: 12px; border-bottom: 1px dotted #bbb; cursor: pointer; margin: 0 5px;}

#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons ~ #description > * {font-size: 12px; color: #999; margin-top: 10px; display: none; line-height: initial;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons[type="quiz"] ~ #description #quiz {display: block;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons[type="request"] ~ #description #request {display: block;}

#ubitto-teacher-cabinet > #content[page = "coupons"] #error-message {background: #fdd; padding: 10px; margin: 20px 5px 0 5px; flex-basis: 100%;}
#ubitto-teacher-cabinet > #content[page = "coupons"] #error-message:empty {display: none;}

@media (max-width: 768px) {
	#ubitto-teacher-cabinet {flex-flow: column;}
	#ubitto-teacher-cabinet > #menu {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 6px;
		margin: 5px 0;
	}
	#ubitto-teacher-cabinet > #menu > .menu-item {
		margin: 3px;
		padding: 8px 12px;
		flex: 1 1 calc(50% - 12px);
		min-width: 0;
		justify-content: center;
		font-size: 12px;
		text-align: center;
	}
	#ubitto-teacher-cabinet > #menu > .menu-item:before {
	
	}

	#ubitto-teacher-cabinet .ubitto-dialog .modal__container {width: 100%;}

	#ubitto-teacher-cabinet > #content {
		overflow-x: auto;
		max-width: 100%;
	}
	#ubitto-teacher-cabinet > #content table {max-width: 100%;}
	#ubitto-teacher-cabinet > #content table thead {display: none;}

	#ubitto-teacher-cabinet > #content[page = "income"] #income tr td:nth-of-type(2) {display: none;} 

	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls > div {padding: 0; margin: 0; display: flex; flex-grow: 2;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls {
		flex-direction: column;
		gap: 8px;
	}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #block-1,
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #block-2 {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		width: 100%;
	}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #block-1 #quiz-code {
		flex: 1 1 100%;
		width: 100% !important;
	}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #block-1 #add-quiz {margin-right: 0;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #block-1 #quiz-search {
		width: 100% !important;
	}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #block-1 > span {
		flex: 1 1 100%;
	}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls #block-2 #quiz-language {
		margin-right: 0 !important;
	}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #controls > div#block-2 {justify-content: space-between; margin-top: 10px;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr {display: flex; flex-wrap: wrap; padding: 10px; position: relative; border-bottom: 1px solid var(--bb-content-border-color);}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td {padding: 5px; border-bottom: none;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td:nth-of-type(1) {display: none;} 
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td:nth-of-type(2) {display: none;} 	
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td:nth-of-type(3) {font-weight: bold;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td:nth-of-type(3)::before {content: '#'attr(quiz-id); margin-right: 5px;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes[only-author = "true"] tr td:nth-of-type(4) {display: none;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td:nth-of-type(4) {font-size: 12px;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td:nth-of-type(4)::before {content: 'by';margin-right: 5px;}
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td:nth-of-type(5) {display: none;} 
	#ubitto-teacher-cabinet > #content[page = "quizzes"] #quizzes tr td:nth-of-type(6) {width: 100%;}

	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tr {display: flex; flex-wrap: wrap; padding: 10px; position: relative; border-bottom: 1px solid var(--bb-content-border-color);}

	#ubitto-teacher-cabinet > #content[page = "coupons"] #controls {flex-wrap: wrap;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #controls > div {width: 100%; display: flex;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #controls > div > #coupon-type {flex-grow: 2;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #controls label {width: 100%; text-align: right;}

	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tr td {padding: 5px; border-bottom: none;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tr td:nth-of-type(1) {font-weight: bold; width: 100%;} 
	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tr td:not(:nth-of-type(1)) {font-size: 12px; line-height: 12px;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tr td:nth-of-type(2)::before {content: 'Valid period:'; margin-right: 5px;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tr td:nth-of-type(3)::before {content: '-'; margin-right: 10px;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tr td:nth-of-type(4) {width: 100%;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons[type="quiz"] tr td:nth-of-type(4)::before {content: 'Quiz ids:'; margin-right: 5px;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons[type="request"] tr td:nth-of-type(4)::before {content: 'Discount:'; margin-right: 5px;}
	#ubitto-teacher-cabinet > #content[page = "coupons"] #coupons tr td:nth-of-type(5) {position: absolute; top: 15px; right: 10px;}
}


#ubitto-teacher-cabinet table#quizzes thead th[data-column]:hover {
	background: #e8f4f8;
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column]::after {
	content: '⇅';
	position: absolute;
	right: 8px;
	opacity: 0.3;
	font-size: 14px;
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column][data-sort="asc"]::after {
	content: '↑';
	opacity: 1;
	color: #3498db;
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column][data-sort="desc"]::after {
	content: '↓';
	opacity: 1;
	color: #3498db;
}

/* Enhanced sortable table headers with color coding */
#ubitto-teacher-cabinet table#quizzes thead th {
	border-right: 2px solid #ddd;
	padding: 12px 30px 12px 12px !important;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
}

#ubitto-teacher-cabinet table#quizzes thead th:last-child {
	border-right: none;
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column] {
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: all 0.2s ease;
}

/* Color coding for each column */
#ubitto-teacher-cabinet table#quizzes thead th[data-column="id"] {
	background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%);
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column="level"] {
	background: linear-gradient(to bottom, #f3e5f5 0%, #e1bee7 100%);
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column="name"] {
	background: linear-gradient(to bottom, #e8f5e9 0%, #c8e6c9 100%);
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column="author"] {
	background: linear-gradient(to bottom, #fff3e0 0%, #ffe0b2 100%);
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column="price"] {
	background: linear-gradient(to bottom, #fce4ec 0%, #f8bbd0 100%);
}

/* Hover effects with deeper colors */
#ubitto-teacher-cabinet table#quizzes thead th[data-column="id"]:hover {
	background: linear-gradient(to bottom, #bbdefb 0%, #90caf9 100%);
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column="level"]:hover {
	background: linear-gradient(to bottom, #e1bee7 0%, #ce93d8 100%);
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column="name"]:hover {
	background: linear-gradient(to bottom, #c8e6c9 0%, #a5d6a7 100%);
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column="author"]:hover {
	background: linear-gradient(to bottom, #ffe0b2 0%, #ffcc80 100%);
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column="price"]:hover {
	background: linear-gradient(to bottom, #f8bbd0 0%, #f48fb1 100%);
}

/* Sort indicator arrows */
#ubitto-teacher-cabinet table#quizzes thead th[data-column]::after {
	content: '⇅';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.4;
	font-size: 16px;
	font-weight: bold;
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column][data-sort="asc"]::after {
	content: '▲';
	opacity: 1;
	color: #1976d2;
	font-size: 14px;
}

#ubitto-teacher-cabinet table#quizzes thead th[data-column][data-sort="desc"]::after {
	content: '▼';
	opacity: 1;
	color: #1976d2;
	font-size: 14px;
}

/* Active sort column gets a shadow */
#ubitto-teacher-cabinet table#quizzes thead th[data-column][data-sort] {
	box-shadow: inset 0 0 10px rgba(25, 118, 210, 0.3);
	font-weight: 700;
}

/* Color for Actions header (non-sortable) */
#ubitto-teacher-cabinet table#quizzes thead th:last-child {
	background: linear-gradient(to bottom, #e0f2f1 0%, #b2dfdb 100%);
	padding: 12px !important;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
}

/* Pagination styles */
#ubitto-teacher-cabinet #pagination {
	margin: 20px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

#ubitto-teacher-cabinet .pagination-controls {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

#ubitto-teacher-cabinet .pagination-controls .page-btn {
	min-width: 40px;
	height: 36px;
	padding: 8px 12px;
	border: 1px solid #ddd;
	background: white;
	color: #333;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
	transition: all 0.2s ease;
}

#ubitto-teacher-cabinet .pagination-controls .page-btn:hover:not(.disabled):not(.active) {
	background: #f0f7ff;
	border-color: #3498db;
	color: #3498db;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#ubitto-teacher-cabinet .pagination-controls .page-btn.active {
	background: #3498db;
	border-color: #3498db;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
}

#ubitto-teacher-cabinet .pagination-controls .page-btn.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

#ubitto-teacher-cabinet .pagination-controls .page-ellipsis {
	padding: 8px 4px;
	color: #999;
	font-size: 14px;
}

#ubitto-teacher-cabinet .pagination-info {
	color: #666;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
}

/* Mobile responsive pagination */
@media (max-width: 768px) {
	#ubitto-teacher-cabinet .pagination-controls .page-btn {
		min-width: 36px;
		height: 32px;
		padding: 6px 10px;
		font-size: 13px;
	}
	
	#ubitto-teacher-cabinet .pagination-info {
		font-size: 12px;
	}
}

/* Table sizing and padding */
#ubitto-teacher-cabinet table#quizzes {
    font-size: 16px;
}
#ubitto-teacher-cabinet table#quizzes td {
    padding: 8px 13px;
}



/* Background color for Published and Playground headers */
#ubitto-teacher-cabinet table#quizzes th:nth-child(6),
#ubitto-teacher-cabinet table#quizzes th:nth-child(7),
#ubitto-teacher-cabinet table#quizzes th:nth-child(8) {
	background-color: #e9ecef;
}

/* Quiz points display */
#ubitto-teacher-cabinet .ubitto-quiz-points {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

#ubitto-teacher-cabinet .ubitto-quiz-point-item {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	background: #f3f4f6;
	border-radius: 4px;
	font-size: 12px;
	color: #4b5563;
}


/* Point Filter Dropdown */
.point-filter-dropdown {
	margin-left: 8px;
	padding: 4px 8px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: white;
	font-size: 12px;
	font-weight: 500;
	color: #424242;
	cursor: pointer;
	outline: none;
}

.point-filter-dropdown:hover {
	border-color: #1976d2;
}

.point-filter-dropdown:focus {
	border-color: #1976d2;
	box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

/* Share Destination Styles */
.share-destination {
	grid-column: 1 / -1;
	margin-top: 8px;
	padding: 14px 16px;
	background: #f9fafb;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.share-destination > label:first-child {
	font-weight: 600;
	margin-bottom: 10px;
	display: block;
	font-size: 13px;
	color: #374151;
}

.share-destination > label:first-child small {
	color: #9ca3af;
	font-weight: normal;
	margin-left: 4px;
}

.share-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}

.share-options > label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 12px;
	padding: 8px 10px;
	border-radius: 6px;
	background: white;
	border: 1px solid #e5e7eb;
	transition: all 0.15s;
	color: #374151;
}

.share-options > label:hover {
	border-color: #d1d5db;
	background: #fff;
}

.share-options > label:has(input:checked) {
	background: #eff6ff;
	border-color: #3b82f6;
	color: #1e40af;
}

.share-options input[type="radio"] {
	margin: 0;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	accent-color: #3b82f6;
}

.share-options .star {
	color: #f59e0b;
	font-size: 11px;
	margin-left: -2px;
}

.share-options .forum-link {
	color: #3b82f6;
	font-style: normal;
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
	text-decoration: none;
	border: 1px solid #3b82f6;
	padding: 2px 8px;
	border-radius: 4px;
	background: #eff6ff;
}

.share-options .forum-link:hover {
	background: #dbeafe;
}

.share-options .group-select {
	margin-left: auto;
	padding: 4px 8px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	max-width: 120px;
	font-size: 11px;
	background: white;
	flex-shrink: 0;
}

.share-options .group-select:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: #f3f4f6;
}

.share-options .group-select:not(:disabled) {
	border-color: #3b82f6;
}

.share-options .group-select:not(:disabled):focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Mobile: Stack share options */
@media (max-width: 640px) {
	.share-options {
		grid-template-columns: 1fr;
	}

	.share-options .forum-link {
		max-width: 120px;
	}

	.share-options .group-select {
		max-width: 140px;
	}
}

/* Teacher Cabinet Help Panel */
#ubitto-teacher-cabinet-help-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

#ubitto-teacher-cabinet-help-panel.open {
	opacity: 1;
	visibility: visible;
}

#ubitto-teacher-cabinet-help-panel .help-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

#ubitto-teacher-cabinet-help-panel .help-content {
	position: absolute;
	top: 0;
	right: -450px;
	bottom: 0;
	width: 420px;
	max-width: 95vw;
	background: #fff;
	padding: 30px;
	box-shadow: -4px 0 30px rgba(0, 0, 0, 0.3);
	transition: right 0.3s ease;
	overflow-y: auto;
	z-index: 2;
}

#ubitto-teacher-cabinet-help-panel.open .help-content {
	right: 0;
}

#ubitto-teacher-cabinet-help-panel .help-close {
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 32px;
	color: #9ca3af;
	cursor: pointer;
	line-height: 1;
	transition: color 0.15s;
}

#ubitto-teacher-cabinet-help-panel .help-close:hover {
	color: #111827;
}

#ubitto-teacher-cabinet-help-panel h2 {
	margin: 0 0 24px 0;
	font-size: 22px;
	font-weight: 700;
	color: #111827;
	padding-right: 40px;
}

#ubitto-teacher-cabinet-help-panel .help-section {
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e5e7eb;
}

#ubitto-teacher-cabinet-help-panel .help-section:last-child {
	border-bottom: none;
}

#ubitto-teacher-cabinet-help-panel h3 {
	margin: 0 0 14px 0;
	font-size: 16px;
	font-weight: 600;
	color: #111827;
}

#ubitto-teacher-cabinet-help-panel h4 {
	margin: 16px 0 8px 0;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
}

#ubitto-teacher-cabinet-help-panel p {
	margin: 0 0 12px 0;
	font-size: 14px;
	color: #4b5563;
	line-height: 1.6;
}

#ubitto-teacher-cabinet-help-panel ul,
#ubitto-teacher-cabinet-help-panel ol {
	margin: 0 0 12px 0;
	padding-left: 20px;
	font-size: 14px;
	color: #4b5563;
	line-height: 1.6;
}

#ubitto-teacher-cabinet-help-panel li {
	margin-bottom: 6px;
}

#ubitto-teacher-cabinet-help-panel strong {
	color: #111827;
	font-weight: 600;
}

#ubitto-teacher-cabinet-help-panel em {
	color: #6b7280;
	font-style: italic;
}

#ubitto-teacher-cabinet-help-panel a {
	color: #3b82f6;
	text-decoration: none;
}

#ubitto-teacher-cabinet-help-panel a:hover {
	text-decoration: underline;
}

#ubitto-teacher-cabinet-help-panel .help-footer {
	background: #f9fafb;
	padding: 16px;
	border-radius: 8px;
	margin-top: 20px;
}

#ubitto-teacher-cabinet-help-panel .help-footer p {
	margin: 0;
	text-align: center;
}

/* Mobile adjustments for help panel */
@media (max-width: 480px) {
	#ubitto-teacher-cabinet-help-panel .help-content {
		width: 100%;
		padding: 20px;
	}

	#ubitto-teacher-cabinet-help-panel h2 {
		font-size: 18px;
	}

	#ubitto-teacher-cabinet-help-panel h3 {
		font-size: 15px;
	}
}

/* ============================================
   MY REWARDS PAGE STYLES
   ============================================ */

#ubitto-teacher-cabinet > #content[page="my-rewards"] #rewards-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .rewards-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .rewards-card h3 {
	margin: 0 0 16px 0;
	font-size: 16px;
	font-weight: 600;
	color: #374151;
}

/* Tier Card */
#ubitto-teacher-cabinet > #content[page="my-rewards"] #tier-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
	grid-column: 1 / -1;
	padding: 20px 24px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #tier-card #tier-loading {
	text-align: center;
	padding: 12px;
	opacity: 0.8;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-badge {
	font-size: 36px;
	line-height: 1;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-name {
	font-size: 22px;
	font-weight: 700;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-stats {
	display: flex;
	gap: 32px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-stats .stat {
	text-align: center;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-stats .stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-stats .stat-label {
	font-size: 11px;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-progress {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	padding: 12px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-progress.max-tier {
	text-align: center;
	font-size: 13px;
	font-weight: 500;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .progress-bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 6px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .progress-fill {
	height: 100%;
	background: #fbbf24;
	border-radius: 3px;
	transition: width 0.5s ease;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .progress-text {
	font-size: 12px;
	opacity: 0.9;
}

/* Gift Card */
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-card {
	background: #f0fdf4;
	border-color: #86efac;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form .form-row {
	margin-bottom: 14px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form .form-row label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: #374151;
	margin-bottom: 4px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form select,
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form input[type="text"],
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form input[type="number"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	background: white;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form select:focus,
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form input:focus {
	outline: none;
	border-color: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form select:disabled {
	background: #f3f4f6;
	cursor: not-allowed;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form .input-with-suffix {
	display: flex;
	align-items: center;
	gap: 8px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form .input-with-suffix input {
	width: 100px;
	flex-shrink: 0;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-form .input-with-suffix .suffix {
	font-size: 13px;
	color: #6b7280;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-error {
	color: #dc2626;
	font-size: 13px;
	margin-bottom: 12px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #gift-error:empty {

}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .action-btn {
	width: 100%;
	padding: 12px 20px;
	background: #22c55e;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .action-btn:hover {
	background: #16a34a;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .action-btn:disabled {
	background: #9ca3af;
	cursor: not-allowed;
}

/* Earnings & Gift History Cards */
#ubitto-teacher-cabinet > #content[page="my-rewards"] #earnings-card,
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gifts-card {
	max-height: 400px;
	overflow-y: auto;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #e5e7eb;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-item:last-child {
	border-bottom: none;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-date {
	font-size: 12px;
	color: #6b7280;
	min-width: 70px;
	flex-shrink: 0;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-details {
	flex-grow: 1;
	font-size: 13px;
	color: #374151;
	line-height: 1.4;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-details .buyer-name,
#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-details .student-name {
	font-weight: 600;
	color: #111827;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-details .quiz-name {
	font-style: italic;
	color: #4b5563;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-details .gift-amount {
	font-weight: 700;
	color: #22c55e;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-details .gift-message {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
	font-style: italic;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-amount {
	font-weight: 700;
	color: #22c55e;
	font-size: 14px;
	text-align: right;
	min-width: 100px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .history-amount .gross {
	font-weight: 400;
	font-size: 11px;
	color: #9ca3af;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .empty-state {
	text-align: center;
	padding: 24px;
	color: #6b7280;
	font-size: 14px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .error {
	color: #dc2626;
	padding: 12px;
	background: #fef2f2;
	border-radius: 6px;
	font-size: 13px;
}

/* Pagination for history sections */
#ubitto-teacher-cabinet > #content[page="my-rewards"] #earnings-pagination,
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gifts-pagination {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e5e7eb;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #earnings-pagination .pagination-controls,
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gifts-pagination .pagination-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #earnings-pagination .page-btn,
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gifts-pagination .page-btn {
	padding: 6px 12px;
	border: 1px solid #d1d5db;
	background: white;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] #earnings-pagination .page-btn:hover,
#ubitto-teacher-cabinet > #content[page="my-rewards"] #gifts-pagination .page-btn:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
}

#ubitto-teacher-cabinet > #content[page="my-rewards"] .page-info {
	font-size: 12px;
	color: #6b7280;
}

/* Mobile responsive for My Rewards */
@media (max-width: 768px) {
	#ubitto-teacher-cabinet > #content[page="my-rewards"] #rewards-container {
		grid-template-columns: 1fr;
	}

	#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-top-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-stats {
		flex-wrap: wrap;
		gap: 20px;
	}

	#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-stats .stat {
		flex: 1 1 calc(33% - 20px);
		min-width: 80px;
	}

	#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-stats .stat-value {
		font-size: 20px;
	}

	#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-name {
		font-size: 18px;
	}

	#ubitto-teacher-cabinet > #content[page="my-rewards"] .tier-badge {
		font-size: 32px;
	}
}

/* Quiz Attempts Badge */
.quiz-attempts-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	background: #f0f7ff;
	color: #1976d2;
	font-size: 11px;
	font-weight: 600;
	border-radius: 10px;
	border: 1px solid #d0e4f7;
	cursor: default;
	vertical-align: middle;
	white-space: nowrap;
}