:root {
 --pt-blue: #042f60;
 --pt-blue-light: #0d4680;
 --pt-yellow: #ffc107;
 --pt-green: #10b981;
 --pt-red: #ef4444;
 --ios-blue: #007AFF;
 --ios-gradient: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
 --bg-body: #eaeff5;
 --bg-panel: #ffffff;
 --text-main: #1e293b;
 --text-sub: #64748b;
 --border-color: #e2e8f0;
 --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
 --track-bg: #f8fafc;
 --chip-bg: #e2e8f0;
 --input-bg: #f1f5f9;
 --timer-bg: #ffffff;
 --solution-bg: #f8fafc;
}
body.dark-mode {
 --pt-blue: #3b82f6;
 --pt-blue-light: #60a5fa;
 --bg-body: #0f172a;
 --bg-panel: #1e293b;
 --text-main: #f1f5f9;
 --text-sub: #94a3b8;
 --border-color: #334155;
 --track-bg: #334155;
 --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
 --chip-bg: #334155;
 --input-bg: #0f172a;
 --timer-bg: #1e293b;
 --solution-bg: #0f172a;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	-webkit-tap-highlight-color: transparent;
}
body {
	font-family: 'Poppins', sans-serif;
	background-color: var(--bg-body);
	color: var(--text-main);
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
}
body.dashboard-open .ws-title h1, body.practice-open .ws-title h1, body.exam-open .ws-title h1, body.active-exam-open .ws-title h1, body.help-open .ws-title h1, body.config-open .ws-title h1, body.wallet-open .ws-title h1, body.institute-open .ws-title h1 {
	color: var(--text-main) !important;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-sub);
}
#loginScreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../img/login-screen.png') no-repeat center center/cover;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1);
	padding: 20px;
}
.login-card {
	background: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: 40px;
	border-radius: 30px;
	width: 100%;
	max-width: 450px;
	text-align: center;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	transition: all 0.3s ease;
}
.login-logo-large {
	font-size: 36px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 25px;
	letter-spacing: 4px;
}
.auth-toggle-container {
	position: relative;
	width: 100%;
	max-width: 220px;
	height: 44px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 25px;
	display: flex;
	align-items: center;
	margin: 0 auto 30px auto;
	border: 1px solid rgba(255, 255, 255, 0.2);
	overflow: hidden;
}
.auth-slider {
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	background: var(--pt-yellow);
	border-radius: 20px;
	transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	z-index: 1;
}
.auth-option {
	flex: 1;
	text-align: center;
	z-index: 2;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.3s;
	text-transform: uppercase;
	letter-spacing: 1px;
	user-select: none;
}
.auth-option.active {
	color: var(--pt-blue);
}
.auth-mode-signup .auth-slider {
	transform: translateX(100%);
}
.role-toggle {
	display: flex;
	background: rgba(0, 0, 0, 0.3);
	padding: 5px;
	border-radius: 15px;
	margin-bottom: 25px;
}
.role-opt {
	flex: 1;
	padding: 12px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 10px;
	transition: 0.3s;
}
.role-opt.active {
	background: var(--pt-yellow);
	color: var(--pt-blue);
}
.login-field {
	width: 100%;
	padding: 15px 20px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	color: #fff;
	margin-bottom: 15px;
	outline: none;
	font-family: inherit;
	transition: all 0.3s ease;
}
.login-field::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.field-hidden {
	display: none;
	opacity: 0;
	transform: translateY(-10px);
}
.field-visible {
	display: block;
	opacity: 1;
	transform: translateY(0);
	animation: slideDown 0.3s ease forwards;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
.btn-login-main {
	width: 100%;
	padding: 16px;
	background: var(--pt-yellow);
	color: var(--pt-blue);
	border: none;
	border-radius: 12px;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
#loadingOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #042f60;
	z-index: 10001;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.plane-anim {
	font-size: 40px;
	color: var(--pt-yellow);
	position: relative;
	animation: flyAcross 2s infinite ease-in-out;
}
@keyframes flyAcross {
 0% {
transform: translateX(-100px) translateY(0);
opacity: 0;
}
 50% {
transform: translateX(0) translateY(-10px);
opacity: 1;
}
 100% {
transform: translateX(100px) translateY(0);
opacity: 0;
}
}
.loading-bar-container {
	width: 200px;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	margin-top: 30px;
	overflow: hidden;
}
.loading-bar-fill {
	width: 0%;
	height: 100%;
	background: var(--pt-yellow);
	animation: fillProgress 2.5s forwards;
}
@keyframes fillProgress {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.load-text {
	color: white;
	font-size: 12px;
	margin-top: 15px;
	font-weight: 500;
	letter-spacing: 2px;
}
.icon-rail {
	position: fixed;
	top: 0;
	left: -320px;
	width: 280px;
	height: 100vh;
	background-color: #042f60;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 40px;
	z-index: 9000;
	transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	box-shadow: 5px 0 30px rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.icon-rail.open {
	left: 0;
}
.rail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0 25px;
	margin-bottom: 40px;
}
.rail-logo {
	color: #ffffff;
	font-weight: 800;
	font-size: 24px;
	letter-spacing: 1px;
}
.rail-close-btn {
	color: rgba(255, 255, 255, 0.6);
	font-size: 20px;
	cursor: pointer;
	transition: 0.3s;
}
.rail-close-btn:hover {
	color: var(--pt-yellow);
	transform: rotate(90deg);
}
.rail-menu {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}
.rail-item {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 50px;
	width: 100%;
	font-size: 16px;
	padding-left: 30px;
	border-left: 4px solid transparent;
	transition: 0.3s;
	cursor: pointer;
}
.rail-item i {
	width: 35px;
	font-size: 20px;
	text-align: center;
	margin-right: 10px;
}
.rail-text {
	font-weight: 500;
}
.rail-item:hover, .rail-item.active {
	color: var(--pt-yellow);
	background: rgba(255, 255, 255, 0.05);
	border-left-color: var(--pt-yellow);
}
.workspace {
	flex: 1;
	padding: 30px 40px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	padding-bottom: 60px;
	-webkit-overflow-scrolling: touch;
}
.ws-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	position: relative;
	z-index: 100;
}
.menu-trigger {
	display: flex;
	background: var(--bg-panel);
	width: 40px;
	height: 40px;
	border-radius: 58px;
	align-items: center;
	justify-content: center;
	color: var(--text-main);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border-color);
	cursor: pointer;
	margin-right: 15px;
	font-size: 18px;
	transition: 0.2s;
	flex-shrink: 0;
}
.menu-trigger:hover {
	color: var(--pt-blue);
	transform: scale(1.05);
}
.ws-title {
	display: flex;
	align-items: center;
	flex: 1;
	overflow: hidden;
}
.ws-title h1 {
	font-size:38px;
	color: #fff;
	margin-bottom: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}
.resume-pill {
	background: var(--bg-panel);
	padding: 10px 20px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: var(--shadow-card);
	color: var(--text-main);
	border: 1px solid var(--border-color);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	transition: 0.3s;
	white-space: nowrap;
}
.resume-pill i {
	color: var(--pt-blue);
	font-size: 16px;
}
body.dark-mode .resume-pill i {
	color: var(--pt-blue-light);
}
.resume-pill:hover {
	transform: translateY(-2px);
	border-color: var(--pt-blue);
}
.wallet-pill {
	background: var(--bg-panel);
	padding: 8px 15px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border-color);
	color: var(--text-main);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.wallet-pill i {
	color: var(--pt-yellow);
}
.add-funds {
	background: #10b981;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	margin-left: 5px;
}
.mode-toggle {
	background: var(--bg-panel);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-card);
	color: var(--text-sub);
	border: 1px solid var(--border-color);
	transition: background-color 0.3s, color 0.3s;
	flex-shrink: 0;
}
.mode-toggle:hover {
	color: var(--pt-blue);
	transform: scale(1.05);
}
.launch-icon-btn {
	background: var(--pt-yellow);
	color: var(--pt-blue);
	width: auto;
	height: 41px;
	border-radius: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.3s;
	font-size: 14px;
	font-weight: 700;
	padding: 0 12px;
	gap: 10px;
	box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
	white-space: nowrap;
}
.launch-icon-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 193, 7, 0.5);
}
.mobile-profile-toggle {
	display: flex;
	background: var(--bg-panel);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border-color);
	flex-shrink: 0;
}
.mobile-profile-toggle .user-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	font-size: 14px;
}
.right-panel {
	position: fixed;
	top: 0;
	right: -360px;
	width: 320px;
	height: 100vh;
	background: var(--bg-panel);
	border-left: 1px solid var(--border-color);
	padding: 30px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	z-index: 2000;
	box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
	transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.right-panel.open {
	right: 0;
}
.panel-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1500;
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.3s;
}
.panel-overlay.active {
	display: block;
	opacity: 1;
}
.user-widget-large {
	text-align:center;
	padding-bottom:20px;
	border-bottom:1px solid var(--border-color);
	margin-bottom:20px;
	position:relative;
}
.user-avatar-large {
	width: 80px;
	height: 80px;
	background: var(--pt-blue);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight:700;
	margin:0 auto 15px auto;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.user-info-large h4 {
	font-size:20px;
	margin-bottom:5px;
	color:var(--text-main);
}
.user-id {
	font-size:13px;
	color:var(--text-sub);
	display:block;
}
.user-role {
	font-size:11px;
	font-weight:700;
	background:rgba(0, 122, 255, 0.1);
	color:var(--ios-blue);
	padding:4px 10px;
	border-radius:15px;
	display:inline-block;
	margin-top:5px;
}
.close-profile-btn {
	position:absolute;
	top:0;
	right:0;
	font-size: 20px;
	cursor: pointer;
	color: var(--text-sub);
	transition:0.3s;
}
.close-profile-btn:hover {
	color: var(--pt-blue);
	transform: rotate(90deg);
}
.profile-actions {
	display:flex;
	gap:10px;
	margin-bottom:25px;
}
.p-btn {
	flex:1;
	padding:8px;
	border:1px solid var(--border-color);
	background:var(--bg-body);
	border-radius:10px;
	cursor:pointer;
	font-weight:600;
	font-size:13px;
	color:var(--text-main);
	transition:0.2s;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
}
.p-btn:hover {
	background:var(--pt-blue);
	color:white;
	border-color:var(--pt-blue);
}
.profile-stats-grid {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:10px;
	margin-bottom:25px;
}
.p-stat-box {
	background:var(--track-bg);
	border-radius:12px;
	padding:15px 5px;
	text-align:center;
	border:1px solid var(--border-color);
}
.p-val {
	font-size:18px;
	font-weight:700;
	display:block;
	color:var(--text-main);
}
.p-lbl {
	font-size:10px;
	color:var(--text-sub);
	text-transform:uppercase;
	font-weight:600;
}
.profile-menu {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-bottom:30px;
}
.p-menu-item {
	display:flex;
	align-items:center;
	padding:12px 15px;
	background:var(--bg-panel);
	border:1px solid var(--border-color);
	border-radius:12px;
	cursor:pointer;
	transition:0.2s;
	color:var(--text-main);
}
.p-menu-item:hover {
	border-color:var(--ios-blue);
	transform:translateX(5px);
}
.p-menu-item i {
	width:25px;
	font-size:16px;
	color:var(--text-sub);
}
.p-menu-item span {
	flex:1;
	font-size:14px;
	font-weight:500;
}
.p-menu-item .arrow {
	width:auto;
	font-size:12px;
}
.badge-pro {
	background:var(--pt-yellow);
	color:black;
	font-size:10px;
	font-weight:800;
	padding:2px 6px;
	border-radius:4px;
}
.toggle-switch {
	width:36px;
	height:20px;
	background:#e2e8f0;
	border-radius:20px;
	position:relative;
}
.toggle-switch.active {
	background:var(--ios-blue);
}
 .toggle-switch::after {
content:'';
position:absolute;
top:2px;
left:2px;
width:16px;
height:16px;
background:white;
border-radius:50%;
transition:0.3s;
}
 .toggle-switch.active::after {
left:18px;
}
.btn-logout {
	width:100%;
	padding:15px;
	background:rgba(239, 68, 68, 0.1);
	color:#ef4444;
	border:1px solid rgba(239, 68, 68, 0.2);
	border-radius:12px;
	font-weight:600;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin-top:auto;
	transition:0.2s;
}
.btn-logout:hover {
	background:#ef4444;
	color:white;
}
#introView {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 50px 20px;
	z-index: 10;
	animation: fadeIn 0.8s ease;
	background: url('overlay-vignett.png') center top no-repeat, url('https://cdn.plnspttrs.net/46214/se-ryc-norwegian-air-sweden-aoc-boeing-737-8-max_PlanespottersNet_1449372_107e58e263_o.jpg') no-repeat center center / cover;
	background-color: #042f60;
}
body.dark-mode #introView {
	background: url('overlay-vignett.png') center top no-repeat, url('https://honeywell.scene7.com/is/image/Honeywell65/hon-aero-s-1219136158-777-cockpit') no-repeat center center / cover;
}
#introView h2 {
	font-size: 28px;
	color: var(--pt-blue);
	margin-bottom: 10px;
	font-weight: 800;
}
#introView p {
	color: var(--text-sub);
	max-width: 600px;
	line-height: 1.6;
	margin-bottom: 40px;
}
body.dark-mode #introView h2 {
	color:#fff
}
.intro-options-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
.intro-btn {
	position: relative;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 15px;
	padding: 20px;
	width: 168px;
	height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	color: var(--pt-blue);
	margin: 0px 10px;
}
body.dark-mode .intro-btn {
	background: rgba(30, 41, 59, 0.4);
	border-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}
.intro-btn:hover {
	transform: translateY(-5px);
	background: var(--pt-blue);
	color: #fff;
	border-color: var(--pt-blue);
	box-shadow: 0 15px 30px rgba(4, 47, 96, 0.3);
}
body.dark-mode .intro-btn:hover {
	background: var(--pt-blue);
}
.intro-btn i {
	font-size: 28px;
	margin-bottom: 12px;
}
.intro-btn span {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}
.intro-popup {
	position: absolute;
	bottom: 110%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: #fff;
	color: var(--pt-blue);
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 11px;
	width: 220px;
	text-align: center;
	font-weight: 500;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	pointer-events: none;
	z-index: 20;
}
 .intro-popup::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border-width: 6px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
.intro-btn:hover .intro-popup {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-5px);
}
#dashboardFooter {
	position: fixed;
	bottom: 20px;
	left: 0;
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 40px;
	z-index: 8000;
	pointer-events: none;
}
.footer-logo {
	position: absolute;
	left: 40px;
	bottom: 5px;
	font-weight: 800;
	font-size: 30px;
	color:#fff;
	letter-spacing: 2px;
	pointer-events: auto;
}
.footer-quote {
	font-size:20px;
	font-weight: 500;
	color: #fff;
	font-style: italic;
	transition: opacity 0.5s ease;
	text-align: center;
	max-width: 600px;
	opacity: 1;
}
body.dark-mode .footer-logo {
	color: #fff;
}
body.dark-mode .footer-quote {
	color: #94a3b8;
}
#quoteText {
	font-style:italic!important
}
.section-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-sub);
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dashboard-open #dashboardFooter, body.practice-open #dashboardFooter, body.exam-open #dashboardFooter, body.active-exam-open #dashboardFooter, body.help-open #dashboardFooter, body.config-open #dashboardFooter, body.wallet-open #dashboardFooter, body.institute-open #dashboardFooter {
	display: none !important;
}
.performance-cockpit {
	overflow: visible;
	padding: 10px 0;
	margin-bottom: 40px;
	position: relative;
	z-index: 20;
	display: flex;
	justify-content: space-between;
}
.instrument-panel, .details-panel {
	cursor: default;
	background: var(--bg-panel);
	border-radius: 20px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-card);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 49%;
	padding: 20px 0;
	flex-direction: column;
	min-height: 250px;
}
.panel-placeholder {
	display: none !important;
}
.dark-mode .panel-placeholder {
	color:#fff
}
.dark-mode .ops-placeholder i {
	color:#fff
}
.dark-mode .app-icon {
	color:#fff
}
.dark-mode .app-icon i {
	color:#fff
}
.dark-mode .radial-dial {
	color: #fff;
	background: #fff;
}
.dark-mode .dial-score {
	color:#fff
}
.dark-mode .toggle-opt.active {
	color:#fff
}
.dark-mode .sub-box.selected {
	background:#fff;
	color:#000
}
.dark-mode .ops-title i {
	color:#fff
}
.dark-mode .btn-action {
	background:#fff;
	color:#000
}
.dark-mode .btn-kdr {
	color:#fff
}
.dark-mode .launch-icon-btn {
	background:#fff;
	color:#000
}
 .dark-mode .t-item::before {
background:#fff;
}
.panel-placeholder i {
	font-size: 50px;
}
.panel-content {
	display: block;
	opacity: 1;
	width: 100%;
	padding-top: 0px !important;
}
.radial-dial {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: conic-gradient(var(--pt-yellow) 0deg 338deg, var(--border-color) 338deg 360deg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 30px auto;
	margin-top:0px;
}
 .radial-dial::before {
content: '';
position: absolute;
width: 155px;
height: 155px;
background: var(--bg-panel);
border-radius: 50%;
}
.dial-content {
	position: relative;
	z-index: 2;
	text-align: center;
}
.dial-score {
	font-size: 46px;
	font-weight: 800;
	color: var(--pt-blue);
}
.mini-stats-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	gap: 10px;
	padding: 0 30px 0px;
}
.mini-stat {
	background: var(--bg-body);
	padding: 10px;
	border-radius: 10px;
	text-align: center;
}
.ops-grid {
	display: flex;
	margin-bottom: 40px;
	flex-wrap: wrap;
	justify-content: space-between;
}
.ops-card {
	flex-direction: column;
	cursor: default;
	background: var(--bg-panel);
	border-radius: 20px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-card);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 49%;
	padding: 20px 0;
	min-height: 250px;
}
.ops-placeholder {
	display: none !important;
}
.ops-placeholder i {
	font-size: 45px;
	color: var(--pt-blue);
}
.ops-content {
	display: block;
	opacity: 1;
	padding: 25px;
	flex: 1;
	width: 100%;
	padding-top:0px!important
}
.ops-footer {
	display: flex;
	padding: 15px 25px;
	background: var(--track-bg);
	border-top: 1px solid var(--border-color);
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}
.app-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 20px;
}
.app-icon {
	background: var(--bg-panel);
	border-radius: 16px;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--text-sub);
	border: 1px solid var(--border-color);
	transition: 0.3s;
	cursor: pointer;
}
.app-icon i {
	font-size: 24px;
	margin-bottom: 10px;
	color: var(--pt-blue);
}
.user-widget {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
}
.user-avatar {
	width: 50px;
	height: 50px;
	background: var(--pt-blue);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.promo-card {
	background: linear-gradient(135deg, var(--pt-yellow) 0%, #ffdb6e 100%);
	border-radius: 16px;
	padding: 25px;
	text-align: center;
	margin-bottom: 40px;
	color: #042f60;
}
.timeline-box {
	flex: 1;
}
.timeline {
	border-left: 2px solid var(--border-color);
	padding-left: 20px;
	margin-left: 10px;
}
.t-item {
	position: relative;
	margin-bottom: 30px;
}
 .t-item::before {
content: '';
width: 12px;
height: 12px;
background: var(--pt-blue);
border-radius: 50%;
position: absolute;
left: -28px;
top: -5px;
border: 2px solid var(--bg-panel);
}
.close-profile-btn {
	margin-left:auto;
	font-size: 20px;
	cursor: pointer;
	color: var(--text-sub);
	transition:0.3s;
}
.close-profile-btn:hover {
	color: var(--pt-blue);
	transform: rotate(90deg);
}
.dashboard-hidden {
	display: none !important;
}
 @keyframes fadeIn {
from {
opacity: 0;
}
to {
	opacity: 1;
}
}
.details-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.details-header h3 {
	font-size: 18px;
	color: var(--text-main);
}
.filter-select {
	font-size: 12px;
	background: transparent;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 5px 10px;
	color: var(--text-sub);
	outline: none;
}
.ops-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15px;
}
.ops-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-main);
	display: flex;
	align-items: center;
	gap: 10px;
}
.ops-title i {
	color: var(--pt-blue);
	background: var(--track-bg);
	padding: 8px;
	border-radius: 8px;
}
.gen-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-sub);
	margin-bottom: 8px;
	display: block;
}
.exam-toggle-container {
	background: var(--track-bg);
	border-radius: 8px;
	padding: 4px;
	display: flex;
	margin-bottom: 20px;
}
.toggle-opt {
	flex: 1;
	text-align: center;
	padding: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-sub);
	cursor: pointer;
	border-radius: 6px;
transition: .2s;
}
.toggle-opt.active {
	background: var(--bg-panel);
	color: var(--pt-blue);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
.subject-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 20px;
}
.sub-box {
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	cursor: pointer;
transition: .2s;
	background: var(--bg-panel);
}
.sub-box:hover {
	border-color: var(--pt-blue);
}
.sub-box.selected {
	background: var(--pt-blue);
	border-color: var(--pt-blue);
	color: #fff;
}
.sub-box i {
	font-size: 16px;
	margin-bottom: 5px;
	display: block;
}
.sub-box span {
	font-size: 11px;
	font-weight: 500;
}
.remedial-box {
	background: #fef2f2;
	border: 1px solid #fee2e2;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
}
.rem-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	margin-bottom: 8px;
	color: var(--text-main);
}
.rem-warn {
	color: #ef4444;
	font-weight: 700;
	font-size: 12px;
	background: #fff;
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid #fecaca;
}
.kdr-select {
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	background: var(--bg-panel);
	color: var(--text-main);
	font-family: inherit;
	margin-bottom: 15px;
	outline: none;
	cursor: pointer;
}
.history-list {
	flex: 1;
	overflow-y: auto;
	max-height: 250px;
	padding-right: 5px;
}
.hist-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--border-color);
}
.hist-info {
	display: flex;
	flex-direction: column;
}
.hist-date {
	font-size: 11px;
	color: var(--text-sub);
}
.hist-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-main);
}
.hist-score-bad {
	color: #ef4444;
	font-weight: 700;
	font-size: 12px;
	background: #fef2f2;
	padding: 2px 6px;
	border-radius: 4px;
}
.hist-score-good {
	color: #10b981;
	font-weight: 700;
	font-size: 12px;
	background: #d1fae5;
	padding: 2px 6px;
	border-radius: 4px;
}
.btn-kdr {
	background: transparent;
	border: 1px solid var(--border-color);
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--pt-blue);
	cursor: pointer;
transition: .2s;
}
.btn-kdr:hover {
	background: var(--pt-blue);
	color: #fff;
	border-color: var(--pt-blue);
}
.btn-action {
	padding: 10px 20px;
	background: var(--pt-blue);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
transition: background .2s;
/*flex: 1;*/
}
.btn-action:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
 .btn-action:hover:not(:disabled) {
background: var(--pt-blue-light);
}
.btn-secondary {
	padding: 10px 20px;
	background: transparent;
	color: var(--text-sub);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
transition: .2s;
	margin-right:10px;
}
.btn-secondary:hover {
	background: var(--bg-panel);
	color: var(--text-main);
}
.notif-toggle {
	background: var(--bg-panel);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-card);
	color: var(--text-sub);
	border: 1px solid var(--border-color);
	position: relative;
	transition: 0.2s;
	flex-shrink: 0;
}
.notif-toggle:hover {
	color: var(--pt-blue);
	transform: scale(1.05);
}
.notif-dot {
	position: absolute;
	top: 10px;
	right: 11px;
	width: 8px;
	height: 8px;
	background: #ef4444;
	border-radius: 50%;
	border: 2px solid var(--bg-panel);
}
#practiceView {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-body);
	z-index: 5000;
	padding: 30px 10px;
	flex-direction: column;
	overflow-y: auto;
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
 @keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
	transform: translateY(0);
	opacity: 1;
}
}
.practice-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border-color);
}
.timer-badge {
	background: var(--timer-bg);
	padding: 8px 16px;
	border-radius: 20px;
	font-weight: 600;
	color: var(--text-main);
	border: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: var(--shadow-card);
}
.progress-container {
	max-width: 400px;
	margin: 0 20px;
	text-align: center;
}
.progress-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-sub);
	margin-bottom: 5px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.p-track {
	height: 6px;
	background: var(--border-color);
	border-radius: 10px;
	overflow: hidden;
}
.p-fill {
	height: 100%;
	width: 25%;
	background: var(--ios-gradient);
	border-radius: 10px;
	transition: width 0.5s ease;
}
.question-card-large {
	background: var(--bg-panel);
	border-radius: 24px;
	padding: 40px;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border-color);
	margin-bottom: 30px;
	position: relative;
}
.q-badge-row {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	align-items: center;
}
.flag-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border-color: var(--border-color);
	color: var(--text-sub);
}
.flag-btn:hover {
	color: var(--pt-red);
	border-color: var(--pt-red);
	background: rgba(239, 68, 68, 0.1);
}
.flag-btn.active {
	background: var(--pt-red);
	color: white;
	border-color: var(--pt-red);
}
.q-tag {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--track-bg);
	color: var(--text-sub);
	text-transform: uppercase;
}
.q-tag.subject {
	color: var(--ios-blue);
	background: rgba(0, 122, 255, 0.1);
}
.q-text-large {
	font-size: 20px;
	font-weight: 500;
	color: var(--text-main);
	line-height: 1.6;
}
.options-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	max-width: 100%;
	margin-bottom:10px;
}
.opt-btn {
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	padding: 20px;
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	position: relative;
}
.opt-btn:hover {
	border-color: var(--ios-blue);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.opt-btn.selected {
	background: rgba(0, 122, 255, 0.04);
	border-color: var(--ios-blue);
	border-width: 2px;
	padding: 19px;
}
.opt-btn.incorrect {
	border-color: var(--pt-red);
	background: rgba(239, 68, 68, 0.05);
	border-width: 2px;
	padding: 19px;
}
.opt-btn.incorrect .opt-circle {
	background: var(--pt-red);
	color: white;
}
.opt-btn.correct {
	border-color: var(--pt-green);
	background: rgba(16, 185, 129, 0.05);
	border-width: 2px;
	padding: 19px;
}
.opt-btn.correct .opt-circle {
	background: var(--pt-green);
	color: white;
}
.opt-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--track-bg);
	color: var(--text-sub);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	flex-shrink: 0;
	transition: 0.2s;
}
body.dark-mode .opt-circle {
	background: #334155;
	color: #fff;
}
.opt-btn.selected .opt-circle {
	background: var(--ios-blue);
	color: #fff;
}
.opt-content {
	font-size: 14px;
	color: var(--text-main);
	font-weight: 500;
}
.practice-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
	margin-top: auto;
}
#solutionContainer {
	display: none;
	margin-top: 20px;
	background: var(--bg-panel);
	padding: 0;
	border-radius: 12px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-card);
	animation: slideDown 0.3s ease forwards;
}
.sol-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid var(--border-color);
	background: rgba(0, 0, 0, 0.02);
}
.sol-title {
	font-weight: 700;
	color: var(--text-main);
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.instructor-btn {
	background: transparent;
	border: 1px solid var(--ios-blue);
	color: var(--ios-blue);
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
	transition: 0.2s;
	display: flex;
	align-items: center;
	gap: 6px;
}
.instructor-btn:hover {
	background: var(--ios-blue);
	color: white;
}
.sol-body {
	padding: 20px;
	font-size: 14px;
	color: var(--text-main);
	line-height: 1.6;
}
.feedback-section {
	padding: 20px;
	border-top: 1px solid var(--border-color);
	background: var(--bg-panel);
}
.feedback-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-sub);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.star-rating {
	display: flex;
	gap: 5px;
	margin-bottom: 15px;
}
.star-rating i {
	color: #e2e8f0;
	cursor: pointer;
	font-size: 18px;
	transition: 0.2s;
}
.star-rating i.active {
	color: var(--pt-yellow);
}
.feedback-input {
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	background: var(--bg-body);
	color: var(--text-main);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	resize: none;
	height: 50px;
}
.feedback-input:focus {
	border-color: var(--ios-blue);
}
.btn-view-solution {
	background: var(--pt-green);
	color: white;
	border: none;
}
.btn-view-solution:hover {
	background: #059669;
}
#examView {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-body);
	z-index: 5000;
	padding: 30px 40px;
	flex-direction: column;
	overflow-y: auto;
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.exam-header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}
.exam-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	padding-bottom: 40px;
}
.exam-card {
	background: var(--bg-panel);
	border-radius: 20px;
	border: 1px solid var(--border-color);
	padding: 25px;
	position: relative;
	box-shadow: var(--shadow-card);
	transition: 0.3s ease;
	display: flex;
	flex-direction: column;
}
.exam-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	border-color: var(--ios-blue);
}
.exam-badge {
	background: var(--track-bg);
	color: var(--text-sub);
	font-size: 11px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
	align-self: flex-start;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.exam-badge.active {
	background: rgba(0, 122, 255, 0.1);
	color: var(--ios-blue);
}
.exam-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-main);
	margin-bottom: 10px;
}
.exam-meta {
	display: flex;
	gap: 15px;
	color: var(--text-sub);
	font-size: 13px;
	margin-bottom: 25px;
	font-weight: 500;
}
.exam-meta i {
	color: var(--ios-blue);
	margin-right: 5px;
}
.btn-start-exam {
	margin-top: auto;
	width: 100%;
	padding: 12px;
	background: var(--bg-body);
	color: var(--text-main);
	font-weight: 600;
	border-radius: 12px;
	border: 1px solid var(--border-color);
	cursor: pointer;
	transition: 0.2s;
	text-align: center;
}
.btn-start-exam:hover {
	background: var(--ios-blue);
	color: #fff;
	border-color: var(--ios-blue);
}
#activeExamView {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-body);
	z-index: 6000;
	padding: 30px 40px;
	flex-direction: column;
	overflow-y: auto;
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.active-exam-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border-color);
}
.exam-timer-large {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-main);
	display: flex;
	align-items: center;
	gap: 10px;
}
.exam-timer-large i {
	color: var(--ios-blue);
}
.btn-end-exam {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
	border: 1px solid rgba(239, 68, 68, 0.2);
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.2s;
}
.btn-end-exam:hover {
	background: #ef4444;
	color: #fff;
}
#walletView {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-body);
	z-index: 5000;
	padding: 30px 40px;
	flex-direction: column;
	overflow-y: auto;
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wallet-card {
	background: linear-gradient(135deg, var(--pt-blue) 0%, var(--pt-blue-light) 100%);
	color: white;
	padding: 30px;
	border-radius: 20px;
	margin-bottom: 30px;
	box-shadow: 0 10px 25px rgba(4, 47, 96, 0.3);
}
.wallet-balance-label {
	font-size: 14px;
	opacity: 0.8;
	margin-bottom: 5px;
	font-weight: 500;
}
.wallet-balance-amount {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 20px;
}
.wallet-actions {
	display: flex;
	gap: 15px;
}
.w-btn {
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	padding: 10px 20px;
	border-radius: 12px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	flex: 1;
	text-align: center;
	transition: 0.2s;
}
.w-btn:hover {
	background: white;
	color: var(--pt-blue);
}
.packages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 30px;
}
.pkg-card {
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	padding: 20px;
	border-radius: 16px;
	cursor: pointer;
	text-align: center;
	transition: 0.2s;
}
.pkg-card:hover {
	transform: translateY(-3px);
	border-color: var(--pt-yellow);
}
.pkg-coins {
	font-size: 24px;
	font-weight: 700;
	color: var(--pt-yellow);
	margin-bottom: 5px;
}
.pkg-price {
	font-size: 14px;
	color: var(--text-main);
	font-weight: 600;
}
.trans-list {
	background: var(--bg-panel);
	border-radius: 16px;
	border: 1px solid var(--border-color);
	padding: 0 20px;
}
.trans-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid var(--border-color);
}
.trans-item:last-child {
	border-bottom: none;
}
.trans-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--track-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	color: var(--text-sub);
}
.trans-details {
	flex: 1;
}
.trans-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-main);
	display: block;
}
.trans-date {
	font-size: 12px;
	color: var(--text-sub);
}
.trans-amount {
	font-weight: 700;
	font-size: 14px;
}
.amount-pos {
	color: var(--pt-green);
}
.amount-neg {
	color: var(--text-main);
}
#helpView {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-body);
	z-index: 5000;
	padding: 30px 40px;
	flex-direction: column;
	overflow-y: auto;
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.help-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}
.help-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	padding-bottom: 40px;
}
.help-card {
	background: var(--bg-panel);
	border-radius: 20px;
	border: 1px solid var(--border-color);
	padding: 25px;
	box-shadow: var(--shadow-card);
}
.help-card h3 {
	font-size: 18px;
	margin-bottom: 15px;
	color: var(--text-main);
	display: flex;
	align-items: center;
	gap: 10px;
}
.help-card h3 i {
	color: var(--ios-blue);
}
.help-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--border-color);
	color: var(--text-sub);
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	transition: 0.2s;
}
.help-item:last-child {
	border-bottom: none;
}
.help-item:hover {
	color: var(--ios-blue);
	padding-left: 5px;
}
.search-bar-container {
	position: relative;
	margin-bottom: 30px;
}
.search-bar {
	width: 100%;
	padding: 15px 20px 15px 50px;
	border-radius: 15px;
	border: 1px solid var(--border-color);
	background: var(--bg-panel);
	outline: none;
	font-family: inherit;
	font-size: 14px;
	box-shadow: var(--shadow-card);
	color: var(--text-main);
}
.search-icon {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-sub);
	font-size: 18px;
}
#configView {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-body);
	z-index: 5000;
	padding: 30px 40px;
	flex-direction: column;
	overflow-y: auto;
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.config-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.config-container-flex {
	display: flex;
	gap: 30px;
	flex: 1;
	padding-bottom: 20px;
}
.left-col {
	width: 45%;
	display:flex;
	flex-direction:column;
}
.right-col {
	width: 55%;
	display:flex;
	flex-direction:column;
	gap: 20px;
}
.config-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	flex:1;
	padding-bottom:10px;
}
.config-card {
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	padding: 20px;
	border-radius: 16px;
	cursor: pointer;
	text-align: center;
	transition: 0.2s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-height: 110px;
	justify-content: center;
}
.config-card:hover {
	border-color: var(--ios-blue);
	transform: translateY(-3px);
}
.config-card.selected {
	border-color: var(--ios-blue);
	background: rgba(0, 122, 255, 0.05);
	box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
}
.config-card i {
	font-size: 24px;
	color: var(--text-sub);
}
.config-card.selected i {
	color: var(--ios-blue);
}
.config-card span {
	font-weight: 600;
	font-size: 13px;
	color: var(--text-main);
}
.metrics-card {
	background: var(--bg-panel);
	padding: 20px;
	border-radius: 16px;
	border: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0px;
	margin-top: -19px;
}
.metric-item {
	text-align: center;
	flex: 1;
	border-right: 1px solid var(--border-color);
}
.metric-item:last-child {
	border-right: none;
}
.m-val {
	display: block;
	font-weight: 700;
	font-size: 18px;
	color: var(--text-main);
}
.m-lbl {
	font-size: 11px;
	color: var(--text-sub);
	text-transform: uppercase;
}
.settings-container {
	background: var(--bg-panel);
	border-radius: 20px;
	padding: 25px;
	border: 1px solid var(--border-color);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.setting-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.setting-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.setting-label {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-main);
}
.config-section-title {
	font-size:12px;
	font-weight:700;
	color:var(--text-sub);
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:10px;
	margin-top:20px;
}
.config-section-title:first-child {
	margin-top:0;
}
.styled-input-group {
	position: relative;
	margin-bottom: 15px;
}
.styled-input {
	width: 100%;
	padding: 14px 15px 14px 45px;
	background: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	color: var(--text-main);
	font-size: 14px;
	outline: none;
	transition:0.2s;
	font-family:inherit;
}
.styled-input:focus {
	border-color: var(--ios-blue);
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}
.input-icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-sub);
}
 .styled-input::placeholder {
color: var(--text-sub);
opacity: 0.7;
}
.styled-select {
	width: 100%;
	padding: 14px 15px;
	background: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	color: var(--text-main);
	font-size: 14px;
	outline: none;
	font-family:inherit;
	cursor:pointer;
}
.styled-select option {
	background: var(--bg-panel);
	color: var(--text-main);
}
.segmented-control {
	display: flex;
	background: var(--track-bg);
	padding: 4px;
	border-radius: 12px;
	gap: 4px;
	margin-bottom:15px;
}
.segment-opt {
	flex: 1;
	padding: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-sub);
	border-radius: 8px;
	cursor: pointer;
	transition: 0.2s;
	user-select: none;
}
.segment-opt.active {
	background: var(--bg-panel);
	color: var(--ios-blue);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.mark-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin-bottom: 15px;
}
.mark-opt {
	background: var(--bg-panel);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 10px 0;
	text-align: center;
	cursor: pointer;
	transition: 0.2s;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.mark-opt:hover {
	border-color: var(--ios-blue);
}
.mark-opt.selected {
	background: var(--ios-blue);
	color: #fff;
	border-color: var(--ios-blue);
}
.mark-val {
	display: block;
	font-weight: 800;
	font-size: 16px;
	line-height:1.2;
}
.mark-lbl {
	font-size: 10px;
	opacity: 0.8;
}
.filter-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 5px;
}
.chip {
	padding: 8px 15px;
	background: var(--chip-bg);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-sub);
	cursor: pointer;
	border: 1px solid transparent;
	transition: 0.2s;
}
.chip.active {
	background: var(--ios-blue);
	color: #fff;
	box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
}
.cost-display {
	background: var(--track-bg);
	padding: 15px;
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	border: 1px solid var(--border-color);
}
.cost-val {
	font-weight: 700;
	color: var(--text-main);
	display: flex;
	align-items: center;
	gap: 5px;
}
.cost-val i {
	color: var(--pt-yellow);
}
.slider-container {
	width: 60%;
	display: flex;
	align-items: center;
	gap: 15px;
}
input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	background: var(--track-bg);
	border-radius: 5px;
	outline: none;
}
 input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ios-blue);
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.slider-val {
	font-weight: 700;
	width: 30px;
	text-align: right;
	color: var(--text-main);
}
#instituteView {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-body);
	z-index: 5000;
	padding: 30px 40px;
	flex-direction: column;
	overflow-y: auto;
	animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.comp-list {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-bottom: 20px;
}
.comp-item {
	display:flex;
	justify-content:space-between;
	align-items:center;
	background: var(--bg-panel);
	padding:15px 20px;
	border-radius:12px;
	border:1px solid var(--border-color);
}
.comp-info {
	display:flex;
	align-items:center;
	gap:15px;
	flex:1;
}
.comp-check {
	width:20px;
	height:20px;
	cursor:pointer;
	accent-color: var(--ios-blue);
}
.comp-name {
	font-weight:600;
	font-size:14px;
	color:var(--text-main);
}
.comp-perc {
	width:80px;
	padding:8px;
	border-radius:8px;
	border:1px solid var(--border-color);
	background:var(--input-bg);
	color:var(--text-main);
	font-weight:600;
	font-size:13px;
	text-align:center;
}
.comp-perc:disabled {
	opacity:0.5;
}
.inst-preview-container {
	display:flex;
	flex-direction:column;
	gap:20px;
	padding-bottom:20px;
	overflow-y: auto;
	flex:1;
}
.inst-question-card {
	display:flex;
	background:var(--bg-panel);
	border-radius:16px;
	padding:20px;
	border:1px solid var(--border-color);
	gap:20px;
	align-items:flex-start;
	transition: all 0.3s ease;
}
.inst-card-locked {
	border-color: var(--pt-green);
	background: rgba(16, 185, 129, 0.03);
}
.action-col {
	display:flex;
	flex-direction:column;
	gap:10px;
	min-width:40px;
	align-items:center;
}
.action-btn {
	width:36px;
	height:36px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:0.2s;
	border:1px solid var(--border-color);
}
.action-btn.accept {
	color:var(--pt-green);
	background:rgba(16, 185, 129, 0.1);
	border-color:var(--pt-green);
}
.action-btn.reject {
	color:var(--pt-red);
	background:rgba(239, 68, 68, 0.1);
	border-color:var(--pt-red);
}
.action-btn:hover {
	transform:scale(1.1);
}
.action-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}
.inst-q-content {
	flex:1;
}
.inst-q-text {
	font-weight:600;
	font-size:15px;
	color:var(--text-main);
	margin-bottom:10px;
}
.inst-options {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: var(--text-sub);
}
.inst-option-row {
	padding: 4px 0;
	display: flex;
	gap: 8px;
}
.inst-option-row.correct {
	color: var(--pt-green);
	font-weight: 600;
}
.marks-col {
	min-width:80px;
	text-align:right;
}
.mark-select {
	padding:8px;
	border-radius:8px;
	border:1px solid var(--border-color);
	background:var(--input-bg);
	color:var(--text-main);
	font-weight:600;
	font-size:12px;
	cursor:pointer;
	width:100%;
}
.progress-bar-inst {
	width:100%;
	height:10px;
	background:var(--track-bg);
	border-radius:5px;
	overflow:hidden;
	margin-bottom:20px;
	border:1px solid var(--border-color);
}
.progress-fill-inst {
	height:100%;
	background:var(--ios-blue);
	width:0%;
	transition: width 0.3s;
}
.total-tracker {
	font-size:14px;
	font-weight:700;
	margin-bottom:10px;
	display:flex;
	justify-content:space-between;
}
.summary-bar {
	display: flex;
	justify-content: space-between;
	background: var(--track-bg);
	padding: 10px 15px;
	border-radius: 12px;
	margin-bottom: 15px;
	border: 1px solid var(--border-color);
}
.summary-item {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-sub);
}
.summary-val {
	color: var(--text-main);
	font-weight: 700;
}
.user-widget-large {
	text-align:center;
	padding-bottom:20px;
	border-bottom:1px solid var(--border-color);
	margin-bottom:20px;
	position:relative;
}
.user-avatar-large {
	width: 80px;
	height: 80px;
	background: var(--pt-blue);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight:700;
	margin:0 auto 15px auto;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.user-info-large h4 {
	font-size:20px;
	margin-bottom:5px;
	color:var(--text-main);
}
.user-id {
	font-size:13px;
	color:var(--text-sub);
	display:block;
}
.user-role {
	font-size:11px;
	font-weight:700;
	background:rgba(0, 122, 255, 0.1);
	color:var(--ios-blue);
	padding:4px 10px;
	border-radius:15px;
	display:inline-block;
	margin-top:5px;
}
.close-profile-btn {
	position:absolute;
	top:0;
	right:0;
	font-size: 20px;
	cursor: pointer;
	color: var(--text-sub);
	transition:0.3s;
}
.close-profile-btn:hover {
	color: var(--pt-blue);
	transform: rotate(90deg);
}
.profile-actions {
	display:flex;
	gap:10px;
	margin-bottom:25px;
}
.p-btn {
	flex:1;
	padding:8px;
	border:1px solid var(--border-color);
	background:var(--bg-body);
	border-radius:10px;
	cursor:pointer;
	font-weight:600;
	font-size:13px;
	color:var(--text-main);
	transition:0.2s;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
}
.p-btn:hover {
	background:var(--pt-blue);
	color:white;
	border-color:var(--pt-blue);
}
.profile-stats-grid {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:10px;
	margin-bottom:25px;
}
.p-stat-box {
	background:var(--track-bg);
	border-radius:12px;
	padding:15px 5px;
	text-align:center;
	border:1px solid var(--border-color);
}
.p-val {
	font-size:18px;
	font-weight:700;
	display:block;
	color:var(--text-main);
}
.p-lbl {
	font-size:10px;
	color:var(--text-sub);
	text-transform:uppercase;
	font-weight:600;
}
.profile-menu {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-bottom:30px;
}
.p-menu-item {
	display:flex;
	align-items:center;
	padding:12px 15px;
	background:var(--bg-panel);
	border:1px solid var(--border-color);
	border-radius:12px;
	cursor:pointer;
	transition:0.2s;
	color:var(--text-main);
}
.p-menu-item:hover {
	border-color:var(--ios-blue);
	transform:translateX(5px);
}
.p-menu-item i {
	width:25px;
	font-size:16px;
	color:var(--text-sub);
}
.p-menu-item span {
	flex:1;
	font-size:14px;
	font-weight:500;
}
.p-menu-item .arrow {
	width:auto;
	font-size:12px;
}
.badge-pro {
	background:var(--pt-yellow);
	color:black;
	font-size:10px;
	font-weight:800;
	padding:2px 6px;
	border-radius:4px;
}
.toggle-switch {
	width:36px;
	height:20px;
	background:#e2e8f0;
	border-radius:20px;
	position:relative;
}
.toggle-switch.active {
	background:var(--ios-blue);
}
 .toggle-switch::after {
content:'';
position:absolute;
top:2px;
left:2px;
width:16px;
height:16px;
background:white;
border-radius:50%;
transition:0.3s;
}
 .toggle-switch.active::after {
left:18px;
}
.btn-logout {
	width:100%;
	padding:15px;
	background:rgba(239, 68, 68, 0.1);
	color:#ef4444;
	border:1px solid rgba(239, 68, 68, 0.2);
	border-radius:12px;
	font-weight:600;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin-top:auto;
	transition:0.2s;
}
.btn-logout:hover {
	background:#ef4444;
	color:white;
}
@media (max-width: 1024px) {
 .workspace {
padding: 20px 25px;
}
 .performance-cockpit {
flex-wrap: wrap;
}
 .instrument-panel, .details-panel {
width: 100%;
margin-bottom: 20px;
min-height: 200px;
}
 .ops-card {
width: 100%;
margin-bottom: 20px;
}
 .config-container-flex {
flex-direction: column;
}
 .left-col, .right-col {
width: 100%;
}
 .config-grid {
grid-template-columns: repeat(3, 1fr);
max-height: 200px;
}
}
@media (max-width: 768px) {
 .workspace {
padding: 20px 15px;
}
 .ws-title h1 {
font-size: 24px;
}
 .resume-pill {
display: none;
}
 .header-actions {
gap: 8px;
}
 .wallet-pill {
padding: 6px 12px;
font-size: 11px;
}
.performance-cockpit {
display: flex;
flex-direction: column;
}
 .instrument-panel, .details-panel {
width: 100%;
}
 .mini-stats-row {
grid-template-columns: 1fr 1fr;
}
 .ops-grid {
flex-direction: column;
}
 .ops-card {
width: 100%;
}
.intro-btn {
width: 45%;
margin-bottom: 10px;
height: auto;
padding: 25px 10px;
}
 .intro-btn i {
font-size: 24px;
}
.config-grid {
grid-template-columns: repeat(2, 1fr);
max-height: none;
}
 .mark-grid {
grid-template-columns: repeat(5, 1fr);
}
.practice-top-bar {
flex-wrap: wrap;
gap: 10px;
}
 .timer-badge {
order: 1;
}
 .progress-container {
order: 3;
width: 100%;
max-width: 100%;
margin: 10px 0;
}
 .practice-top-bar > div:last-child {
order: 2;
margin-left: auto;
}
 .question-card-large {
padding: 20px;
border-radius: 16px;
}
 .q-text-large {
font-size: 16px;
}
 .opt-btn {
padding: 15px;
}
 .practice-nav {
padding-top: 15px;
}
 .btn-action {
padding: 10px 20px;
font-size: 14px;
}
.inst-question-card {
flex-direction: column;
}
 .action-col {
flex-direction: row;
width: 100%;
justify-content: flex-start;
}
 .marks-col {
width: 100%;
text-align: left;
}
.dashboard-open #dashboardFooter {
display: none !important;
}
}
@media (max-width: 480px) {
 .ws-title h1 {
font-size: 20px;
}
 .launch-icon-btn span {
display: none;
}
 .launch-icon-btn {
width: 39px;
padding: 0;
height: 39px;
}
 .config-grid {
grid-template-columns: repeat(2, 1fr);
}
 .mark-grid {
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
 .mark-val {
font-size: 14px;
}
 .intro-btn {
width: 42%;
margin: 5px 5px;
}
 .footer-logo {
left: 0px;
bottom: 56px;
width: 100%;
right: 0px;
margin:0 auto;
text-align:center
}
 .footer-logo img {
width: 20%;
}
 #introView {
padding: 50px 10px;
}
 .footer-quote {
font-size:12px;
}
}
.wallet-open .open {
	left: -300px;
}
.institute-open .open {
	left: -300px;
}
@keyframes fadeIn {
 from {
opacity: 0;
}
to {
	opacity: 1;
}
}
.sol-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.clamped-text {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.6;
	margin-bottom: 15px;
}
.bottom-instructor-btn {
	width: 100%;
	padding: 12px;
	background: white;
	border: 1px solid var(--ios-blue);
	color: var(--ios-blue);
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: 0.2s;
	margin-top: 10px;
}
.bottom-instructor-btn:hover {
	background: var(--ios-blue);
	color: white;
}
.rating-hidden {
	display: none;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid var(--border-color);
	animation: slideDown 0.3s ease forwards;
}
/* Style to match navigation boxes in the image */
.inst-lesson-card {
	background: #fff;
	border-radius: 20px;
	padding: 15px 25px;
	display: flex;
	align-items: center;
	gap: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--border-color);
	cursor: pointer;
	transition: 0.2s;
}
.inst-lesson-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
	border-color: var(--ios-blue);
}
.inst-lesson-card i {
	color: var(--ios-blue);
	font-size: 18px;
	width: 25px;
	text-align: center;
}
.inst-lesson-card span {
	font-weight: 700;
	font-size: 14px;
	color: var(--text-main);
}
.lesson-list-vertical {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	padding-bottom: 40px;
}
/* Optional: Ensure the cards expand to fill the width */
.lesson-list-vertical .inst-lesson-card {
	width: 100%;
	margin: 0;
}
/* Update this existing class if you want them to look slimmer */
.inst-lesson-card {
	background: #fff;
	border-radius: 12px; /* Reduced from 20px for a cleaner list look */
	padding: 20px 25px; /* Increased padding slightly for better touch targets */
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--border-color);
	cursor: pointer;
	transition: 0.2s;
}
/* Vertical List Container */
.lesson-list-vertical {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	padding-bottom: 40px;
}
/* Accordion Card Style */
.accordion-item {
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--border-color);
	overflow: hidden; /* Keeps content inside rounded corners */
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}
/* The Clickable Header */
.accordion-header {
	padding: 20px 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	background: #fff;
	transition: background 0.2s;
}
.accordion-header:hover {
	background: var(--track-bg);
}
.accordion-title {
	display: flex;
	align-items: center;
	gap: 15px;
	font-weight: 700;
	color: var(--text-main);
	font-size: 15px;
}
.accordion-title i {
	color: var(--ios-blue);
	font-size: 18px;
	width: 25px;
	text-align: center;
}
.accordion-icon {
	color: var(--text-sub);
	transition: transform 0.3s ease;
}
/* The Hidden Content */
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out, padding 0.3s ease;
	background: var(--track-bg);
	padding: 0 25px; /* No top/bottom padding when closed */
}
/* Styles when Open */
.accordion-item.active {
	border-color: var(--ios-blue);
	box-shadow: 0 8px 20px rgba(0, 122, 255, 0.15);
}
.accordion-item.active .accordion-header {
	border-bottom: 1px solid var(--border-color);
}
.accordion-item.active .accordion-icon {
	transform: rotate(180deg);
	color: var(--ios-blue);
}
.accordion-item.active .accordion-content {
	max-height: 1000px; /* Arbitrary large height to allow expansion */
	padding: 20px 25px;
}
/* Text Formatting inside the content */
.syllabus-text {
	font-size: 13px;
	color: var(--text-main);
	line-height: 1.6;
}
.syllabus-text strong {
	display: block;
	margin-top: 10px;
	margin-bottom: 5px;
	color: var(--pt-blue);
}
.syllabus-text ul {
	list-style-type: none;
	padding-left: 10px;
	margin-bottom: 10px;
}
.syllabus-text li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 4px;
	color: var(--text-sub);
}
 .syllabus-text li::before {
 content: "•";
 position: absolute;
 left: 0;
 color: var(--ios-blue);
}
/* New styles for the bottom row inside Accordion */
.accordion-footer-row {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-left {
	display: flex;
	align-items: center;
	gap: 15px;
}
.footer-checkbox {
	width: 22px;
	height: 22px;
	cursor: pointer;
	border-radius: 6px;
	border: 1px solid var(--border-color);
	accent-color: var(--ios-blue); /* Sets the blue check color */
}
.footer-label {
	font-weight: 600;
	color: var(--pt-blue);
	font-size: 15px;
	cursor: pointer;
}
.footer-select {
	padding: 8px 15px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	background: var(--input-bg); /* Matches the light grey in your image */
	color: var(--text-main);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	outline: none;
	min-width: 80px;
	text-align: center;
}
.footer-select:focus {
	border-color: var(--ios-blue);
}
/* Total Distribution Bar Styles */
.distribution-container {
	background: var(--bg-panel);
	padding: 15px 20px;
	border-radius: 12px;
	border: 1px solid var(--border-color);
	margin-bottom: 20px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}
.dist-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-weight: 700;
	font-size: 14px;
	color: var(--text-main);
}
.dist-track {
	width: 100%;
	height: 10px;
	background: var(--track-bg);
	border-radius: 10px;
	overflow: hidden;
}
.dist-fill {
	height: 100%;
	width: 0%;
	background: var(--ios-blue); /* Default Blue */
	border-radius: 10px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
}
/* Bottom Action Area */
.bottom-action-bar {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: flex-end;
}
/* Styles for disabled select inputs */
.footer-select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--track-bg);
}
/* Floating Button */
.chat-widget-btn {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 60px;
	height: 60px;
	background: #042f60;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
	box-shadow: 0 4px 15px rgba(0, 122, 255, 0.4);
	cursor: pointer;
	z-index: 9999;
	transition: transform 0.2s, box-shadow 0.2s;
}
.chat-widget-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0, 122, 255, 0.6);
}
/* Chat Window Container */
.chat-window {
	position: fixed;
	bottom: 100px; /* Position above the button */
	right: 30px;
	width: 320px;
	height: 400px;
	background: var(--bg-panel); /* Or #ffffff */
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--border-color); /* Or #e2e8f0 */
	display: none; /* Hidden by default */
	flex-direction: column;
	z-index: 9999;
	animation: slideUpChat 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}
/* Header */
.chat-header {
	background: #042f60;
	color: white;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: 14px;
}
/* Chat Body (Messages Area) */
.chat-body {
	flex: 1;
	padding: 15px;
	overflow-y: auto;
	background: var(--track-bg); /* Or #f8fafc */
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Message Bubbles */
.chat-msg {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.4;
	word-wrap: break-word;
}
.chat-msg.received {
	background: #e5e7eb; /* Light grey */
	color: #1f2937;
	border-bottom-left-radius: 2px;
	align-self: flex-start;
}
.chat-msg.sent {
	background: var(--ios-blue); /* Or #007AFF */
	color: white;
	border-bottom-right-radius: 2px;
	align-self: flex-end;
}
/* Footer (Input Area) */
.chat-footer {
	padding: 12px 15px;
	border-top: 1px solid var(--border-color); /* Or #e2e8f0 */
	background: var(--bg-panel); /* Or #ffffff */
	display: flex;
	align-items: center;
	gap: 10px;
}
.chat-footer input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: var(--text-main); /* Or #1e293b */
}
.chat-footer i {
	color: var(--ios-blue); /* Or #007AFF */
	cursor: pointer;
	font-size: 18px;
	transition: 0.2s;
}
.chat-footer i:hover {
	transform: scale(1.1);
}

/* Animation */
@keyframes slideUpChat {
 from {
opacity: 0;
transform: translateY(20px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
 .chat-window {
 width: 90%;
 right: 5%;
 bottom: 90px;
 height: 60vh; /* Taller on mobile */
}
}
/* KDR MODAL STYLES */
.kdr-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.2s ease;
}
.kdr-content {
	background: var(--bg-panel);
	width: 90%;
	max-width: 600px;
	max-height: 85vh;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kdr-header {
	padding: 20px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.kdr-header h3 {
	margin: 0;
	font-size: 18px;
	color: var(--text-main);
}
.kdr-header i {
	cursor: pointer;
	color: var(--text-sub);
	font-size: 20px;
}
.kdr-body {
	padding: 0;
	overflow-y: auto;
	background: var(--bg-panel);
}
/* List Styling */
.kdr-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.kdr-list li {
	padding: 12px 20px;
	border-bottom: 1px solid var(--border-color);
	font-size: 13px;
	color: var(--text-main);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.kdr-list li:last-child {
	border-bottom: none;
}
.kdr-list li:hover {
	background: var(--track-bg);
}
.mos-ref {
	font-size: 11px;
	color: var(--text-sub);
	font-family: monospace;
	background: var(--track-bg);
	padding: 2px 6px;
	border-radius: 4px;
	width: fit-content;
}
.kdr-footer {
	padding: 15px 20px;
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	background: var(--track-bg);
}
.inst-q-text {
	font-weight: 600;
	font-size: 15px;
	color: var(--text-main);
	margin-bottom: 10px;
	display: flex;
	align-items: center; /* Aligns text and icon */
	gap: 8px;
}
.edit-icon {
	font-size: 14px;
	color: var(--text-sub);
	cursor: pointer;
	transition: color 0.2s;
	margin-left: 5px;
}
.edit-icon:hover {
	color: var(--ios-blue); /* Highlights on hover */
}
/* NOTIFICATION POPUP STYLES */
.notif-overlay {
	position: absolute;
	top: 70px;
	right: 80px;
	z-index: 9999;
}
.notif-box {
	width: 320px;
	background: var(--bg-panel);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--border-color);
	overflow: hidden;
	animation: slideDown 0.2s ease;
}
.notif-header {
	padding: 15px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.notif-header h3 {
	font-size: 16px;
	margin: 0;
	color: var(--text-main);
}
.mark-read {
	font-size: 11px;
	color: var(--ios-blue);
	cursor: pointer;
	font-weight: 600;
}
.notif-list {
	max-height: 300px;
	overflow-y: auto;
}
.notif-item {
	display: flex;
	padding: 15px;
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	transition: 0.2s;
	position: relative;
}
.notif-item:hover {
	background: var(--track-bg);
}
.notif-item.unread {
	background: rgba(0, 122, 255, 0.05);
}
.notif-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 122, 255, 0.1);
	color: var(--ios-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	flex-shrink: 0;
}
.notif-icon.warn {
	background: rgba(255, 193, 7, 0.1);
	color: var(--pt-yellow);
}
.notif-icon.success {
	background: rgba(16, 185, 129, 0.1);
	color: var(--pt-green);
}
.notif-content {
	display: flex;
	flex-direction: column;
}
.n-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-main);
	margin-bottom: 2px;
}
.n-desc {
	font-size: 11px;
	color: var(--text-sub);
	line-height: 1.4;
	margin-bottom: 4px;
}
.n-time {
	font-size: 10px;
	color: #94a3b8;
}
.n-dot {
	position: absolute;
	right: 15px;
	top: 25px;
	width: 8px;
	height: 8px;
	background: var(--ios-blue);
	border-radius: 50%;
}
.notif-footer {
	padding: 10px;
	text-align: center;
	border-top: 1px solid var(--border-color);
}
.view-all-btn {
	background: transparent;
	border: none;
	color: var(--text-sub);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.view-all-btn:hover {
	color: var(--ios-blue);
}
 @media (max-width: 768px) {
 .notif-overlay {
right: 15px;
top: 60px;
width: calc(100% - 30px);
}
 .notif-box {
width: 100%;
}
}
 @media only screen and (max-width: 767px) {
 #configView {
padding: 30px 10px;
}
}
.dark-mode #detailedExplContainer {
	background: var(--bg-panel)!important;
	color: var(--text-main)!important;
}
.dark-mode #detailedText {
	color: var(--text-main)!important;
}
.dark-mode #detailedExplContainer h4 {
	color: var(--text-main)!important;
}
.dark-mode #detailedExplContainer i {
	color: var(--text-main)!important;
}
.dark-mode #detailedExplContainer button {
	background: var(--bg-panel)!important;
	color: var(--text-main)!important;
	border: 1px solid #fff!important;
}



.action-btn.save { 
    color: var(--ios-blue); 
    background: rgba(0, 122, 255, 0.1); 
    border-color: var(--ios-blue); 
}