:root {
	--bg-primary: #0a0a0f;
	--bg-secondary: #111118;
	--bg-card: #16161f;
	--bg-card-hover: #1c1c28;
	--border-subtle: rgba(255, 255, 255, 0.06);
	--border-active: #a855f7;
	--purple: #FB00FF;
    
	--text-primary: #f0f0f5;
	--text-secondary: rgba(255, 255, 255, 0.55) !important;
	--text-muted: rgba(255, 255, 255, 0.35);
	--accent-purple: linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);
	--accent-purple-glow: rgba(168, 85, 247, 0.25);
	/* --accent-green: linear-gradient(48.36deg, #AEFB2A 12.67%, #57EBDE 90.7%); */
	--green: #57EBDE;
	--accent-pink: #ec4899;
	--accent-amber: #f59e0b;
	--gradient-cta: linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 24px;
  --accent-green: #22d3a7;



}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
a{text-decoration: none;}
.border-full{
 border: 1px solid var(--border);
    border-radius: 24px;
    padding: 0px !important;
}
body {
min-height: 100%;
    margin: 0;
    font-family: "DM Sans", sans-serif;
    color: #fff;
    height: 100%;
    overflow: hidden;
    background-image: url("body-bg.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    font-size: 16px;
}

/* Logout Container */
.logout-cta {
  display: flex;
  align-items: center;
}

/* Logout Button */
.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;

  background:linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);
  color: #fff;
  border: none;

  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  transition: all 0.3s ease;
}

/* Icon */
.logout-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

/* Hover Effect */
.logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

/* Icon Slide Animation */
.logout-btn:hover svg {
  transform: translateX(3px);
}

/* Click Effect */
.logout-btn:active {
  transform: scale(0.96);
}


/* SIDEBAR */

.sidebar {
  width: 80px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0;
  position: fixed;
  left: 0;
  top: 0;
}

/* Logo */
.sidebar-logo {
  font-size: 26px;
  font-weight: 700;
  color: white;
  margin-bottom: 40px;
}

/* Menu Container */
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 1;
}

/* Icon */
.sidebar-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  transition: all 0.3s ease;
}

.sidebar-icon svg {
  width: 22px;
  height: 22px;
}

/* Hover */
.sidebar-icon:hover {
  background: rgba(255,255,255,0.05);
  color: white;
}

/* Active */
.sidebar-icon.active {
  background:  linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);
  color: white;
}

/* Bottom arrows */
.sidebar-bottom {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  padding-bottom: 15px;
  cursor: pointer;
}

/* === Main Content === */
.yellow-gradint{
       background: linear-gradient(135deg, var(--accent-amber), var(--accent-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 32px;
    overflow-y: auto;
    max-width: 1440px;
    margin: auto;
    height: 100vh;
}

/* === Top Bar === */
.top-bar {
	width: 100%;
	max-width: 1440px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 48px;
	animation: fadeDown 0.5s ease;
}

.back-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	transition: all 0.2s ease;
	border: none;
	background: none;
}

.back-btn:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-primary);
}

/* dabut-progress indicator */
.dabut-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 150px;
}

.dabut-progress-step {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dabut-progress-dot {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.dabut-progress-dot.active {
	background: var(--accent-purple);
	color: white;
	box-shadow: 0 0 20px var(--accent-purple-glow);
}

.dabut-progress-dot.inactive {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
}

.dabut-progress-line {
	width: 32px;
	height: 2px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 1px;
}

.dabut-progress-label {
	font-size: 14px;
	color: var(--text-primary);
	margin-left: 12px;
	font-weight: 500;
	letter-spacing: 0.3px;
}

/* === Hero Section === */
.hero {
	text-align: center;
	max-width: 1080px;
	margin-bottom: 48px;
	animation: fadeUp 0.6s ease;
}

.hero h1 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.5px;
	margin-bottom: 12px;
}

.hero h1 .highlight {
	background: var(--accent-purple);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
}

.hero p {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* === Input Method Cards === */
.cards-section {
	width: 100%;
	max-width: 1080px;
	animation: fadeUp 0.7s ease;
}

.cards-label {
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 20px;
	padding-left: 28px;
	font-weight: 700;
}

.cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: none;
	justify-items: center;
}

.input-card {
	position: relative;
	background: #16161f70;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 35px 25px;
	cursor: pointer;
	transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	overflow: hidden;
	max-width: 335px;
	height: 335px;
}

.input-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	padding: 1px;
	background: linear-gradient(135deg, transparent, transparent);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: background 0.35s ease;
	pointer-events: none;
}

.input-card:hover {
	background: var(--bg-card-hover);
	transform: translateY(-4px);
	border-color: transparent;
}

.input-card:hover::before {
	background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(34, 211, 167, 0.2));
}

.input-card.selected {
	background: rgba(168, 85, 247, 0.06);
	border-color: transparent;
	transform: translateY(-4px);
}

.input-card.selected::before {
	background: linear-gradient(135deg, var(--accent-purple), var(--accent-green));
}

.input-card.selected::before {
	background: linear-gradient(91.24deg,
			#FD44FF 1.06%,
			#6300F4 92.57%);
}

.input-card.selected .card-icon {
	transform: scale(1.1);
}

/* Card icon */
.card-icon {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.35s ease;
	position: initial;
	margin-top: 22px;
}

.card-icon.purple {
	background: rgba(168, 85, 247, 0.12);
	color: var(--accent-purple);
}

.card-icon.amber {
	background: rgba(245, 158, 11, 0.12);
	color: var(--accent-amber);
}

.card-icon.green {
	background: rgba(34, 211, 167, 0.12);
	color: var(--accent-green);
}

.card-icon svg {
	width: 26px;
	height: 26px;
}

.card-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.3;
	margin-bottom: 12px;
}

.card-desc {
	font-size: 18px;
	color: var(--text-secondary);
	line-height: 1.5;
	font-weight: 400;
}

.card-tag {
	font-size: 14px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	background: rgba(34, 211, 167, 0.1);
	color: var(--accent-green);
	margin-top: 4px;
}

/* Recommendation badge */
.recommended-badge {
	position: absolute;
	top: 16px;
	right: 30px;
	font-size: 14px;
	font-weight: 600;
	/* letter-spacing: 0.5px; */
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	background: rgb(180 133 225 / 13%);
	color: var(--accent-purple);
	transform: translateY(-4px);
	transition: all 0.3s ease;
	color: #a6a6a6;
}

.input-card.selected .recommended-badge {
	opacity: 1;
	transform: translateY(0);
}

/* === Bottom Hint === */
.bottom-hint {
	margin: 40px 0px;
	text-align: center;
	animation: fadeUp 0.8s ease;
}

.hint-text {
	font-weight: 400;
	font-size: 18px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.hint-text svg {
	width: 16px;
	height: 16px;
}

/* Language tags */
.language-support {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
	flex-wrap: wrap;
}

.lang-tag {
	font-size: 14px;
	color: var(--text-secondary);
	padding: 5px 12px;
	border-radius: 20px;
	border: 1px solid var(--border-subtle);
	transition: all 0.2s ease;
	cursor: pointer;
	user-select: none;
}

.lang-tag:hover {
	border-color: rgba(168, 85, 247, 0.4);
	color: var(--text-primary);
}

.lang-tag.selected {
	border-color: rgba(168, 85, 247, 0.7);
	background: rgba(168, 85, 247, 0.15);
	color: #fff;
}

/* === Animations === */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeDown {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* === Selection pulse === */
@keyframes selectPulse {
	0% {
		box-shadow: 0 0 0 0 var(--accent-purple-glow);
	}

	70% {
		box-shadow: 0 0 0 12px rgba(168, 85, 247, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
	}
}

.input-card.just-selected {
	animation: selectPulse 0.6s ease;
}

/* === Responsive === */
@media (max-width: 640px) {
	.sidebar {
		display: none;
	}

	.main {
		padding: 24px 16px;
	}

	.hero h1 {
		font-size: 24px;
	}

	.cards-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.input-card {
		flex-direction: row;
		text-align: left;
		padding: 20px;
		gap: 16px;
	}

	.input-card .card-icon {
		flex-shrink: 0;
	}

	.card-content {
		flex: 1;
	}

	.recommended-badge {
		top: 8px;
		right: 8px;
	}


}


/* ===== ATMOSPHERE ===== */
.atmos {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
}

.orb-1 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(168, 85, 247, .14), transparent 70%);
	top: -20%;
	left: 8%;
	animation: oD1 24s ease-in-out infinite;
}

.orb-2 {
	width: 450px;
	height: 450px;
	background: radial-gradient(circle, rgba(34, 211, 167, .08), transparent 70%);
	bottom: -15%;
	right: 5%;
	animation: oD2 28s ease-in-out infinite;
}

.orb-3 {
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, rgba(236, 72, 153, .06), transparent 70%);
	top: 50%;
	left: 50%;
	animation: oD3 20s ease-in-out infinite;
}

.grid-bg {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
	background-size: 64px 64px;
}

/* Themed floating icons — cameras, images, documents */
.floats {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.fl {
	position: absolute;
	color: rgba(168, 85, 247, .06);
	animation: fD 18s ease-in-out infinite;
}

.fl svg {
	width: 100%;
	height: 100%;
}

.fl:nth-child(1) {
	width: 30px;
	top: 12%;
	left: 7%;
	animation-delay: 0s;
}

.fl:nth-child(2) {
	width: 26px;
	top: 70%;
	left: 10%;
	animation-delay: 3s;
	color: rgba(34, 211, 167, .05);
}

.fl:nth-child(3) {
	width: 34px;
	top: 16%;
	right: 9%;
	animation-delay: 5s;
	color: rgba(236, 72, 153, .05);
}

.fl:nth-child(4) {
	width: 22px;
	top: 60%;
	right: 12%;
	animation-delay: 2s;
}

.fl:nth-child(5) {
	width: 28px;
	top: 82%;
	left: 30%;
	animation-delay: 7s;
	color: rgba(245, 158, 11, .04);
}

.fl:nth-child(6) {
	width: 24px;
	top: 35%;
	left: 4%;
	animation-delay: 4s;
	color: rgba(6, 182, 212, .04);
}

.fl:nth-child(7) {
	width: 32px;
	bottom: 18%;
	right: 6%;
	animation-delay: 6s;
}

.fl:nth-child(8) {
	width: 20px;
	top: 8%;
	right: 28%;
	animation-delay: 8s;
	color: rgba(34, 211, 167, .04);
}

/* ===== LAYOUT ===== */
.shell {
	display: flex;
	height: 100vh;
	position: relative;
	z-index: 1;
}

.sidebar {
	background: rgb(10 10 16 / 76%);
	backdrop-filter: blur(14px);
	border-right: 1px solid var(--border-subtle);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 0;
	gap: 6px;
	flex-shrink: 0;
}

.s-logo {
	font-weight: 700;
	font-size: 16px;
	color: var(--purple);
	margin-bottom: 20px;
}

.s-i {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all .2s;
}

.s-i:hover {
	background: rgba(255, 255, 255, .04);
	color: var(--text-secondary);
}

.s-i.on {
	background: rgba(168, 85, 247, .12);
	color: var(--purple);
}

.page {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.topbar {
	padding: 14px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

.back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 12px;
	transition: all .2s;
	border: none;
	background: none;
}

.back:hover {
	background: rgba(255, 255, 255, .04);
	color:  var(--text-secondary);
}

.prog {
	display: flex;
	align-items: center;
	gap: 6px;
}

.p-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
}

.done {
	background: var(--accent-green);
	color: white;
	box-shadow: 0 0 12px rgba(34, 211, 167, .2);
}

.p-dot.on {
	background: var(--purple);
	color: white;
	box-shadow: 0 0 16px rgba(168, 85, 247, .25);
}

.p-dot.off {
	background: rgba(255, 255, 255, .06);
	color: var(--text-secondary);
}

.p-line {
	width: 24px;
	height: 2px;
	background: rgba(255, 255, 255, .08);
}

.p-label {
	font-size: 14px;
	color: var(--text-secondary);
	margin-left: 8px;
}

.stage {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 32px 20px;
	position: relative;
	max-width: 1440px;
	margin: auto;
	width: 100%;
}

/* ===== HEADER ===== */
.head {
	text-align: center;
	margin-bottom: clamp(18px, 3vh, 30px);
	animation: fadeUp .5s ease;
}

.head .daubt-badge {
display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(168, 85, 247, .08);
    border: 1px solid rgba(168, 85, 247, .12);
    font-size: 14px;
    color: var(--purple);
    font-weight: 600;
    margin-bottom: 14px;
    letter-spacing: .5px;
    margin-top: 30px;
}

.head .daubt-badge svg {
	width: 13px;
	height: 13px;
}

.head h2 {
	font-size: clamp(24px, 2.8vw, 32px);
	font-weight: 700;
	letter-spacing: -.5px;
	line-height: 1.2;
}

.head h2 .hl {
	background: linear-gradient(135deg, var(--purple), var(--cyan));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.head p {
	font-size: clamp(13px, 1.2vw, 16px);
	color: var(--text-secondary);
	margin-top: 12px;
	line-height: 1.6;
}

/* ===== UPLOAD ZONE ===== */
.upload-zone {
	width: 100%;
	max-width: 1080px;
	border-radius: 24px;
	padding: clamp(24px, 4.5vh, 48px) 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	transition: all .4s;
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(168, 85, 247, .035), rgba(16, 16, 28, .65), rgba(34, 211, 167, .02));
	animation: fadeUp .6s ease .1s both;
}

/* Animated gradient border */
.upload-zone::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 24px;
	padding: 2px;
	/* background: conic-gradient(from 0deg, rgba(168, 85, 247, .3), rgba(236, 72, 153, .15), rgba(34, 211, 167, .2), rgba(6, 182, 212, .15), rgba(168, 85, 247, .3)); */
	background-size: 100% 100%;
	animation: borderRotate 8s linear infinite;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Internal moving light */
.upload-zone::after {
	content: '';
	position: absolute;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, .07), transparent 65%);
	top: var(--ly, -30%);
	left: var(--lx, 20%);
	transition: top .8s ease, left .8s ease;
	pointer-events: none;
}

.upload-zone:hover {
	background: linear-gradient(160deg, rgba(168, 85, 247, .05), rgba(16, 16, 28, .75), rgba(34, 211, 167, .03));
}

.upload-zone:hover::before {
	animation-duration: 4s;
}

.upload-zone.dragover {
	background: linear-gradient(160deg, rgba(168, 85, 247, .08), rgba(16, 16, 28, .85));
}

.upload-zone.dragover::before {
	animation-duration: 2s;
}

.uz {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.u-ico {
	width: 82px;
	height: 82px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(168, 85, 247, .12), rgba(124, 58, 237, .05));
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .35s;
	box-shadow: 0 0 32px rgba(168, 85, 247, .08);
	position: relative;
	cursor: pointer;
}

/* Shimmer across icon */
.u-ico::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%);
	animation: shimmer 3s ease-in-out infinite;
}

.upload-zone:hover .u-ico {
	transform: scale(1.1) translateY(-4px);
	box-shadow: 0 8px 44px rgba(168, 85, 247, .18);
}

.u-ico svg {
	width: 34px;
	height: 34px;
	color: var(--purple);
}

.u-title {
	font-size: 20px;
	font-weight: 600;
}

.u-sub {
	font-size: 14px;
	color: var(--text-secondary);
	text-align: center;
	line-height: 1.55;
}

.u-divider {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 60%;
	max-width: 200px;
}

.u-divider span {
	font-size: 14px;
	color: var(--text-secondary);
	white-space: nowrap;
}

.u-divider::before,
.u-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border-subtle);
}

.u-btn {
	padding: 13px 28px;
	border-radius: 50px;
	border: 1px solid rgba(168, 85, 247, .2);
	background: linear-gradient(135deg, rgba(168, 85, 247, .06), transparent);
	color: var(--purple);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .3s;
	box-shadow: 0 0 16px rgba(168, 85, 247, .04);
}

.u-btn:hover {
	background: linear-gradient(135deg, rgba(168, 85, 247, .12), rgba(124, 58, 237, .04));
	border-color: rgba(168, 85, 247, .35);
	box-shadow: 0 0 28px rgba(168, 85, 247, .1);
}

.u-fmts {
	display: flex;
	gap: 6px;
	margin-top: 2px;
}

.fmt {
	font-size: 13px;
	padding: 3px 12px;
	border-radius: 7px;
	background: rgba(255, 255, 255, .025);
	color: var(--text-secondary);
	border: 1px solid rgb(109 109 109 / 23%);
}

/* Example cards */
.u-examples {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}

.u-ex {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 14px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .018);
	border: 1px solid var(--border-subtle);
	transition: all .35s;
	cursor: pointer;
	min-width: 82px;
	position: relative;
	overflow: hidden;
}

.u-ex::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(168, 85, 247, .03), transparent);
	opacity: 0;
	transition: opacity .3s;
}

.u-ex:hover {
	background: rgba(168, 85, 247, .04);
	border-color: rgba(168, 85, 247, .15);
	transform: translateY(-4px);
}

.u-ex:hover::before {
	opacity: 1;
}

.u-ex-icon {
	font-size: 26px;
	position: relative;
	z-index: 1;
}

.u-ex-label {
	font-size: 14px;
	color: var(--text-secondary);
	font-weight: 500;
	position: relative;
	z-index: 1;
}

/* ===== BOTTOM TRUST BAR ===== */
.trust {
	display: flex;
	gap: clamp(16px, 3vw, 36px);
	margin-top: clamp(18px, 3vh, 30px);
	animation: fadeUp .7s ease .3s both;
}

.tr {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: var(--text-secondary);
}

.tr-ico {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tr-ico svg {
	width: 14px;
	height: 14px;
}

.tr:nth-child(1) .tr-ico {
	background: rgba(168, 85, 247, .08);
	color: var(--purple);
}

.tr:nth-child(2) .tr-ico {
	background: rgba(34, 211, 167, .08);
	color: var(--green);
}

.tr:nth-child(3) .tr-ico {
	background: rgba(236, 72, 153, .08);
	color: var(--accent-pink);
}

/* ===== SUCCESS STATE ===== */
.suc {
	display: none;
	position: relative;
	z-index: 2;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	animation: fadeUp .45s ease;
}

.suc.show {
	display: flex;
}

.preview {
	width: 220px;
	height: 150px;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	border: 2px solid rgba(34, 211, 167, .2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}

.preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.preview .pbadge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px 12px;
	border-radius: 12px;
	background: rgba(34, 211, 167, .2);
	backdrop-filter: blur(8px);
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-green);
	display: flex;
	align-items: center;
	gap: 4px;
}

.preview .pbadge svg {
	width: 12px;
	height: 12px;
}

.suc-name {
	font-size: 18px;
	font-weight: 600;
	color: var(--accent-green);
}

.suc-size {
	font-size: 13px;
	color: var(--text-secondary);
}


.continue {
	padding: 14px 34px;
	border-radius: 12px;
	border: none;
	background: linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);
	color: white;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all .3s;
	display: flex;
	align-items: center;
	gap: 9px;
	position: relative;
	overflow: hidden;
}

.continue::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%);
	transform: translateX(-100%);
	transition: transform .6s;
}

.continue:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 36px rgba(168, 85, 247, .4);
}

.continue:hover::after {
	transform: translateX(100%);
}

.continue svg {
	width: 16px;
	height: 16px;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes borderRotate {
	from {
		filter: hue-rotate(0deg);
	}

	to {
		filter: hue-rotate(360deg);
	}
}

@keyframes shimmer {

	0%,
	100% {
		background-position: -200% 0;
	}

	50% {
		background-position: 200% 0;
	}
}

@keyframes oD1 {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(50px, 30px);
	}
}

@keyframes oD2 {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-35px, -25px);
	}
}

@keyframes oD3 {

	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-20px, 35px);
	}
}

@keyframes fD {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
		opacity: .05;
	}

	50% {
		transform: translateY(-22px) rotate(10deg);
		opacity: .1;
	}
}

@media(max-height:1080px) {
	.upload-zone {
		padding: 18px 24px;
		gap: 12px;
	}

	.u-ico {
		width: 64px;
		height: 64px;
		border-radius: 18px;
	}

	.u-ico svg {
		width: 28px;
		height: 28px;
	}

	.u-title {
		font-size: 17px;
	}

	.u-examples {
		gap: 8px;
	}

	.u-ex {
		padding: 12px 12px;
		min-width: 70px;
	}
}

@media(max-width:700px) {
	.sidebar {
		display: none;
	}

	.stage {
		padding: 0 16px 16px;
	}

	.trust {
		flex-direction: column;
		gap: 12px;
		align-items: center;
	}

	.u-examples {
		flex-wrap: wrap;
		justify-content: center;
	}
}


.upload-doubt-container.upload-section {
	border: none;
	background: none;
	margin: 0;
}

.upload-doubt-container.upload-section::before {

	background: none;

}

.doubtclass {
	min-height: 100vh;
	color: #fff;
	padding: clamp(24px, 4vw, 30px) clamp(24px, 6vw, 80px)
}

.doubt-hero {
	display: grid;
	grid-template-columns: minmax(175px, 200px) 1fr;
	align-items: center;
	gap: clamp(40px, 6vw, 60px);
	max-width: 1280px;
	margin: 0 auto 32px auto;
}

.dout-hero {
       display: flex;
    flex-direction: column;
    max-width: 1440px;
}

.doubt-hero-left {
	width: 100%;
	max-width: 175px;
	align-items: center;
	display: flex;
	justify-content: center;
}

.jellyfish-img {
	width: 100%;
	max-width: 180px;
}

.doubt-hero-right h1 {
	font-size: 48px;
	line-height: 58px;
	margin-bottom: 17px;
	font-weight: 500;
}

.green {
	background: linear-gradient(90deg, #4dffb3, #00ffd1);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	font-weight: 700;
}

.purple {
	background: linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	font-weight: 700;
}

.subtitle-daut {
	font-size: 16px;
	max-width: 530px;
	margin-bottom: 0px;
	color: rgba(140, 132, 155, 1);
}

/* Steps */
.doubt-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(284px, 1fr));
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
}

.step-card {
	background: rgba(13, 4, 24, 1);
	border-radius: 30px;
	padding: 30px;
	border: 1px solid rgba(38, 27, 53, 1);
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	width: 284px;
	height: 354px;
	display: flex;
	flex-direction: column;

	img {
		margin-bottom: 28px;
		width: 48px;
		height: 48px;
	}
}

/* soft glow ring */
.step-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at top,
			rgba(182, 109, 255, 0.15),
			transparent 60%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.step-card:hover::before {
	opacity: 1;
}

.step-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(182, 109, 255, 0);
}

.step-badge {
	background: rgba(38, 27, 53, 1);
	color: #e9d5ffd7;
	border-radius: 999px;
	font-size: 16px;
	margin-bottom: 16px;
	width: 70px;
	height: 33px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	padding: 4px 0px;
}

.step-card h3 {
	font-size: 24px;
	margin-bottom: 12px;
	font-weight: 700;
	line-height: 30px;
}

.step-card p {
	font-size: 16px;
	color: rgba(140, 132, 155, 1);
	font-weight: 300;
	margin-bottom: 0px;
}

/* CTA */
.doubt-cta {
	display: flex;
	justify-content: center;
	margin-top: 100px;

	.btn {
               border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        color: #fff;
        padding: 10px 24px;
        background: linear-gradient(91.24deg, #FD44FF 1.06%, #6300F4 92.57%);
        border: none;
        display: inline-block;
        display: flex;
        align-items: center;
        justify-content: center;
	}

}


/* Uploaded Screen */
.concept-card-daut {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 95vh;

	h2 {
		font-size: 32px;
		margin-bottom: 12px;
		font-weight: 700;

	}

	P {
		font-size: 20px;
		color: rgb(162 144 211 / 71%);
		font-weight: 300;
		margin-bottom: 0px;

	}
}


.upload-card .icon img {
	width: 25px;
	height: 25px;
}

.upload-card h4 {
	font-size: 20px;
	font-weight: 300;
	margin-bottom: 12px;
}

.upload-doubt-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 530px;
	padding: 55px 100px;
	margin: 40px 0;
	border-radius: 40px;
	border: 1px solid #281b4b;
	/* background: #090014; */
	position: relative;

}

.mic-circle-doubt {
	width: 124px;
	height: 124px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: linear-gradient(90deg, rgba(251, 0, 255, 0.4) 0%, rgba(99, 0, 244, 0.4) 100%);
	margin-bottom: 38px;

}

.mic-circle-doubt img {
	width: 50px;
	height: 50px;
}

.upload-doubt-container textarea::placeholder {
	color: rgba(38, 27, 53, 1);
	font-size: 32px;
	font-weight: 300;
}

.upload-doubt-container::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgb(205 204 204 / 11%) 1px, #00000042 1px);
	background-size: 24px 24px;
	opacity: 0.6;
	pointer-events: none;
}

.upload-doubt-container p {
	margin-bottom: 30px;
	font-size: 24px;
	position: relative;
	font-weight: 700;
	color: rgb(162 144 211 / 71%);
}

.upload-area {
	display: flex;
	gap: 40px;
	margin-bottom: 30px;
}

.upload-card {
	width: 250px;
	height: 260px;
	border-radius: 22px;
	background: rgba(13, 4, 24, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s ease;
	position: relative;
	overflow: hidden;
	padding: 16px;
	text-align: center;
}

.upload-card p {
	font-size: 13px;
	color: rgb(162 144 211 / 71%);
	line-height: 1.5;
	margin-bottom: 0px;
}


/* ACTIVE GRADIENT BORDER */
.upload-card.active::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: 22px;
	background: linear-gradient(48.36deg, #F011CA 12.67%, #6300F4 90.7%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.upload-card.active .icon {
	background: linear-gradient(48.36deg, #F011CA 12.67%, #6300F4 90.7%);
}

.upload-card:hover {
	transform: translateY(-4px);
}

.btn-continue {
	width: 216px;
	height: 62px;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: "DM Sans";
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	background: linear-gradient(91.24deg, #FD44FF 1.06%, #6300F4 92.57%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;

}

.upload-card .icon {
	font-size: 28px;
	margin-bottom: 12px;
	width: 62px;
	height: 62px;
	background: rgba(38, 27, 53, 1);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 18px;
}


.update-question-card {
	max-width: 900px;
	margin: 40px auto;
	padding: 40px;
	border-radius: 20px;
	background: radial-gradient(circle at top, #140022, #07000f);
}

.drag-upload-box {
	border: 2px dashed #b58bf352;
	border-radius: 30px;
	text-align: center;
	height: 246px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 28px;
}

.drag-upload-box h4 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
}

.upload-icon-circle {
	width: 94px;
	height: 94px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	position: relative;

	img {

		width: 100%;
	}
}

.recent-uploads {
	margin-top: 30px;
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

.upload-thumb-row {
	display: flex;
	gap: 24px;
	margin-top: 0px;
}

.upload-thumb {
	width: 120px;
	height: 130px;
	border-radius: 15px;
	background: rgba(26, 26, 26, 1);
	overflow: hidden;
	position: relative;
}

/* Preview image */
.thumb-img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
	padding: 12px;
	border-radius: 23px;
}

/* Remove button wrapper */
.remove-btn {
	position: absolute;
	top: -3px;
	right: -1px;
	width: 35px;
	height: 35px;
	z-index: 5;
	cursor: pointer;
}

.remove-btn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.speech-preview {
	border: 1px solid rgba(38, 27, 53, 1);
	background: rgba(8, 1, 20, 1);
	max-width: 778px;
	width: 100%;
	border-radius: 30px;
	height: 128px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-size: 24px;
	font-weight: 300;
	line-height: 40px;
	color: rgba(140, 132, 155, 1);

}

.footer-actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 40px;
}

.reRecord-btn {
	width: 200px;
	border-radius: 15px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 12px 20px;
}

.gradient-text {
	background: linear-gradient(48.36deg, #F8A902 12.67%, #F3696E 90.7%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 600;
}

.wave-animation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 95px;
	margin-bottom: 40px;
}

.wave-animation span {
	width: 3px;
	height: 30px;
	border-radius: 12px;
	background: linear-gradient(180deg, #ff00ff, #6300f4);
	animation: wave 1.2s infinite ease-in-out;
}


/* Different delays for natural movement */
.wave-animation span:nth-child(odd) {
	animation-delay: 0.2s;
}

.wave-animation span:nth-child(even) {
	animation-delay: 0.4s;
}

.wave-animation span:nth-child(3n) {
	animation-delay: 0.6s;
}

.wave-animation span:nth-child(4n) {
	animation-delay: 0.8s;
}

@keyframes wave {
	0% {
		height: 20px;
		opacity: 0.5;
	}

	50% {
		height: 100px;
		opacity: 1;
	}

	100% {
		height: 20px;
		opacity: 0.5;
	}
}


@media (min-width: 1800px) {
	.doubtclass {
		padding: 40px 80px;
	}

	.doubt-hero {
		max-width: 1440px;
		gap: 80px;
	}

	.doubt-hero-right h1 {
		font-size: 56px;
		line-height: 66px;
	}

	.subtitle-daut {
		font-size: 18px;
		max-width: 600px;
	}

	.doubt-steps {
		max-width: 1440px;
		gap: 40px;
	}

	.step-card {
		width: 300px;
		height: 330px;
		padding: 30px;
	}

	.upload-doubt-container {
		max-width: 100%;
		padding: 40px 140px;
	}
}

@media (min-width: 1500px) and (max-width: 1799px) {
	.doubtclass {
		padding: 36px 120px;
	}

	.doubt-hero {
		max-width: 1320px;
		gap: 70px;
	}

	.doubt-hero-right h1 {
		font-size: 52px;
		line-height: 62px;
	}

	.doubt-steps {
		max-width: 1320px;
	}

	.step-card {
		width: 300px;
		height: 365px;
	}

	.upload-doubt-container {
		max-width: 1100px;
		padding: 60px 120px;
	}
}

@media (min-width: 1366px) and (max-width: 1499px) {
	.doubtclass {
		padding: 32px 100px;
	}

	.doubt-hero {
		max-width: 1200px;
		gap: 60px;
	}

	.doubt-hero-right h1 {
		font-size: 48px;
		line-height: 58px;
	}

	.doubt-steps {
		max-width: 1200px;
		gap: 32px;
	}

	.step-card {
		width: 284px;
		height: 354px;
	}

	.upload-doubt-container {
		max-width: 1000px;
		padding: 55px 100px;
	}
}


 .head{text-align:center;margin-bottom:clamp(16px,2.5vh,26px);animation:fadeUp .5s ease;}
  .head .badge-type{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.12);font-size:15px;color:var(--accent-amber);font-weight:600;margin-bottom:14px;font-family:"DM Sans", sans-serif;letter-spacing:.5px;}
  .head .badge-type svg{width:13px;height:13px;}
  .head h2{font-size:clamp(24px,2.8vw,36px);font-weight:700;letter-spacing:-.5px;line-height:1.2;}
  .head h2 .hl{background:linear-gradient(135deg,var(--accent-amber),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}


/* ===== TYPE AREA ===== */
  .type-card{
  width: 100%;
    max-width: 1080px;
    border-radius: 22px;
    padding: clamp(20px, 3.5vh, 32px) clamp(20px, 2.5vw, 32px);
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(245, 158, 11, .025), rgba(16, 16, 28, .7), rgba(168, 85, 247, .02));
    animation: fadeUp .6s ease .1s both;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .type-card::before{
    content:'';position:absolute;inset:0;border-radius:22px;padding:1.5px;
    background:conic-gradient(from 90deg,rgba(245,158,11,.2),rgba(168,85,247,.15),rgba(34,211,167,.1),rgba(245,158,11,.2));
    animation:bR 10s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }
  .type-card::after{
    content:'';position:absolute;width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle,rgba(245,158,11,.04),transparent 60%);
    top:-20%;right:-10%;pointer-events:none;animation:iG 10s ease-in-out infinite;
  }

  .type-label{font-size:16px;color: var(--text-secondary);font-weight:500;position:relative;z-index:2;}

  .type-wrap{position:relative;z-index:2;border-radius:16px;overflow:hidden;background:rgba(12,12,20,.6);border:1px solid  var(--border-subtle);transition:border-color .3s;}
  .type-wrap:focus-within{border-color:rgba(245,158,11,.2);}
  .type-box{
    width:100%;min-height:clamp(112px,16vh,160px);padding:18px 20px;
    border:none;background:transparent;color: var(--text-secondary);
    font-size:15px;line-height:1.7;resize:none;outline:none;
  }
  .type-box::placeholder{color: var(--text-secondary);}
  .type-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:70%;height:2px;background:linear-gradient(90deg,transparent,var(--accent-amber),var(--purple),transparent);border-radius:2px;opacity:0;transition:opacity .4s;filter:blur(1px);}
  .type-wrap:focus-within .type-glow{opacity:1;}

  /* Prompts */
  .prompts{position:relative;z-index:2;}
  .prompts-label{font-size:15px;color: var(--text-secondary);font-family:"DM Sans", sans-serif;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
  .prompt-row{display:flex;gap:8px;flex-wrap:wrap;}
  .prompt{
    font-size:15px;color: var(--text-secondary);padding:8px 16px;border-radius:12px;
    border:1px solid  var(--border-subtle);cursor:pointer;transition:all .3s;
    background:rgba(255,255,255,.012);display:flex;align-items:center;gap:7px;
  }
  .prompt:hover{border-color:rgba(245,158,11,.2);color: var(--text-secondary);transform:translateY(-1px);background:rgba(245,158,11,.03);}
  .prompt svg{width:13px;height:13px;color:var(--accent-amber);flex-shrink:0;}

  .type-footer{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
  .cc{font-size:15px;color: var(--text-secondary);font-family:"DM Sans", sans-serif;}

  .sub-btn{
    padding:12px 28px;border-radius:12px;border:none;
    background:linear-gradient(135deg,var(--accent-amber),var(--pink));
    color:white;font-size:14px;font-weight:600;
    cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px;
    box-shadow:0 4px 24px rgba(245,158,11,.2);position:relative;overflow:hidden;
  }
  .sub-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s;}
  .sub-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(245,158,11,.3);}
  .sub-btn:hover::after{transform:translateX(100%);}
  .sub-btn svg{width:14px;height:14px;}

  /* Language chips */
  .lang-row{display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:2;margin-top:2px;}
  .lang{font-size:15px;color: var(--text-secondary);padding:4px 13px;border-radius:14px;border:1px solid  var(--border-subtle);}

  /* Trust bar */
  .trust{display:flex;gap:clamp(16px,3vw,32px);margin-top:clamp(16px,3vh,26px);animation:fadeUp .7s ease .3s both;}
  .tr{display:flex;align-items:center;gap:9px;font-size:14.5px;color: var(--text-secondary);}
  .tr-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .tr-ico svg{width:14px;height:14px;}
  .tr:nth-child(1) .tr-ico{background:rgba(245,158,11,.08);color:var(--accent-amber);}
  .tr:nth-child(2) .tr-ico{background:rgba(168,85,247,.08);color:var(--purple);}
  .tr:nth-child(3) .tr-ico{background:rgba(34,211,167,.08);color:var(--green);}

  @keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  @keyframes bR{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}
  @keyframes iG{0%,100%{transform:translate(0,0);}50%{transform:translate(-20px,15px);}}
  @keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(-40px,25px);}}
  @keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-20px);}}
  @keyframes oD3{0%,100%{transform:translate(0,0);}50%{transform:translate(15px,30px);}}
  @keyframes fD{0%,100%{transform:translateY(0) rotate(0deg);opacity:.04;}50%{transform:translateY(-20px) rotate(8deg);opacity:.08;}}

  @media(max-height:1080px){.type-card{padding:16px 18px;gap:12px;}.type-box{min-height:90px;padding:14px 16px;font-size:14px;}}
  @media(max-width:700px){.sidebar{display:none;}.stage{padding:0 16px 16px;}.trust{flex-direction:column;gap:12px;align-items:center;}}



   :root{--t1:#f0f0f5;--t2:rgba(255,255,255,.5);--t3:rgba(255,255,255,.26);--purple:#a855f7;--violet:#7c3aed;--green:#22d3a7;--pink:#ec4899;--amber:#f59e0b;--cyan:#06b6d4;--border:rgba(255,255,255,.05);}
 .head{text-align:center;margin-bottom:clamp(14px,2.5vh,24px);animation:fadeUp .5s ease;}
  .head .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;background:rgba(236,72,153,.08);border:1px solid rgba(236,72,153,.12);font-size:15px;color:var(--pink);font-weight:600;margin-bottom:14px;font-family:"DM Sans", sans-serif;letter-spacing:.5px;}
  .head .badge svg{width:13px;height:13px;}
  .head h2{font-size:clamp(24px,2.8vw,36px);font-weight:700;letter-spacing:-.5px;line-height:1.2;}
  .head h2 .hl{    background: linear-gradient(135deg, #da00fd, #6e00f4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; }
  .head p{font-size:clamp(13px,1.2vw,15px);color:var(--t2);margin-top:12px;line-height:1.6;margin-left:auto;margin-right:auto;}

  /* ===== VOICE CARD ===== */
  .voice-card{
    width:100%;border-radius:24px;
    padding:clamp(20px,4vh,40px) 28px;
    position:relative;overflow:hidden;
    background:linear-gradient(160deg,rgba(236,72,153,.025),rgba(16,16,28,.7),rgba(168,85,247,.02));
    animation:fadeUp .6s ease .1s both;
    display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px);
  }
  .voice-card::before{
    content:'';position:absolute;inset:0;border-radius:24px;padding:1.5px;
    background:conic-gradient(from 180deg,rgba(236,72,153,.2),rgba(168,85,247,.18),rgba(6,182,212,.1),rgba(236,72,153,.2));
    animation:bR 10s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }

  /* Mic area */
  .mic-stage{position:relative;width:clamp(180px,22vh,220px);height:clamp(180px,22vh,220px);display:flex;align-items:center;justify-content:center;}

  .v-ring{position:absolute;border-radius:50%;border:1px solid rgba(236,72,153,.06);}
  .v-ring:nth-child(1){inset:-12px;animation:ringB 4s ease-in-out infinite;}
  .v-ring:nth-child(2){inset:-28px;animation:ringB 4s ease-in-out infinite .5s;}
  .v-ring:nth-child(3){inset:-48px;animation:ringB 4s ease-in-out infinite 1s;}
  .v-ring:nth-child(4){inset:-70px;animation:ringB 4s ease-in-out infinite 1.5s;border-style:dashed;border-color:rgba(236,72,153,.03);}

  .recording .v-ring{border-color:rgba(236,72,153,.2);}
  .recording .v-ring:nth-child(1){animation:ringA 1.1s ease-in-out infinite;}
  .recording .v-ring:nth-child(2){animation:ringA 1.1s ease-in-out infinite .15s;}
  .recording .v-ring:nth-child(3){animation:ringA 1.1s ease-in-out infinite .3s;}
  .recording .v-ring:nth-child(4){animation:ringA 1.1s ease-in-out infinite .45s;}

  .mic-btn{
    width:clamp(90px,13vh,112px);height:clamp(90px,13vh,112px);border-radius:50%;border:none;
    background:linear-gradient(145deg,rgba(236,72,153,.08),rgba(168,85,247,.05));
    color:var(--pink);cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .4s;position:relative;z-index:2;
    box-shadow:0 0 40px rgba(236,72,153,.06),inset 0 0 30px rgba(236,72,153,.02);
  }
  .mic-btn::before{
    content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;
    background:conic-gradient(from 0deg,rgba(236,72,153,.3),rgba(168,85,247,.2),rgba(6,182,212,.1),rgba(236,72,153,.3));
    animation:bR 6s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }
  .mic-btn:hover{background:linear-gradient(145deg,rgba(236,72,153,.14),rgba(168,85,247,.08));transform:scale(1.06);box-shadow:0 0 50px rgba(236,72,153,.12);}
  .mic-btn svg{width:clamp(32px,5vh,40px);height:clamp(32px,5vh,40px);}
  .mic-btn.active{background:linear-gradient(135deg,var(--pink),var(--purple));color:white;box-shadow:0 0 60px rgba(236,72,153,.3);animation:micG 1.6s ease-in-out infinite;}

  .v-status{font-size:16px;font-weight:600;text-align:center;min-height:24px;position:relative;z-index:2;}
  .v-hint{font-size:15px;color:var(--t2);text-align:center;line-height:1.5;max-width:360px;position:relative;z-index:2;}

  /* Waveform */
  .waveform{display:flex;align-items:center;justify-content:center;gap:2.5px;height:48px;width:100%;max-width:400px;position:relative;z-index:2;}
  .wave-bar{width:3.5px;border-radius:4px;background:rgba(236,72,153,.1);transition:height .1s ease;min-height:3px;}
  .recording .wave-bar{background:var(--pink);}

  .rec-timer{font-family:"DM Sans", sans-serif;font-size:15px;color:var(--pink);opacity:0;transition:opacity .4s;text-shadow:0 0 16px rgba(236,72,153,.3);position:relative;z-index:2;}
  .recording .rec-timer{opacity:1;}

  .v-langs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2;}
  .vl{font-size:15px;color:var(--text-secondary);padding:4px 13px;border-radius:14px;border:1px solid var(--border);}

  .v-submit{
    padding:13px 30px;border-radius:12px;border:none;
    background:linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);
    color:white;font-size:15px;font-weight:600;
    cursor:pointer;transition:all .4s;display:flex;align-items:center;gap:9px;
    box-shadow:0 4px 24px rgba(236,72,153,.25);
    opacity:0;transform:translateY(12px);pointer-events:none;
    position:relative;z-index:2;overflow:hidden;
  }
  .v-submit::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s;}
  .v-submit.show{opacity:1;transform:translateY(0);pointer-events:auto;}
  .v-submit:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(236,72,153,.35);}
  .v-submit:hover::after{transform:translateX(100%);}
  .v-submit svg{width:15px;height:15px;}

  /* Trust bar */
  .trust{display:flex;gap:clamp(16px,3vw,32px);margin-top:clamp(14px,2.5vh,24px);animation:fadeUp .7s ease .3s both;}
  .tr{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--text-secondary);}
  .tr-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .tr-ico svg{width:14px;height:14px;}
  .tr:nth-child(1) .tr-ico{background:rgba(236,72,153,.08);color:var(--pink);}
  .tr:nth-child(2) .tr-ico{background:rgba(168,85,247,.08);color:var(--purple);}
  .tr:nth-child(3) .tr-ico{background:rgba(34,211,167,.08);color:var(--green);}

  @keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  @keyframes bR{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}
  @keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
  @keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}
  @keyframes oD3{0%,100%{transform:translate(0,0);}50%{transform:translate(-20px,30px);}}
  @keyframes fD{0%,100%{transform:translateY(0) rotate(0deg);opacity:.04;}50%{transform:translateY(-22px) rotate(10deg);opacity:.09;}}
  @keyframes ringB{0%,100%{transform:scale(1);opacity:.2;}50%{transform:scale(1.03);opacity:.45;}}
  @keyframes ringA{0%,100%{transform:scale(1);opacity:.1;border-color:rgba(236,72,153,.12);}50%{transform:scale(1.12);opacity:.55;border-color:rgba(236,72,153,.4);}}
  @keyframes micG{0%,100%{box-shadow:0 0 40px rgba(236,72,153,.25);}50%{box-shadow:0 0 70px rgba(236,72,153,.45);}}

  @media(max-height:1080px){.voice-card{padding:16px 20px;gap:8px;}.mic-stage{width:150px;height:150px;}.mic-btn{width:76px;height:76px;}.mic-btn svg{width:28px;height:28px;}}
  @media(max-width:700px){.sidebar{display:none;}.stage{padding:0 16px 16px;}.trust{flex-direction:column;gap:12px;align-items:center;}}




  :root{--t1:#f0f0f5;--t2:rgba(255,255,255,.5);--t3:rgba(255,255,255,.26);--purple:#a855f7;--violet:#7c3aed;--green:#22d3a7;--pink:#ec4899;--amber:#f59e0b;--cyan:#06b6d4;--border:rgba(255,255,255,.05);}
  *{margin:0;padding:0;box-sizing:border-box;}

  /* Atmosphere */
  .atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  .orb{position:absolute;border-radius:50%;filter:blur(100px);}
  .orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(34,211,167,.1),transparent 70%);top:-15%;right:15%;animation:oD1 22s ease-in-out infinite;}
  .orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,.08),transparent 70%);bottom:-10%;left:10%;animation:oD2 26s ease-in-out infinite;}
  .grid-bg{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:64px 64px;}

  /* Floating math icons */
  .floats{position:fixed;inset:0;z-index:0;pointer-events:none;}
  .fl{position:absolute;font-family:"DM Sans", sans-serif;color:rgba(34,211,167,.06);animation:fD 18s ease-in-out infinite;}
  .fl:nth-child(1){font-size:26px;top:12%;left:6%;animation-delay:0s;}
  .fl:nth-child(2){font-size:22px;top:70%;left:8%;animation-delay:3s;color:rgba(168,85,247,.05);}
  .fl:nth-child(3){font-size:28px;top:15%;right:8%;animation-delay:5s;color:rgba(236,72,153,.04);}
  .fl:nth-child(4){font-size:20px;top:60%;right:10%;animation-delay:2s;color:rgba(168,85,247,.04);}
  .fl:nth-child(5){font-size:24px;top:82%;left:30%;animation-delay:7s;}
  .fl:nth-child(6){font-size:22px;top:35%;left:3%;animation-delay:4s;color:rgba(245,158,11,.04);}

  /* Layout */
  .shell{display:flex;height:100vh;position:relative;z-index:1;}
  .sidebar{width:60px;background:rgba(10,10,16,.92);backdrop-filter:blur(14px);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;flex-shrink:0;}
  .s-logo{font-family:"DM Sans", sans-serif;font-weight:700;font-size:16px;color:var(--purple);margin-bottom:20px;}
  .s-i{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;transition:all .2s;}
  .s-i:hover{background:rgba(255,255,255,.04);color:var(--t2);}
  .s-i.on{background:rgba(168,85,247,.12);color:var(--purple);}
  .page{flex:1;display:flex;flex-direction:column;height:100vh;}
  .topbar{padding:14px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
  .back{display:inline-flex;align-items:center;gap:7px;color:var(--t2);font-size:15px;font-weight:500;cursor:pointer;padding:6px 12px;border-radius:12px;transition:all .2s;border:none;background:none;}
  .back:hover{background:rgba(255,255,255,.04);color:var(--t1);}
  .prog{display:flex;align-items:center;gap:6px;}
  .p-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;}
  .p-dot.done{background:var(--green);color:white;box-shadow:0 0 12px rgba(34,211,167,.2);}
  .p-dot.on{background:var(--purple);color:white;box-shadow:0 0 16px rgba(168,85,247,.25);}
  .p-dot.off{background:rgba(255,255,255,.06);color:var(--text-secondary);}
  .p-line{width:24px;height:2px;background:rgba(255,255,255,.08);}
  .p-line.done{background:rgba(34,211,167,.3);}
  .p-label{font-size:15px;color:var(--text-secondary);margin-left:8px;}

  .stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 32px 20px;gap:0;}

  /* Header */
  .head{text-align:center;margin-bottom:clamp(14px,2.5vh,24px);animation:fadeUp .5s ease;}
  .head .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;background:rgba(34,211,167,.08);border:1px solid rgba(34,211,167,.12);font-size:15px;color:var(--green);font-weight:600;margin-bottom:12px;font-family:"DM Sans", sans-serif;letter-spacing:.5px;}
  .head .badge svg{width:13px;height:13px;}
  .head h2{font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:-.4px;line-height:1.25;}
  .head h2 .hl{background:linear-gradient(135deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .head p{font-size:clamp(13px,1.1vw,14.5px);color:var(--t2);margin-top:8px;line-height:1.55;}

  /* ===== MAIN CARD ===== */
  .confirm-card{
    width:100%;max-width:1080px;border-radius:22px;
    padding:clamp(20px,3vh,30px) clamp(20px,2.5vw,32px);
    position:relative;overflow:hidden;
    background:linear-gradient(160deg,rgba(34,211,167,.02),rgba(14,14,22,.75),rgba(168,85,247,.015));
    animation:fadeUp .6s ease .1s both;
    display:flex;flex-direction:column;gap:clamp(14px,2vh,20px);
  }
  .confirm-card::before{
    content:'';position:absolute;inset:0;border-radius:22px;padding:1.5px;
    background:conic-gradient(from 120deg,rgba(34,211,167,.2),rgba(168,85,247,.12),rgba(6,182,212,.1),rgba(34,211,167,.2));
    animation:bR 12s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }

  /* Source row — what they uploaded */
  .source-row{
    display:flex;gap:clamp(14px,1.5vw,20px);align-items:flex-start;
    position:relative;z-index:2;
  }

  .source-preview{
    flex:0 0 clamp(100px,12vw,140px);height:clamp(80px,10vh,112px);
    border-radius:14px;overflow:hidden;position:relative;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 4px 20px rgba(0,0,0,.3);
    background:rgba(255,255,255,.03);
  }
  .source-preview img{width:100%;height:100%;object-fit:cover;}
  .source-preview .src-badge{
    position:absolute;top:6px;left:6px;padding:3px 8px;border-radius:8px;
    background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
    font-size: 14px;font-weight:600;color:var(--t2);
    display:flex;align-items:center;gap:4px;
    text-transform:uppercase;letter-spacing:.5px;font-family:"DM Sans", sans-serif;
  }
  .source-preview .src-badge svg{width:9px;height:9px;}

  /* For voice/type variants */
  .source-preview.type-src,.source-preview.voice-src{
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(245,158,11,.04),rgba(168,85,247,.03));
  }
  .source-preview.voice-src{background:linear-gradient(135deg,rgba(236,72,153,.04),rgba(168,85,247,.03));}
  .source-preview .src-icon{width:36px;height:36px;color:var(--text-secondary);}

  .source-text{flex:1;display:flex;flex-direction:column;gap:6px;}
  .source-label{font-size:15px;color:var(--text-secondary);font-family:"DM Sans", sans-serif;letter-spacing:1px;text-transform:uppercase;}
  .source-content{font-size:14.5px;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

  /* Divider with arrow */
  .divider{
    display:flex;align-items:center;gap:12px;position:relative;z-index:2;
  }
  .divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);}
  .divider-label{
    display:flex;align-items:center;gap:6px;
    padding:4px 12px;border-radius:12px;
    background:rgba(34,211,167,.06);border:1px solid rgba(34,211,167,.1);
    font-size:15px;color:var(--green);font-weight:600;
    font-family:"DM Sans", sans-serif;letter-spacing:.5px;
  }
  .divider-label svg{width:12px;height:12px;}

  /* Extracted question */
  .extracted{
    position:relative;z-index:2;
    background:rgba(34,211,167,.03);
    border:1px solid rgba(34,211,167,.1);
    border-radius:16px;padding:clamp(14px,2vh,20px) clamp(16px,2vw,22px);
  }
  .ext-label{font-size:15px;color:var(--green);font-family:"DM Sans", sans-serif;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
  .ext-label svg{width:12px;height:12px;}
  .ext-question{font-size:clamp(15px,1.4vw,17px);font-weight:500;line-height:1.65;color:var(--t1);}
  .ext-question .keyword{color:var(--green);font-weight:600;}

  /* Edit inline */
  .ext-edit{
    display:none;width:100%;min-height:60px;padding:12px 14px;
    border-radius:12px;border:1px solid rgba(34,211,167,.2);
    background:rgba(0,0,0,.3);color:var(--t1);
    font-size:15px;line-height:1.6;resize:none;outline:none;
  }
  .ext-edit:focus{border-color:rgba(34,211,167,.4);box-shadow:0 0 0 3px rgba(34,211,167,.06);}
  .ext-edit.show{display:block;}
  .ext-question.hide{display:none;}

  /* Meta tags */
  .meta-row{
    display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:2;
  }
  .meta{
    display:flex;align-items:center;gap:6px;
    padding:7px 14px;border-radius:12px;
    background:rgba(255,255,255,.02);border:1px solid var(--border);
    font-size:15px;color:var(--t2);
    transition:all .3s;
  }
  .meta svg{width:13px;height:13px;flex-shrink:0;}
  .meta.subject{color:var(--purple);}
  .meta.subject svg{color:var(--purple);}
  .meta.chapter{color:var(--amber);}
  .meta.chapter svg{color:var(--amber);}
  .meta.difficulty{color:var(--cyan);}
  .meta.difficulty svg{color:var(--cyan);}
  .meta.reassure{color:var(--pink);font-style:italic;font-size:11.5px;}
  .meta.reassure svg{color:var(--pink);}

  /* Actions */
  .actions{
    display:flex;align-items:center;justify-content:space-between;
    position:relative;z-index:2;
    margin-top:clamp(4px,1vh,8px);
  }

  .edit-btn{
    display:flex;align-items:center;gap:6px;
    padding:8px 16px;border-radius:12px;
    border:1px solid var(--border);background:rgba(255,255,255,.02);
    color:var(--t2);font-size:15px;font-weight:500;
    cursor:pointer;transition:all .3s;
  }
  .edit-btn:hover{border-color:rgba(255,255,255,.12);color:var(--t1);background:rgba(255,255,255,.04);}
  .edit-btn svg{width:14px;height:14px;}

  .confirm-btn{
    padding:13px 32px;border-radius:15px;border:none;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    color:white;font-size:15px;font-weight:600;
    cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:9px;
  position:relative;overflow:hidden;
  }
  .confirm-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s;}
  .confirm-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(34,211,167,.35);}
  .confirm-btn:hover::after{transform:translateX(100%);}
  .confirm-btn svg{width:16px;height:16px;}

  /* Bottom hint */
  .bottom-hint{
   font-size: 13px;
    color: var(--text-secondary);
    margin-top: clamp(12px, 2vh, 20px);
    text-align: center;
    animation: fadeUp .7s ease .4s both;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-direction: column;
    margin-top: 45px;
  }
  .bottom-hint svg{    width: 30px;
    height: 20px;}

  /* Animations */
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  @keyframes bR{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}
  @keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(-40px,25px);}}
  @keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-20px);}}
  @keyframes fD{0%,100%{transform:translateY(0) rotate(0deg);opacity:.05;}50%{transform:translateY(-20px) rotate(8deg);opacity:.1;}}

  /* Typing animation for extracted question */
  .typing-cursor{display:inline-block;width:2px;height:1em;background:var(--green);margin-left:2px;animation:blink .8s step-end infinite;vertical-align:text-bottom;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

  @media(max-height:1080px){.confirm-card{padding:16px 18px;gap:12px;}.source-preview{        flex: 0 0 190px;
        height: 170px;}.ext-question{font-size:14px;}.meta{padding:5px 12px;font-size:15px;}}
  @media(max-width:700px){.sidebar{display:none;}.stage{padding:0 16px 16px;}.source-row{flex-direction:column;}.source-preview{flex:none;width:100%;height:100px;}.meta-row{gap:6px;}}



   /* ===== LAYOUT ===== */
  .shell{display:flex;height:100vh;position:relative;z-index:1;}
  .sidebar{width:60px;background:rgba(10,10,16,.92);backdrop-filter:blur(14px);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;flex-shrink:0;}
  .s-logo{font-family:"DM Sans", sans-serif;font-weight:700;font-size:16px;color:var(--purple);margin-bottom:20px;}
  .s-i{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:all .2s;}
  .s-i:hover{background:rgba(255,255,255,.04);color:var(--t2);}
  .s-i.on{background:rgba(168,85,247,.12);color:var(--purple);}
  .page{flex:1;display:flex;flex-direction:column;height:100vh;}
  .topbar{padding:14px clamp(24px,3vw,40px);display:flex;align-items:center;flex-shrink:0;}
  .back{display:inline-flex;align-items:center;gap:7px;color:var(--t2);font-size:15px;font-weight:500;cursor:pointer;padding:6px 12px;border-radius:12px;transition:all .2s;border:none;background:none;}
  .back:hover{background:rgba(255,255,255,.04);color:var(--t1);}

  .content{
      flex: 1;
    display: flex;
    gap: clamp(20px, 2.5vw, 32px);
    min-height: 80vh;
  }

  /* ===== LEFT — QUESTION PANEL ===== */
  .q-panel{
    flex:0 0 clamp(300px,36%,420px);
    border-radius:22px;
    padding:clamp(18px,2.5vh,26px) clamp(16px,1.8vw,22px);
    display:flex;flex-direction:column;gap:clamp(12px,1.8vh,16px);
    position:relative;overflow:hidden;
    background:linear-gradient(165deg,rgba(34,211,167,.02),rgba(12,12,20,.8),rgba(168,85,247,.01));
    animation:fadeUp .45s ease;
  }
  /* Animated border */
  .q-panel::before{
    content:'';position:absolute;inset:0;border-radius:22px;padding:1.5px;
    background:conic-gradient(from 180deg,rgba(34,211,167,.22),rgba(168,85,247,.08),rgba(6,182,212,.12),rgba(34,211,167,.22));
    animation:bR 14s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }
  /* Inner glow */
  .q-panel::after{
    content:'';position:absolute;width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle,rgba(34,211,167,.04),transparent 60%);
    top:-15%;left:-10%;pointer-events:none;animation:iG 12s ease-in-out infinite;
  }

  .q-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
  .q-label{font-size:15px;color:var(--green);font-family:"DM Sans", sans-serif;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:5px;}
  .q-label svg{width:11px;height:11px;}
  .q-badge{
    font-size: 14px;color:var(--green);font-family:"DM Sans", sans-serif;
    padding:3px 9px;border-radius:8px;letter-spacing:.5px;
    background:rgba(34,211,167,.06);border:1px solid rgba(34,211,167,.08);
    display:flex;align-items:center;gap:4px;
  }
  .q-badge svg{width:9px;height:9px;}

  /* Image preview */
  .q-image{
    position:relative;z-index:2;
    width:100%;border-radius:14px;overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    max-height:clamp(100px,16vh,160px);
    box-shadow:0 4px 20px rgba(0,0,0,.3);
  }
  .q-image img{width:100%;height:100%;object-fit:cover;display:block;}
  .q-image .img-tag{
    position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:8px;
    background:rgba(0,0,0,.65);backdrop-filter:blur(8px);
    font-size:15px;font-weight:600;color:var(--t2);
    font-family:"DM Sans", sans-serif;letter-spacing:.3px;
    display:flex;align-items:center;gap:4px;
  }
  .q-image .img-tag svg{width:9px;height:9px;}
 
  .q-text{
    position:relative;z-index:2;
    font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.7;color:var(--t1);
    flex:1;overflow-y:auto;
  }
  .q-text::-webkit-scrollbar{width:3px;}
  .q-text::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px;}
  .q-text .kw{color:var(--green);font-weight:600;}

  .q-metas{display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:2;}
  .qm{
    display:flex;align-items:center;gap:4px;
    padding:5px 12px;border-radius:8px;font-size:14.5px;
    background:rgba(255,255,255,.015);border:1px solid var(--border);
  }
  .qm svg{width:11px;height:11px;flex-shrink:0;}
  .qm.subj{color:var(--purple);} .qm.subj svg{color:var(--purple);}
  .qm.chap{color:var(--amber);} .qm.chap svg{color:var(--amber);}
  .qm.diff{color:var(--cyan);} .qm.diff svg{color:var(--cyan);}

  /* ===== RIGHT — SELECTION ===== */
  .select-panel{flex:1;display:flex;flex-direction:column;min-height:0;}

  .head{margin-bottom:clamp(16px,2.8vh,28px);animation:fadeUp .5s ease .1s both;}
  .head h2{font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-.5px;line-height:1.2;}
  .head h2 .hl{background:linear-gradient(135deg, #da00fd, #6e00f4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .head p{font-size:clamp(13px,1.05vw,15px);color:var(--t2);margin-top:8px;line-height:1.5;}

  /* ===== OPTION CARDS ===== */
  .options{display:flex;flex-direction:column;gap:clamp(10px,1.4vh,14px);animation:fadeUp .5s ease .2s both;}

  .opt{
    display:flex;align-items:center;gap:clamp(14px,1.5vw,20px);
    padding:clamp(16px,2.2vh,24px) clamp(18px,1.8vw,24px);
    border-radius:18px;cursor:pointer;
    transition:all .4s cubic-bezier(.23,1,.32,1);
    position:relative;overflow:hidden;
    background:linear-gradient(160deg,rgba(255,255,255,.012),rgba(12,12,20,.65));
    border:1.5px solid rgba(255,255,255,.04);
  }
  /* Hover light that follows mouse */
  .opt::before{
    content:'';position:absolute;width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle,var(--opt-glow,rgba(168,85,247,.06)),transparent 65%);
    top:var(--my,-50%);left:var(--mx,-50%);transition:top .5s ease,left .5s ease;
    pointer-events:none;opacity:0;
  }
  .opt:hover::before{opacity:1;}
  .opt:hover{border-color:rgba(255,255,255,.07);transform:translateY(-2px);}

  /* Selected */
  .opt.selected{
    border-color:transparent;
    background:linear-gradient(160deg,rgba(255,255,255,.02),rgba(12,12,20,.75));
    transform:translateY(-2px);
    box-shadow:0 8px 32px var(--opt-shadow,rgba(168,85,247,.08));
  }
  .opt.selected::before{opacity:1 !important;}
  .opt.selected::after{
    content:'';position:absolute;inset:0;border-radius:18px;padding:1.5px;
    background:conic-gradient(from var(--angle,0deg),var(--opt-ba,rgba(168,85,247,.3)),var(--opt-bb,rgba(6,182,212,.12)),var(--opt-ba,rgba(168,85,247,.3)));
    animation:bR 5s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }

  .opt:nth-child(1){--opt-glow:rgba(6,182,212,.07);--opt-accent:var(--cyan);--opt-shadow:rgba(6,182,212,.08);--opt-ba:rgba(6,182,212,.3);--opt-bb:rgba(168,85,247,.1);}
  .opt:nth-child(2){--opt-glow:rgba(168,85,247,.07);--opt-accent:var(--purple);--opt-shadow:rgba(168,85,247,.08);--opt-ba:rgba(168,85,247,.3);--opt-bb:rgba(236,72,153,.1);}
  .opt:nth-child(3){--opt-glow:rgba(236,72,153,.07);--opt-accent:var(--pink);--opt-shadow:rgba(236,72,153,.08);--opt-ba:rgba(236,72,153,.3);--opt-bb:rgba(245,158,11,.1);}

  /* Icon */
  .o-icon{
    width:clamp(46px,6vh,56px);height:clamp(46px,6vh,56px);border-radius:16px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:all .35s;position:relative;z-index:2;
  }
  .o-icon svg{width:clamp(22px,3vh,26px);height:clamp(22px,3vh,26px);}
  .opt:nth-child(1) .o-icon{background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(6,182,212,.03));color:var(--cyan);box-shadow:inset 0 0 12px rgba(6,182,212,.04);}
  .opt:nth-child(2) .o-icon{background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(168,85,247,.03));color:var(--purple);box-shadow:inset 0 0 12px rgba(168,85,247,.04);}
  .opt:nth-child(3) .o-icon{background:linear-gradient(135deg,rgba(236,72,153,.1),rgba(236,72,153,.03));color:var(--pink);box-shadow:inset 0 0 12px rgba(236,72,153,.04);}
  .opt.selected .o-icon{transform:scale(1.08);}
  .opt:nth-child(1).selected .o-icon{background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(6,182,212,.06));box-shadow:0 0 24px rgba(6,182,212,.1);}
  .opt:nth-child(2).selected .o-icon{background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(168,85,247,.06));box-shadow:0 0 24px rgba(168,85,247,.1);}
  .opt:nth-child(3).selected .o-icon{background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(236,72,153,.06));box-shadow:0 0 24px rgba(236,72,153,.1);}

  .o-text{flex:1;position:relative;z-index:2;}
  .o-title{font-size:clamp(15px,1.35vw,18px);font-weight:600;line-height:1.25;letter-spacing:-.2px;}
  .o-sub{font-size:clamp(11.5px,.95vw,13px);color:var(--t3);margin-top:4px;line-height:1.4;}

  /* Approach tag */
  .o-approach{
    font-size:14.5px;padding:6px 12px;border-radius:12px;
    font-family:"DM Sans", sans-serif;letter-spacing:.3px;
    flex-shrink:0;position:relative;z-index:2;white-space:nowrap;
    opacity:0;transform:scale(.9);transition:all .35s;
    background:rgba(255,255,255,.015);border:1px solid var(--border);color:var(--t3);
  }
  .opt.selected .o-approach{opacity:1;transform:scale(1);}
  .opt:nth-child(1).selected .o-approach{color:var(--cyan);border-color:rgba(6,182,212,.15);background:rgba(6,182,212,.04);}
  .opt:nth-child(2).selected .o-approach{color:var(--purple);border-color:rgba(168,85,247,.15);background:rgba(168,85,247,.04);}
  .opt:nth-child(3).selected .o-approach{color:var(--pink);border-color:rgba(236,72,153,.15);background:rgba(236,72,153,.04);}

  /* Radio */
  .o-radio{
    width:24px;height:24px;border-radius:50%;
    border:2px solid rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:all .3s;position:relative;z-index:2;
  }
  .o-radio-inner{width:12px;height:12px;border-radius:50%;transform:scale(0);transition:all .3s cubic-bezier(.34,1.56,.64,1);}
  .opt.selected .o-radio{border-color:var(--opt-accent);box-shadow:0 0 12px var(--opt-shadow);}
  .opt:nth-child(1).selected .o-radio-inner{background:var(--cyan);transform:scale(1);}
  .opt:nth-child(2).selected .o-radio-inner{background:var(--purple);transform:scale(1);}
  .opt:nth-child(3).selected .o-radio-inner{background:var(--pink);transform:scale(1);}

  .select-spacer{flex:1;}

  /* Bottom */
  .select-bottom{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:clamp(10px,1.5vh,16px);
    animation:fadeUp .6s ease .35s both;
  }
  .why-text{font-size:15px;color:var(--t3);display:flex;align-items:center;gap:6px;line-height:1.4;}
  .why-text svg{width:14px;height:14px;opacity:.4;flex-shrink:0;}

  .continue-btn{
    padding:13px 34px;border-radius:12px;border:none;
    background: var(--gradient-cta);
    color:white;font-size:15px;font-weight:600;
    cursor:pointer;transition:all .4s;display:flex;align-items:center;gap:9px;
    box-shadow:0 4px 24px rgba(168,85,247,.2);position:relative;overflow:hidden;
    opacity:.3;pointer-events:none;
  }
  .continue-btn.active{opacity:1;pointer-events:auto;}
  .continue-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s;}
  .continue-btn.active:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(168,85,247,.35);}
  .continue-btn.active:hover::after{transform:translateX(100%);}
  .continue-btn svg{width:15px;height:15px;}

  /* Animations */
  @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes bR{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}
  @keyframes iG{0%,100%{transform:translate(-10%,-10%);}50%{transform:translate(-20%,-15%) rotate(5deg);}}
  @keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
  @keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}
  @keyframes oD3{0%,100%{transform:translate(0,0);}50%{transform:translate(-20px,30px);}}
  @keyframes fD{0%,100%{transform:translateY(0) rotate(0deg);opacity:.05;}50%{transform:translateY(-22px) rotate(10deg);opacity:.1;}}

  @media(max-width:880px){
    .content{flex-direction:column;gap:14px;overflow-y:auto;}
    .q-panel{flex:none;}
    .q-image{max-height:100px;}
    .o-approach{display:none;}
  }
  @media(max-width:700px){.sidebar{display:none;}.content{padding:0 16px 16px;}}



  .explore-prog{display:flex;align-items:center;gap:4px;}
  .ep-dot{width:32px;height:5px;border-radius:4px;background:rgba(255,255,255,.06);transition:all .5s;}
  .ep-dot.done{background:var(--green);}
  .ep-dot.on{background:var(--purple);box-shadow:0 0 10px rgba(168,85,247,.3);}
  .ep-label{
        font-size: 15px;
    color: var(--text-primary);
    font-family: "DM Sans", sans-serif;
    margin-left: 10px;
  }

  /* LEFT */
  .left{flex:0 0 clamp(280px,32%,380px);display:flex;flex-direction:column;gap:clamp(12px,1.5vh,16px);}
  .q-mini{
    border-radius:16px;padding:14px 16px;
    background:linear-gradient(160deg,rgba(34,211,167,.015),rgba(12,12,20,.7));
    border:1px solid rgba(34,211,167,.08);display:flex;flex-direction:column;gap:10px;
    position:relative;overflow:hidden;
  }
  .q-mini::before{content:'';position:absolute;inset:0;border-radius:16px;padding:1px;background:conic-gradient(from 180deg,rgba(34,211,167,.12),rgba(168,85,247,.05),rgba(34,211,167,.12));animation:bR 14s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
  .q-mini-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
  .q-mini-label{font-size: 14px;color:var(--green);font-family:"DM Sans", sans-serif;letter-spacing:.8px;text-transform:uppercase;display:flex;align-items:center;gap:4px;}
  .q-mini-label svg{width:10px;height:10px;}
  .q-mini-text{font-size:14.5px;color:var(--t2);line-height:1.55;position:relative;z-index:2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .q-mini-text .kw{color:var(--green);font-weight:600;}
  .q-mini-metas{display:flex;gap:5px;position:relative;z-index:2;}
  .qmm{font-size: 14px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid var(--border);}
  .qmm.s{color:var(--purple);} .qmm.c{color:var(--amber);}

  .profile{
    flex:1;border-radius:16px;padding:16px;
    background:linear-gradient(160deg,rgba(168,85,247,.015),rgba(12,12,20,.7));
    border:1px solid rgba(168,85,247,.06);display:flex;flex-direction:column;gap:12px;
    position:relative;overflow:hidden;
  }
  .profile::before{content:'';position:absolute;inset:0;border-radius:16px;padding:1px;background:conic-gradient(from 60deg,rgba(168,85,247,.1),rgba(236,72,153,.05),rgba(168,85,247,.1));animation:bR 16s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
  .prof-title{font-size:14px;color:var(--purple);font-family:"DM Sans", sans-serif;letter-spacing:.8px;text-transform:uppercase;position:relative;z-index:2;display:flex;align-items:center;gap:5px;}
  .prof-title svg{width:11px;height:11px;}
  .prof-items{display:flex;flex-direction:column;gap:8px;position:relative;z-index:2;flex:1;}
  .prof-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.01);border:1px solid var(--border);transition:all .5s;}
  .prof-item.answered{border-color:rgba(34,211,167,.1);background:rgba(34,211,167,.02);}
  .prof-item.current{border-color:rgba(168,85,247,.15);background:rgba(168,85,247,.02);box-shadow:0 0 16px rgba(168,85,247,.04);}
  .prof-item.pending{opacity:.4;}
  .pi-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;font-family:"DM Sans", sans-serif;}
  .prof-item.answered .pi-num{background:rgba(34,211,167,.12);color:var(--green);}
  .prof-item.current .pi-num{background:rgba(168,85,247,.12);color:var(--purple);box-shadow:0 0 10px rgba(168,85,247,.1);}
  .prof-item.pending .pi-num{background:rgba(255,255,255,.04);color:var(--t3);}
  .pi-text{flex:1;min-width:0;}
  .pi-q{font-size:13.5px;color:var(--t2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pi-a{font-size:13.5px;color:var(--green);margin-top:2px;font-weight:600;display:flex;align-items:center;gap:4px;}
  .pi-a svg{width:10px;height:10px;}
  .prof-item.current .pi-q{color:var(--t1);font-weight:500;}

  .prof-insight{
    font-size:15px;color:var(--t3);padding:10px 12px;border-radius:10px;
    background:rgba(255,255,255,.015);border:1px solid var(--border);
    line-height:1.45;position:relative;z-index:2;font-style:italic;
    display:flex;align-items:flex-start;gap:8px;
  }
  .prof-insight svg{width:14px;height:14px;flex-shrink:0;color:var(--purple);margin-top:1px;}

  /* ===== RIGHT ===== */
  .right{flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;}
  .q-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vh,22px);}

  .step-badge{
    display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;
    background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.1);
    font-size:15px;color:var(--purple);font-weight:600;
    font-family:"DM Sans", sans-serif;letter-spacing:.5px;animation:fadeUp .4s ease;
  }
  .step-badge svg{width:12px;height:12px;}

  .q-main{text-align:center;animation:fadeUp .5s ease .05s both;}
  .q-main h2{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.4px;line-height:1.25;}
  .q-main h2 .hl{background:var(--accent-purple);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .q-main p{    font-size: clamp(13px, 1.05vw, 14.5px);
    color: var(--t2);
    margin-top: 8px;
    margin-bottom: 12px;}

  /* ===== ANSWER AREA ===== */
  .answer-area{width:100%;animation:fadeUp .5s ease .1s both;display:flex;flex-direction:column;gap:clamp(10px,1.5vh,14px);}

  /* Combined input with inline mic */
  .input-wrap{
    width:100%;border-radius:16px;overflow:hidden;
    background:rgba(12,12,20,.6);border:1.5px solid rgba(255,255,255,.04);
    transition:all .3s;position:relative;display:flex;align-items:flex-end;
  }
  .input-wrap:focus-within{border-color:rgba(168,85,247,.2);}
  .input-box{
    flex:1;padding:16px 0 16px 18px;min-height:52px;
    border:none;background:transparent;color:var(--t1);
    font-size:15px;line-height:1.55;
    resize:none;outline:none;
  }
  .input-box::placeholder{color:var(--t3);}
  .input-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--purple),var(--pink),transparent);border-radius:2px;opacity:0;transition:opacity .3s;filter:blur(1px);}
  .input-wrap:focus-within .input-glow{opacity:1;}

  /* Inline mic button */
  .mic-inline{
    width:42px;height:42px;border-radius:12px;border:none;
    background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(236,72,153,.06));
    cursor:pointer;transition:all .3s;position:relative;
    display:flex;align-items:center;justify-content:center;
    margin:5px 6px;flex-shrink:0;
  }
  .mic-inline svg{width:18px;height:18px;color:var(--purple);transition:all .3s;}
  .mic-inline:hover{background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(236,72,153,.1));transform:scale(1.06);}
  .mic-inline.recording{
    background:linear-gradient(135deg,rgba(236,72,153,.2),rgba(168,85,247,.15));
    box-shadow:0 0 20px rgba(236,72,153,.12);animation:micPulse 1.5s ease-in-out infinite;
  }
  .mic-inline.recording svg{color:var(--pink);}
  @keyframes micPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

  /* Language bar */
  .lang-bar{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .lang-label{font-size:11.5px;color:var(--t3);display:flex;align-items:center;gap:5px;white-space:nowrap;}
  .lang-label svg{width:13px;height:13px;color:var(--cyan);flex-shrink:0;}
  .lang-chips{display:flex;gap:5px;flex-wrap:wrap;}
  .lang{
    font-size:14.5px;padding:4px 10px;border-radius:8px;
    background:rgba(255,255,255,.02);border:1px solid var(--border);
    color:var(--t3);transition:all .2s;cursor:default;
  }

  /* ===== MOTIVATION STRIP ===== */
  .motivation{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;border-radius:14px;
    background:linear-gradient(135deg,rgba(168,85,247,.025),rgba(236,72,153,.015));
    border:1px solid rgba(168,85,247,.06);
    width:100%;
  }
  .motiv-icon{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(168,85,247,.08);
  }
  .motiv-icon svg{width:18px;height:18px;color:var(--purple);}
  .motiv-text{flex:1;}
  .motiv-main{font-size:15px;font-weight:600;color:var(--t1);line-height:1.3;}
  .motiv-sub{font-size:11.5px;color:var(--t3);margin-top:2px;line-height:1.35;}

  /* Chips */
  .or-divider{text-align:center;font-size:15px;color:var(--t3);display:flex;align-items:center;gap:12px;}
  .or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--border);}

  .chips{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{
    padding:10px 18px;border-radius:14px;
    background:linear-gradient(160deg,rgba(255,255,255,.015),rgba(12,12,20,.5));
    border:1.5px solid rgba(255,255,255,.04);
    font-size:13.5px;font-weight:500;color:var(--t2);
    cursor:pointer;transition:all .35s;position:relative;overflow:hidden;
    display:flex;align-items:center;gap:7px;
  }
  .chip::before{content:'';position:absolute;inset:0;border-radius:14px;background:radial-gradient(ellipse at 30% 50%,var(--cg,rgba(168,85,247,.04)),transparent 60%);opacity:0;transition:opacity .3s;}
  .chip:hover{border-color:rgba(255,255,255,.08);transform:translateY(-2px);}
  .chip:hover::before{opacity:1;}
  .chip svg{width:15px;height:15px;flex-shrink:0;}
  .chip.selected{border-color:var(--purple);background:linear-gradient(160deg,rgba(168,85,247,.06),rgba(12,12,20,.6));color:var(--t1);box-shadow:0 4px 20px rgba(168,85,247,.08);}
  .chip.selected::before{opacity:1;}
  .chip.selected::after{content:'';position:absolute;inset:0;border-radius:14px;padding:1.5px;background:conic-gradient(from 0deg,rgba(168,85,247,.25),rgba(236,72,153,.1),rgba(168,85,247,.25));animation:bR 5s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}

  .chip[data-c="c1"]{--cg:rgba(6,182,212,.05);} .chip[data-c="c1"] svg{color:var(--cyan);}
  .chip[data-c="c1"].selected{border-color:var(--cyan);box-shadow:0 4px 20px rgba(6,182,212,.08);}
  .chip[data-c="c1"].selected::after{background:conic-gradient(from 0deg,rgba(6,182,212,.25),rgba(168,85,247,.08),rgba(6,182,212,.25));}
  .chip[data-c="c2"]{--cg:rgba(168,85,247,.05);} .chip[data-c="c2"] svg{color:var(--purple);}
  .chip[data-c="c3"]{--cg:rgba(245,158,11,.05);} .chip[data-c="c3"] svg{color:var(--amber);}
  .chip[data-c="c3"].selected{border-color:var(--amber);box-shadow:0 4px 20px rgba(245,158,11,.08);}
  .chip[data-c="c3"].selected::after{background:conic-gradient(from 0deg,rgba(245,158,11,.25),rgba(236,72,153,.08),rgba(245,158,11,.25));}
  .chip[data-c="c4"]{--cg:rgba(236,72,153,.04);} .chip[data-c="c4"] svg{color:var(--pink);}
  .chip[data-c="c4"].selected{border-color:var(--pink);box-shadow:0 4px 20px rgba(236,72,153,.08);}
  .chip[data-c="c4"].selected::after{background:conic-gradient(from 0deg,rgba(236,72,153,.25),rgba(168,85,247,.08),rgba(236,72,153,.25));}

  /* Next */
  .next-row{display:flex;justify-content:center;}
  .next-btn{
    padding:12px 32px;border-radius:15px;border:none; margin-top: 12px;
    background:var(--gradient-cta);
    color:white;font-size:14.5px;font-weight:600;
    cursor:pointer;transition:all .4s;display:flex;align-items:center;gap:8px;
    box-shadow:0 4px 24px rgba(168,85,247,.2);position:relative;overflow:hidden;
    opacity:.3;pointer-events:none;
  }
  .next-btn.active{opacity:1;pointer-events:auto;}
  .next-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s;}
  .next-btn.active:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(168,85,247,.35);}
  .next-btn.active:hover::after{transform:translateX(100%);}
  .next-btn svg{width:15px;height:15px;}

  @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes bR{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}
  @keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
  @keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}
  @keyframes oD3{0%,100%{transform:translate(0,0);}50%{transform:translate(-20px,30px);}}
  @keyframes fD{0%,100%{transform:translateY(0) rotate(0deg);opacity:.05;}50%{transform:translateY(-22px) rotate(10deg);opacity:.1;}}

  @media(max-width:880px){.content{flex-direction:column;gap:14px;overflow-y:auto;}.left{flex:none;}}
  @media(max-width:700px){.sidebar{display:none;}.content{padding:0 16px 16px;}}




.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  .orb{position:absolute;border-radius:50%;filter:blur(110px);}
  .orb-1{width:550px;height:550px;background:radial-gradient(circle,rgba(168,85,247,.13),transparent 70%);top:-20%;right:10%;animation:oD1 24s ease-in-out infinite;}
  .orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(34,211,167,.07),transparent 70%);bottom:-15%;left:15%;animation:oD2 28s ease-in-out infinite;}
  .orb-3{width:350px;height:350px;background:radial-gradient(circle,rgba(236,72,153,.06),transparent 70%);top:50%;left:5%;animation:oD3 22s ease-in-out infinite;}
  .grid-bg{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:64px 64px;}
  .noise{position:fixed;inset:0;pointer-events:none;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px 128px;}
  .floats{position:fixed;inset:0;z-index:0;pointer-events:none;}
  .fl{position:absolute;animation:fD 20s ease-in-out infinite;}
  .fl:nth-child(1){font-size:20px;top:12%;left:5%;color:rgba(168,85,247,.06);}
  .fl:nth-child(2){font-size:16px;top:70%;left:8%;color:rgba(34,211,167,.05);animation-delay:4s;}
  .fl:nth-child(3){font-size:24px;top:15%;right:7%;color:rgba(236,72,153,.04);animation-delay:2s;}
  .fl:nth-child(4){font-size:18px;top:62%;right:10%;color:rgba(245,158,11,.04);animation-delay:6s;}

  .shell{display:flex;height:100vh;position:relative;z-index:1;}
  .sidebar{width:60px;background:rgba(10,10,16,.92);backdrop-filter:blur(14px);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;flex-shrink:0;}
  .s-logo{font-weight:700;font-size:16px;color:var(--purple);margin-bottom:20px;}
  .s-i{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:all .2s;}
  .s-i:hover{background:rgba(255,255,255,.04);color:var(--t2);}
  .s-i.on{background:rgba(168,85,247,.12);color:var(--purple);}
  .page{flex:1;display:flex;flex-direction:column;height:100vh;}
  .topbar{padding:14px clamp(24px,3vw,40px);display:flex;align-items:center;flex-shrink:0;}
  .back{display:inline-flex;align-items:center;gap:7px;color:var(--t2);font-size:15px;font-weight:500;cursor:pointer;padding:6px 12px;border-radius:10px;transition:all .2s;border:none;background:none;}
  .back:hover{background:rgba(255,255,255,.04);color:var(--t1);}

  .stage{
       flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* ===== BLOB PLACEHOLDER ===== */
  .blob-row{
    display:flex;align-items:center;gap:clamp(24px,3vw,40px);
    width:100%;max-width:1280px;
    margin-bottom:clamp(20px,3vh,32px);
    animation:fadeUp .5s ease .08s both;
  }
  .blob-slot{
  /* flex: 0 0 clamp(160px, 18vw, 220px); */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  /* Guide text — remove when replacing with actual blob */
  .blob-slot-hint{
    font-size:14.5px;color:rgba(168,85,247,.25);
    text-align:center;letter-spacing:.3px;line-height:1.4;padding:12px;
  }
  .blob-speech{
    flex:1;display:flex;flex-direction:column;gap:8px;
  }
  .speech-bubble{
    padding:clamp(16px,2.2vh,24px) clamp(18px,2vw,28px);
    border-radius:20px;border-top-left-radius:6px;
    background:linear-gradient(160deg,rgba(168,85,247,.04),rgba(12,12,20,.65));
    border:1.5px solid rgba(168,85,247,.08);
    position:relative;
  }
  .speech-bubble::before{
    content:'';position:absolute;left:-10px;top:24px;
    width:0;height:0;
    border-top:8px solid transparent;border-bottom:8px solid transparent;
    border-right:10px solid rgba(168,85,247,.08);
  }
  .speech-text{font-size:clamp(18px,2vw,26px);font-weight:700;line-height:1.3;letter-spacing:-.3px;}
  .speech-text .hl{background:linear-gradient(135deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .speech-sub{font-size:clamp(13px,1.05vw,15px);color:var(--t2);line-height:1.55;}

  /* ===== 3 PILLARS ===== */
  .pillars{
    display:flex;gap:clamp(14px,1.6vw,20px);width:100%;max-width:1280px;
    margin-bottom:clamp(20px,3vh,32px);
  }

  .pillar{
    flex:1;border-radius:20px;position:relative;overflow:hidden;
    padding:clamp(20px,3vh,30px) clamp(16px,1.5vw,22px);
    display:flex;flex-direction:column;gap:clamp(10px,1.5vh,16px);
    background:linear-gradient(160deg,rgba(255,255,255,.012),rgba(12,12,20,.65));
    border:1.5px solid rgba(255,255,255,.04);
    transition:all .4s cubic-bezier(.23,1,.32,1);
    cursor:default;
  }
  .pillar::before{
    content:'';position:absolute;inset:0;border-radius:20px;
    background:radial-gradient(ellipse at 30% 15%,var(--pg,rgba(168,85,247,.04)),transparent 55%);
    opacity:0;transition:opacity .4s;
  }
  .pillar:hover{border-color:rgba(255,255,255,.07);transform:translateY(-3px);}
  .pillar:hover::before{opacity:1;}

  /* Animated border on hover */
  .pillar::after{
    content:'';position:absolute;inset:0;border-radius:20px;padding:1.5px;
    background:conic-gradient(from var(--pa,0deg),var(--pba,rgba(168,85,247,.2)),var(--pbb,rgba(6,182,212,.08)),var(--pba,rgba(168,85,247,.2)));
    opacity:0;transition:opacity .4s;animation:bR 6s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }
  .pillar:hover::after{opacity:1;}

  .pillar:nth-child(1){--pg:rgba(6,182,212,.05);--pba:rgba(6,182,212,.25);--pbb:rgba(168,85,247,.08);}
  .pillar:nth-child(2){--pg:rgba(168,85,247,.05);--pba:rgba(168,85,247,.25);--pbb:rgba(236,72,153,.08);}
  .pillar:nth-child(3){--pg:rgba(34,211,167,.05);--pba:rgba(34,211,167,.25);--pbb:rgba(168,85,247,.08);}

  /* Step number + connector */
  .p-top{display:flex;align-items:center;gap:10px;position:relative;z-index:2;}
  .p-step{
    width:clamp(36px,4.5vh,44px);height:clamp(36px,4.5vh,44px);border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:clamp(14px,1.8vh,18px);
    transition:all .3s;
  }
  .pillar:nth-child(1) .p-step{background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(6,182,212,.04));color:var(--cyan);box-shadow:inset 0 0 10px rgba(6,182,212,.04);}
  .pillar:nth-child(2) .p-step{background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(168,85,247,.04));color:var(--purple);box-shadow:inset 0 0 10px rgba(168,85,247,.04);}
  .pillar:nth-child(3) .p-step{background:linear-gradient(135deg,rgba(34,211,167,.12),rgba(34,211,167,.04));color:var(--green);box-shadow:inset 0 0 10px rgba(34,211,167,.04);}

  .p-tag{font-size:15px;letter-spacing:.5px;text-transform:uppercase;}
  .pillar:nth-child(1) .p-tag{color:var(--cyan);}
  .pillar:nth-child(2) .p-tag{color:var(--purple);}
  .pillar:nth-child(3) .p-tag{color:var(--green);}

  /* Icon */
  .p-icon{
    width:clamp(50px,6.5vh,62px);height:clamp(50px,6.5vh,62px);border-radius:18px;
    display:flex;align-items:center;justify-content:center;
    position:relative;z-index:2;transition:all .35s;
  }
  .p-icon svg{width:clamp(26px,3.5vh,32px);height:clamp(26px,3.5vh,32px);}
  .pillar:nth-child(1) .p-icon{background:rgba(6,182,212,.06);color:var(--cyan);}
  .pillar:nth-child(2) .p-icon{background:rgba(168,85,247,.06);color:var(--purple);}
  .pillar:nth-child(3) .p-icon{background:rgba(34,211,167,.06);color:var(--green);}
  .pillar:hover .p-icon{transform:scale(1.06);}
  .pillar:nth-child(1):hover .p-icon{background:rgba(6,182,212,.1);box-shadow:0 0 24px rgba(6,182,212,.06);}
  .pillar:nth-child(2):hover .p-icon{background:rgba(168,85,247,.1);box-shadow:0 0 24px rgba(168,85,247,.06);}
  .pillar:nth-child(3):hover .p-icon{background:rgba(34,211,167,.1);box-shadow:0 0 24px rgba(34,211,167,.06);}

  .p-title{font-size:clamp(16px,1.5vw,20px);font-weight:700;letter-spacing:-.2px;line-height:1.25;position:relative;z-index:2;}
  .p-desc{font-size:clamp(12px,.95vw,13.5px);color:var(--t3);line-height:1.55;position:relative;z-index:2;}

  /* Arrow connectors between pillars */
  .arrow-conn{
    display:flex;align-items:center;align-self:center;
    color:var(--t3);opacity:.3;flex-shrink:0;
  }
  .arrow-conn svg{width:20px;height:20px;}

  /* ===== BOTTOM ===== */
  .bottom-section{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    animation:fadeUp .6s ease .4s both;
  }

  .similar-preview{
    display:flex;align-items:center;gap:10px;
    padding:10px 18px;border-radius:14px;
    background:rgba(255,255,255,.015);border:1px solid var(--border);
    max-width:560px;
  }
  .sp-icon{
    width:32px;height:32px;border-radius:9px;flex-shrink:0;
    background:rgba(6,182,212,.06);display:flex;align-items:center;justify-content:center;
  }
  .sp-icon svg{width:14px;height:14px;color:var(--cyan);}
  .sp-text{font-size:14.5px;color:var(--t2);line-height:1.4;}
  .sp-text strong{color:var(--cyan);font-weight:600;}

  .start-btn{
    padding:14px 42px;border-radius:12px;border:none;
    background:var(--gradient-cta);
    color:white;font-size:16px;font-weight:600;
    cursor:pointer;transition:all .4s;display:flex;align-items:center;gap:9px;
    box-shadow:0 6px 28px rgba(168,85,247,.25);position:relative;overflow:hidden;
  }
  .start-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s;}
  .start-btn:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(168,85,247,.35);}
  .start-btn:hover::after{transform:translateX(100%);}
  .start-btn svg{width:17px;height:17px;}

  .start-hint{font-size:15px;color:var(--t3);display:flex;align-items:center;gap:6px;}
  .start-hint svg{width:13px;height:13px;opacity:.4;}

  @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes bR{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}
  @keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(-40px,25px);}}
  @keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-20px);}}
  @keyframes oD3{0%,100%{transform:translate(0,0);}50%{transform:translate(-20px,30px);}}
  @keyframes fD{0%,100%{transform:translateY(0) rotate(0deg);opacity:.05;}50%{transform:translateY(-22px) rotate(10deg);opacity:.1;}}

  @media(max-width:800px){
    .pillars{flex-direction:column;max-width:400px;margin-left:auto;margin-right:auto;}
    .pillar{flex-direction:row;align-items:center;gap:16px;padding:16px 18px;}
    .p-icon{flex-shrink:0;}
    .arrow-conn{display:none;}
    .blob-row{flex-direction:column;text-align:center;gap:16px;}
    .blob-slot{flex:none;width:140px;height:140px;margin:0 auto;}
    .speech-bubble{border-radius:20px;border-top-left-radius:20px;}
    .speech-bubble::before{display:none;}
  }
  @media(max-width:700px){.sidebar{display:none;}.stage{padding:0 16px 16px;}}


  .atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.orb{position:absolute;border-radius:50%;filter:blur(110px);}
.orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(168,85,247,.08),transparent 70%);top:-18%;left:5%;animation:oD1 24s ease-in-out infinite;}
.orb-2{width:350px;height:350px;background:radial-gradient(circle,rgba(245,158,11,.05),transparent 70%);bottom:-10%;right:8%;animation:oD2 28s ease-in-out infinite;}
.grid-bg{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:64px 64px;}

.shell{display:flex;height:100vh;position:relative;z-index:1;}
.sidebar{width:60px;background:rgba(10,10,16,.92);backdrop-filter:blur(14px);border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;padding:16px 0;flex-shrink:0;}
.s-logo{font-weight:700;font-size:16px;color:#a855f7;margin-bottom:20px;}
.s-i{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.26);}
.s-i.on{background:rgba(168,85,247,.12);color:#a855f7;}

.page{flex:1;display:flex;flex-direction:column;height:100vh;}
.topbar{padding:10px clamp(20px,2.5vw,36px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);}
.back{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.5);font-size:15px;font-weight:500;cursor:pointer;padding:6px 12px;border-radius:10px;transition:all .2s;border:none;background:none;}
.back:hover{background:rgba(255,255,255,.04);color:#f0f0f5;}
.flow-badge{padding:5px 14px;border-radius:8px;font-size:14.5px;font-weight:600;background:rgba(245,158,11,.06);color:#f59e0b;display:flex;align-items:center;gap:6px;}
.flow-badge svg{width:12px;height:12px;}

.content{flex:1;display:flex;flex-direction:column;padding:clamp(20px,3vh,36px) clamp(24px,3vw,48px);min-height:0;gap:clamp(16px,2.5vh,24px);}

.hdr{display:flex;align-items:flex-start;gap:14px;}
.hdr-icon{width:40px;height:40px;border-radius:12px;flex-shrink:0;background:rgba(245,158,11,.06);display:flex;align-items:center;justify-content:center;}
.hdr-icon svg{width:20px;height:20px;color:#f59e0b;}
.hdr-text{flex:1;}
.hdr-title{font-size:clamp(18px,2.2vw,26px);font-weight:700;line-height:1.25;}
.hdr-title .hl{color:#f59e0b;}
.hdr-sub{font-size:15px;color:rgba(255,255,255,.35);margin-top:4px;}

/* Work area */
.work-area{
  flex:1;min-height:0;border-radius:18px;
  background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);
  padding:clamp(16px,2vh,24px) clamp(18px,2vw,28px);
  display:flex;flex-direction:column;gap:0;overflow-y:auto;
}
.work-area::-webkit-scrollbar{width:3px;}
.work-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.04);border-radius:3px;}
.wa-label{font-size:15px;letter-spacing:.5px;color:rgba(255,255,255,.2);margin-bottom:clamp(10px,1.5vh,14px);}

.step{display:flex;align-items:flex-start;gap:12px;padding:clamp(10px,1.4vh,14px) 0;border-bottom:1px solid rgba(255,255,255,.025);}
.step:last-child{border-bottom:none;}
.step-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.step-dot svg{width:11px;height:11px;}
.step-dot.green{background:rgba(34,211,167,.1);color:#22d3a7;}
.step-dot.amber{background:rgba(245,158,11,.1);color:#f59e0b;}

.step-body{flex:1;min-width:0;}
.step-label{font-size:15px;letter-spacing:.4px;margin-bottom:3px;}
.step-label.green{color:#22d3a7;}
.step-label.amber{color:#f59e0b;}
.step-content{font-family:'Caveat',cursive;font-size:clamp(18px,2vw,22px);color:rgba(255,255,255,.75);line-height:1.5;}
.step-content .struck{text-decoration:line-through;color:rgba(245,158,11,.4);text-decoration-thickness:2px;}
.step-content .correction{color:#22d3a7;font-weight:600;}

.step-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:13px;margin-top:6px;}
.step-tag.green{background:rgba(34,211,167,.04);color:#22d3a7;}
.step-tag.amber{background:rgba(245,158,11,.04);color:#f59e0b;}
.step-tag svg{width:8px;height:8px;}

/* Error callout */
.error-callout{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:12px;margin-top:4px;
  background:rgba(245,158,11,.015);border:1px solid rgba(245,158,11,.06);
}
.error-callout svg{width:14px;height:14px;color:#f59e0b;flex-shrink:0;margin-top:1px;}
.ec-text{font-size:15px;color:rgba(255,255,255,.4);line-height:1.5;}
.ec-text strong{color:rgba(255,255,255,.6);}

/* Diagnosis */
.diagnosis{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:12px;
  background:rgba(34,211,167,.015);border:1px solid rgba(34,211,167,.06);
  flex-shrink:0;
}
.diag-icon{width:24px;height:24px;border-radius:7px;flex-shrink:0;background:rgba(34,211,167,.06);display:flex;align-items:center;justify-content:center;}
.diag-icon svg{width:12px;height:12px;color:#22d3a7;}
.diag-text{font-size:15px;color:rgba(255,255,255,.5);line-height:1.4;}
.diag-text strong{color:#22d3a7;font-weight:600;}

.foot{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.foot-hint{flex:1;font-size:14.5px;color:rgba(255,255,255,.2);}
.action-btn{
  padding:12px 28px;border-radius:12px;border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .4s;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#f59e0b,#f97316);color:white;
  box-shadow:0 4px 16px rgba(245,158,11,.2);
}
.action-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(245,158,11,.3);}
.action-btn svg{width:14px;height:14px;}

@keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
@keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}
@media(max-width:600px){.sidebar{display:none;}}


.content{flex:1;display:flex;flex-direction:column;padding:clamp(20px,3vh,36px) clamp(24px,3vw,48px);min-height:0;gap:clamp(16px,2.5vh,24px);}

/* Header */
.hdr{display:flex;align-items:flex-start;gap:14px;}
.hdr-icon{width:40px;height:40px;border-radius:12px;flex-shrink:0;background:rgba(34,211,167,.06);display:flex;align-items:center;justify-content:center;}
.hdr-icon svg{width:20px;height:20px;color:#22d3a7;}
.hdr-text{flex:1;}
.hdr-title{font-size:clamp(18px,2.2vw,26px);font-weight:700;line-height:1.25;}
.hdr-title .hl{color:#22d3a7;}
.hdr-sub{font-size:15px;color:rgba(255,255,255,.35);margin-top:4px;}

/* Work area — the student's extracted steps */
.work-area{
  flex:1;min-height:0;border-radius:18px;
  background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);
  padding:clamp(16px,2vh,24px) clamp(18px,2vw,28px);
  display:flex;flex-direction:column;gap:0;overflow-y:auto;
}
.work-area::-webkit-scrollbar{width:3px;}
.work-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.04);border-radius:3px;}

.wa-label{font-size:15px;letter-spacing:.5px;color:rgba(255,255,255,.2);margin-bottom:clamp(10px,1.5vh,14px);}

/* Step cards */
.step{display:flex;align-items:flex-start;gap:12px;padding:clamp(10px,1.4vh,14px) 0;border-bottom:1px solid rgba(255,255,255,.025);}
.step:last-child{border-bottom:none;}

.step-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.step-dot svg{width:11px;height:11px;}
.step-dot.green{background:rgba(34,211,167,.1);color:#22d3a7;}
.step-dot.amber{background:rgba(245,158,11,.1);color:#f59e0b;}

.step-body{flex:1;min-width:0;}
.step-label{font-size:15px;letter-spacing:.4px;margin-bottom:3px;}
.step-label.green{color:#22d3a7;}
.step-label.amber{color:#f59e0b;}
.step-content{font-family:'Caveat',cursive;font-size:clamp(18px,2vw,22px);color:rgba(255,255,255,.75);line-height:1.5;}
.step-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:13px;margin-top:6px;}
.step-tag.green{background:rgba(34,211,167,.04);color:#22d3a7;}
.step-tag.amber{background:rgba(245,158,11,.04);color:#f59e0b;}
.step-tag svg{width:8px;height:8px;}

/* Stuck indicator */
.stuck-line{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;margin-top:4px;
  background:rgba(245,158,11,.015);border:1px dashed rgba(245,158,11,.1);
}
.sl-icon{color:#f59e0b;flex-shrink:0;}
.sl-icon svg{width:16px;height:16px;}
.sl-text{font-size:15px;color:rgba(245,158,11,.6);font-style:italic;}

/* Diagnosis line */
.diagnosis{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:12px;
  background:rgba(34,211,167,.015);border:1px solid rgba(34,211,167,.06);
  flex-shrink:0;
}
.diag-icon{width:24px;height:24px;border-radius:7px;flex-shrink:0;background:rgba(34,211,167,.06);display:flex;align-items:center;justify-content:center;}
.diag-icon svg{width:12px;height:12px;color:#22d3a7;}
.diag-text{font-size:15px;color:rgba(255,255,255,.5);line-height:1.4;}
.diag-text strong{color:#22d3a7;font-weight:600;}

/* Footer */
.foot{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.foot-hint{flex:1;font-size:14.5px;color:rgba(255,255,255,.2);}
.action-btn{
  padding:12px 28px;border-radius:12px;border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .4s;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#22d3a7,#06b6d4);color:white;
  box-shadow:0 4px 16px rgba(34,211,167,.2);
}
.action-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(34,211,167,.3);}
.action-btn svg{width:14px;height:14px;}

@keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
@keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}
@media(max-width:600px){.sidebar{display:none;}}

.content {
     width: 1280px !important;
    margin: auto !important;
}


.page{flex:1;display:flex;flex-direction:column;height:100vh;}
.topbar{padding:10px clamp(20px,2.5vw,36px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);}
.back{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.5);font-size:15px;font-weight:500;cursor:pointer;padding:6px 12px;border-radius:10px;transition:all .2s;border:none;background:none;}
.back:hover{background:rgba(255,255,255,.04);color:#f0f0f5;}
.flow-badge{padding:5px 14px;border-radius:8px;font-size:14.5px;font-weight:600;background:rgba(236,72,153,.06);color:#ec4899;display:flex;align-items:center;gap:6px;}
.flow-badge svg{width:12px;height:12px;}

.content{flex:1;display:flex;flex-direction:column;padding:clamp(20px,3vh,36px) clamp(24px,3vw,48px);min-height:0;gap:clamp(16px,2.5vh,24px);}

.hdr{display:flex;align-items:flex-start;gap:14px;}
.hdr-icon{width:40px;height:40px;border-radius:12px;flex-shrink:0;background:rgba(236,72,153,.06);display:flex;align-items:center;justify-content:center;}
.hdr-icon svg{width:20px;height:20px;color:#ec4899;}
.hdr-text{flex:1;}
.hdr-title{font-size:clamp(18px,2.2vw,26px);font-weight:700;line-height:1.25;}
.hdr-title .hl{color:#ec4899;}
.hdr-sub{font-size:15px;color:rgba(255,255,255,.35);margin-top:4px;}

/* Work area */
.work-area{
  flex:1;min-height:0;border-radius:18px;
  background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);
  padding:clamp(16px,2vh,24px) clamp(18px,2vw,28px);
  display:flex;flex-direction:column;gap:0;overflow-y:auto;
}
.work-area::-webkit-scrollbar{width:3px;}
.work-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.04);border-radius:3px;}
.wa-label{font-size:15px;letter-spacing:.5px;color:rgba(255,255,255,.2);margin-bottom:clamp(10px,1.5vh,14px);}

.step{display:flex;align-items:flex-start;gap:12px;padding:clamp(10px,1.4vh,14px) 0;border-bottom:1px solid rgba(255,255,255,.025);}
.step:last-child{border-bottom:none;}
.step-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.step-dot svg{width:11px;height:11px;}
.step-dot.red{background:rgba(236,72,153,.1);color:#ec4899;}

.step-body{flex:1;min-width:0;}
.step-label{font-size:15px;letter-spacing:.4px;margin-bottom:3px;}
.step-label.red{color:#ec4899;}
.step-content{font-family:'Caveat',cursive;font-size:clamp(18px,2vw,22px);color:rgba(255,255,255,.75);line-height:1.5;}
.step-content .struck{text-decoration:line-through;color:rgba(236,72,153,.4);text-decoration-thickness:2px;}

.step-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:13px;margin-top:6px;}
.step-tag.red{background:rgba(236,72,153,.04);color:#ec4899;}

/* Explanation */
.explain{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:12px;margin-top:4px;
  background:rgba(236,72,153,.01);border:1px solid rgba(236,72,153,.05);
}
.explain svg{width:14px;height:14px;color:#ec4899;flex-shrink:0;margin-top:1px;}
.explain-text{font-size:15px;color:rgba(255,255,255,.4);line-height:1.5;}
.explain-text strong{color:rgba(255,255,255,.6);}

/* Diagnosis */
.diagnosis{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:12px;
  background:rgba(168,85,247,.015);border:1px solid rgba(168,85,247,.06);
  flex-shrink:0;
}
.diag-icon{width:24px;height:24px;border-radius:7px;flex-shrink:0;background:rgba(168,85,247,.06);display:flex;align-items:center;justify-content:center;}
.diag-icon svg{width:12px;height:12px;color:#a855f7;}
.diag-text{font-size:15px;color:rgba(255,255,255,.5);line-height:1.4;}
.diag-text strong{color:#a855f7;font-weight:600;}

.foot{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.foot-hint{flex:1;font-size:14.5px;color:rgba(255,255,255,.2);}
.action-btn{
  padding:12px 28px;border-radius:12px;border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .4s;
  display:flex;align-items:center;gap:8px;
  background:var(--gradient-cta); color: white;

}
.action-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(168,85,247,.3);}
.action-btn svg{width:14px;height:14px;}

@keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
@keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}
@media(max-width:600px){.sidebar{display:none;}}



page{flex:1;display:flex;flex-direction:column;height:100vh;}
.topbar{padding:10px clamp(20px,2.5vw,36px);display:flex;align-items:center;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);}
.back{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.5);font-size:15px;font-weight:500;cursor:pointer;padding:6px 12px;border-radius:10px;transition:all .2s;border:none;background:none;}
.back:hover{background:rgba(255,255,255,.04);color:#f0f0f5;}

.body{flex:1;display:flex;flex-direction:column;padding:clamp(16px,2.5vh,28px) clamp(24px,3vw,48px);min-height:0;gap:clamp(16px,2.5vh,24px);}

/* Title row */
.title-row{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.blob-wrap{position:relative;width:52px;height:52px;flex-shrink:0;}
.blob-glow{position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.12),transparent 70%);animation:bGlow 3s ease-in-out infinite;}
.blob{
  width:52px;height:52px;border-radius:50%;position:relative;
  background:linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);
  box-shadow:0 0 28px rgba(168,85,247,.2);
  animation:bFloat 4s ease-in-out infinite;
}
.blob::before{content:'';position:absolute;top:17px;left:13px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:13px 0 0 rgba(255,255,255,.9);}
.blob::after{content:'';position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:10px;height:5px;border-radius:0 0 7px 7px;background:rgba(255,255,255,.7);}
.tent{position:absolute;bottom:-5px;width:4px;height:12px;border-radius:0 0 3px 3px;background:linear-gradient(to bottom,#a855f7,rgba(168,85,247,.15));animation:tWave 2s ease-in-out infinite;}
.tent:nth-child(2){left:15px;}.tent:nth-child(3){left:24px;animation-delay:.3s;height:15px;}.tent:nth-child(4){left:33px;animation-delay:.6s;}
.title{font-size:clamp(20px,2.6vw,30px);font-weight:700;}
.subtitle{font-size:15px;color:rgba(255,255,255,.3);margin-top:2px;}

/* ===== STAIRCASE ===== */
.staircase{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  justify-content:center;
  gap:0;
  position:relative;
}



.stair{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  padding:clamp(12px,1.8vh,18px) 0;
  position:relative;
  opacity:0;animation:stairIn .5s ease-out forwards;
}
.stair:nth-child(1){padding-left:0;animation-delay:.1s;}
.stair:nth-child(2){padding-left:clamp(40px,5vw,80px);animation-delay:.25s;}
.stair:nth-child(3){padding-left:clamp(80px,10vw,160px);animation-delay:.4s;}
.stair:nth-child(4){padding-left:clamp(120px,15vw,240px);animation-delay:.55s;}

/* Icon circle */
.stair-icon{
  width:clamp(48px,5vh,58px);height:clamp(48px,5vh,58px);
  border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.stair-icon svg{width:clamp(22px,2.5vh,26px);height:clamp(22px,2.5vh,26px);}

.stair-icon.c1{
  background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(168,85,247,.04));
  border:1px solid rgba(168,85,247,.15);
  box-shadow:0 0 20px rgba(168,85,247,.08);
  color:#a855f7;
}
.stair-icon.c2{
  background:linear-gradient(135deg,rgba(236,72,153,.12),rgba(236,72,153,.04));
  border:1px solid rgba(236,72,153,.15);
  box-shadow:0 0 20px rgba(236,72,153,.08);
  color:#ec4899;
}
.stair-icon.c3{
  background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(6,182,212,.04));
  border:1px solid rgba(6,182,212,.15);
  box-shadow:0 0 20px rgba(6,182,212,.08);
  color:#06b6d4;
}
.stair-icon.c4{
  background:linear-gradient(135deg,rgba(34,211,167,.12),rgba(34,211,167,.04));
  border:1px solid rgba(34,211,167,.15);
  box-shadow:0 0 20px rgba(34,211,167,.08);
  color:#22d3a7;
}

/* Card attached to icon */
.stair-card{
  flex:1;
  padding:clamp(12px,1.6vh,16px) clamp(16px,1.8vw,22px);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.012);
  display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  transition:background .2s,border-color .2s;
}
.stair:nth-child(1) .stair-card{border-color:rgba(168,85,247,.06);}
.stair:nth-child(1) .stair-card:hover{background:rgba(168,85,247,.015);border-color:rgba(168,85,247,.1);}
.stair:nth-child(2) .stair-card{border-color:rgba(236,72,153,.06);}
.stair:nth-child(2) .stair-card:hover{background:rgba(236,72,153,.015);border-color:rgba(236,72,153,.1);}
.stair:nth-child(3) .stair-card{border-color:rgba(6,182,212,.06);}
.stair:nth-child(3) .stair-card:hover{background:rgba(6,182,212,.015);border-color:rgba(6,182,212,.1);}
.stair:nth-child(4) .stair-card{border-color:rgba(34,211,167,.06);}
.stair:nth-child(4) .stair-card:hover{background:rgba(34,211,167,.015);border-color:rgba(34,211,167,.1);}

.sc-num{font-size:14.5px;font-weight:700;flex-shrink:0;width:20px;}
.sc-num.c1{color:#a855f7;}
.sc-num.c2{color:#ec4899;}
.sc-num.c3{color:#06b6d4;}
.sc-num.c4{color:#22d3a7;}

.sc-text{flex:1;}
.sc-title{font-size:clamp(14px,1.5vw,16px);font-weight:600;color:rgba(255,255,255,.75);}
.sc-desc{font-size:clamp(11px,1.1vw,12.5px);color:rgba(255,255,255,.25);margin-top:2px;line-height:1.4;}

/* Arrow between icon and card */
.sc-arrow{width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.08);}
.sc-arrow svg{width:12px;height:12px;}

/* Footer */
.footer{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  opacity:0;animation:stairIn .4s ease-out .7s forwards;
}
.f-hint{flex:1;font-size:14.5px;color:rgba(255,255,255,.18);}
.continue-btn{
  padding:12px 28px;border-radius:12px;border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .4s;
  display:flex;align-items:center;gap:8px;
  background:var(--gradient-cta);color:white;
 
}
.continue-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(168,85,247,.35);}
.continue-btn svg{width:14px;height:14px;}

@keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,20px);}}
@keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-25px,-15px);}}
@keyframes bFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes bGlow{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
@keyframes tWave{0%,100%{transform:rotate(-5deg);}50%{transform:rotate(5deg);}}
@keyframes stairIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}

@media(max-width:700px){
  .sidebar{display:none;}
  .staircase::before{display:none;}
  .stair:nth-child(1),.stair:nth-child(2),.stair:nth-child(3),.stair:nth-child(4){padding-left:0;}
  .stair-icon{width:40px;height:40px;border-radius:12px;}
  .stair-icon svg{width:18px;height:18px;}
}
/* ===== LEFT — Your question (compact) ===== */
  .left{
    flex:0 0 clamp(240px,26%,300px);display:flex;flex-direction:column;gap:clamp(12px,1.5vh,16px);
  }

  .yours-card{
    border-radius:16px;padding:clamp(14px,2vh,20px) clamp(14px,1.5vw,18px);
    background:linear-gradient(160deg,rgba(34,211,167,.015),rgba(12,12,20,.7));
    border:1px solid rgba(34,211,167,.08);
    display:flex;flex-direction:column;gap:10px;
    position:relative;overflow:hidden;
  }
  .yours-card::before{content:'';position:absolute;inset:0;border-radius:16px;padding:1px;background:conic-gradient(from 180deg,rgba(34,211,167,.12),rgba(168,85,247,.05),rgba(34,211,167,.12));animation:bR 14s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
  .yc-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
  .yc-label{font-size:13px;color:var(--green);letter-spacing:.8px;text-transform:uppercase;display:flex;align-items:center;gap:4px;}
  .yc-label svg{width:10px;height:10px;}
  .yc-badge{font-size:8px;color:var(--green);padding:3px 8px;border-radius:7px;background:rgba(34,211,167,.06);letter-spacing:.4px;}
  .yc-text{font-size:14.5px;color:var(--t2);line-height:1.55;position:relative;z-index:2;}
  .yc-text .kw{color:var(--green);font-weight:600;}
  .yc-metas{display:flex;gap:5px;position:relative;z-index:2;}
  .ym{font-size:13px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid var(--border);}
  .ym.s{color:var(--purple);} .ym.c{color:var(--amber);}

  /* Similarity indicator */
  .sim-strip{
    border-radius:12px;padding:12px 14px;
    background:linear-gradient(135deg,rgba(168,85,247,.025),rgba(236,72,153,.015));
    border:1px solid rgba(168,85,247,.06);
    display:flex;align-items:center;gap:10px;
    position:relative;z-index:2;
  }
  .sim-icon{
    width:34px;height:34px;border-radius:10px;flex-shrink:0;
    background:rgba(168,85,247,.08);display:flex;align-items:center;justify-content:center;
  }
  .sim-icon svg{width:16px;height:16px;color:var(--purple);}
  .sim-text{font-size:11.5px;color:var(--t2);line-height:1.4;}
  .sim-text strong{color:var(--purple);font-weight:600;}

  /* Match tags */
  .match-tags{display:flex;flex-direction:column;gap:6px;position:relative;z-index:2;}
  .match-tag{
    display:flex;align-items:center;gap:8px;
    padding:8px 12px;border-radius:10px;
    background:rgba(255,255,255,.01);border:1px solid var(--border);
    font-size:14.5px;color:var(--t2);
  }
  .match-tag svg{width:14px;height:14px;flex-shrink:0;}
  .match-tag.m1 svg{color:var(--green);}
  .match-tag.m2 svg{color:var(--cyan);}
  .match-tag.m3 svg{color:var(--amber);}
  .match-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
  .match-tag.m1 .match-dot{background:var(--green);}
  .match-tag.m2 .match-dot{background:var(--cyan);}
  .match-tag.m3 .match-dot{background:var(--amber);}

  /* ===== RIGHT — Sample problem ===== */
  .right{flex:1;display:flex;flex-direction:column;min-height:0;}

  .head{margin-bottom:clamp(14px,2.2vh,22px);animation:fadeUp .4s ease;}
  .head-badge{
    display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;
    background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.1);
    font-size:14.5px;color:var(--cyan);font-weight:600;
   letter-spacing:.5px;margin-bottom:10px;
  }
  .head-badge svg{width:12px;height:12px;}
  .head h2{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.4px;line-height:1.2;}
  .head h2 .hl{background:linear-gradient(135deg,var(--cyan),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .head p{font-size:clamp(13px,1.05vw,14.5px);color:var(--t2);margin-top:6px;line-height:1.5;}

  /* Sample problem card */
  .sample-card{
    flex:1;border-radius:22px;
    padding:clamp(20px,3vh,30px) clamp(20px,2.2vw,28px);
    display:flex;flex-direction:column;gap:clamp(14px,2vh,20px);
    position:relative;overflow:hidden;min-height:0;
    background:linear-gradient(165deg,rgba(6,182,212,.02),rgba(12,12,20,.75),rgba(168,85,247,.01));
  }
  .sample-card::before{
    content:'';position:absolute;inset:0;border-radius:22px;padding:1.5px;
    background:conic-gradient(from 120deg,rgba(6,182,212,.2),rgba(168,85,247,.08),rgba(34,211,167,.1),rgba(6,182,212,.2));
    animation:bR 12s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  }
  .sample-card::after{
    content:'';position:absolute;width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle,rgba(6,182,212,.03),transparent 60%);
    top:-10%;right:-5%;pointer-events:none;
  }

  .sc-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
  .sc-label{font-size:15px;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:5px;}
  .sc-label svg{width:12px;height:12px;}
  .sc-badge{font-size:13px;color:var(--t3);padding:3px 10px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid var(--border);}

  /* Problem content — text + diagram side by side */
  .sc-body{display:flex;gap:clamp(16px,2vw,24px);position:relative;z-index:2;flex:1;min-height:0;}

  .sc-text-col{flex:1;display:flex;flex-direction:column;gap:12px;}
  .sc-question{font-size:clamp(14px,1.2vw,16px);line-height:1.7;color:var(--t1);}
  .sc-question .kw{color:var(--cyan);font-weight:600;}

  /* Given values */
  .sc-givens{
    display:flex;flex-direction:column;gap:6px;
    padding:12px 14px;border-radius:12px;
    background:rgba(6,182,212,.02);border:1px solid rgba(6,182,212,.06);
  }
  .sg-title{font-size:13px;color:var(--cyan);letter-spacing:.8px;text-transform:uppercase;margin-bottom:2px;}
  .sg-row{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--t2);}
  .sg-var{color:var(--cyan);font-weight:600;min-width:24px;}
  .sg-eq{color:var(--t3);}
  .sg-val{color:var(--t1);font-weight:500;}
  .sg-find{
    margin-top:4px;padding-top:8px;border-top:1px solid rgba(6,182,212,.06);
    font-size:15px;color:var(--amber);font-weight:600;display:flex;align-items:center;gap:6px;
  }
  .sg-find svg{width:13px;height:13px;}

  /* Diagram placeholder */
  .sc-diagram{
    flex:0 0 clamp(160px,20%,220px);border-radius:14px;
    border:1px solid rgba(255,255,255,.05);
    background:rgba(255,255,255,.015);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;position:relative;
  }
  .sc-diagram img{width:100%;height:100%;object-fit:contain;display:block;padding:12px;}
  .sc-diagram .dia-badge{
    position:absolute;bottom:6px;right:6px;font-size:8px;
    padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.6);
    color:var(--t3);letter-spacing:.3px;
  }

  /* Bottom actions */
  .sc-bottom{
    display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;
    padding-top:clamp(8px,1.2vh,14px);border-top:1px solid var(--border);
  }
  .sc-hint{font-size:15px;color:var(--t3);display:flex;align-items:center;gap:6px;line-height:1.4;max-width:360px;}
  .sc-hint svg{width:14px;height:14px;flex-shrink:0;opacity:.4;}

  .begin-btn{
    padding:12px 32px;border-radius:12px;border:none;
    background:linear-gradient(135deg,var(--cyan),var(--green));
    color:white;font-size:14.5px;font-weight:600;
    cursor:pointer;transition:all .4s;display:flex;align-items:center;gap:8px;
    box-shadow:0 4px 24px rgba(6,182,212,.2);position:relative;overflow:hidden;
  }
  .begin-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s;}
  .begin-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(6,182,212,.3);}
  .begin-btn:hover::after{transform:translateX(100%);}
  .begin-btn svg{width:15px;height:15px;}

  @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes bR{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}
  @keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(-40px,25px);}}
  @keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-20px);}}
  @keyframes oD3{0%,100%{transform:translate(0,0);}50%{transform:translate(-20px,30px);}}
  @keyframes fD{0%,100%{transform:translateY(0) rotate(0deg);opacity:.05;}50%{transform:translateY(-22px) rotate(10deg);opacity:.1;}}

  @media(max-width:880px){.content{flex-direction:column;gap:14px;overflow-y:auto;}.left{flex:none;}.sc-body{flex-direction:column;}.sc-diagram{flex:none;height:160px;}}
  @media(max-width:700px){.sidebar{display:none;}.content{padding:0 16px 16px;}}






  /* Progress pills */
.pills{display:flex;gap:4px;margin-left:auto;}
.pill{
  width:clamp(36px,5vw,52px);height:7px;border-radius:4px;
  background:rgba(255,255,255,.04);position:relative;overflow:hidden;
  transition:all .3s;
}
.pill.done{background:#22d3a7;}
.pill.active{background:rgba(168,85,247,.15);}
.pill.active::after{
  content:'';position:absolute;left:0;top:0;bottom:0;
  background:#a855f7;border-radius:4px;
  animation:pillFill 2s ease-out forwards;
}
.pill.locked{background:rgba(255,255,255,.02);}

.step-label{
  margin-left:10px;font-size:15px;
  letter-spacing:.4px;white-space:nowrap;
}
.step-label.c1{color:#a855f7;}
.step-label.c2{color:#ec4899;}
.step-label.c3{color:#06b6d4;}
.step-label.c4{color:#22d3a7;}

/* Speed control */
.speed{display:flex;align-items:center;gap:4px;margin-left:16px;}
.sp-btn{
  padding:3px 8px;border-radius:6px;font-size:15px;
  border:1px solid rgba(255,255,255,.04);background:none;color:rgba(255,255,255,.2);
  cursor:pointer;transition:all .2s;
}
.sp-btn.on{border-color:rgba(168,85,247,.2);color:#a855f7;background:rgba(168,85,247,.06);}

/* ===== WHITEBOARD ===== */
.board{
  flex:1;position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(255,255,255,.015) 31px,rgba(255,255,255,.015) 32px),
    repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(255,255,255,.015) 31px,rgba(255,255,255,.015) 32px);
}

/* Pen cursor */
.pen{
  position:absolute;width:18px;height:18px;z-index:10;
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.pen.show{opacity:1;}
.pen::before{content:'';position:absolute;top:0;left:0;width:4px;height:18px;background:linear-gradient(to bottom,#f0f0f5 60%,rgba(168,85,247,.4));border-radius:1px;transform:rotate(-20deg);transform-origin:bottom left;}
.pen::after{content:'';position:absolute;bottom:0;left:0;width:3px;height:3px;border-radius:50%;background:#a855f7;box-shadow:0 0 6px rgba(168,85,247,.5);}

/* Step content container */
.step-content{
  position:absolute;inset:0;padding:clamp(28px,4vh,44px) clamp(32px,4vw,56px);
  display:none;flex-direction:column;gap:0;
}
.step-content.active{display:flex;}

/* Chalk lines */
.chalk-line{
  font-family:'Caveat',cursive;font-size:clamp(22px,2.8vw,30px);
  line-height:1.7;opacity:0;
  white-space:nowrap;overflow:hidden;
}
.chalk-line.show{animation:chalkWrite .8s ease-out forwards;}
.chalk-line.pink{color:#f472b6;}
.chalk-line.cyan{color:#22d3ee;}
.chalk-line.green{color:#34d399;}
.chalk-line.amber{color:#fbbf24;}
.chalk-line.purple{color:#c084fc;}
.chalk-line.white{color:rgba(255,255,255,.7);}
.chalk-line.dim{color:rgba(255,255,255,.3);font-size:clamp(16px,1.8vw,20px);}

.chalk-line .em{font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;}
.chalk-line .box{
  display:inline-block;padding:2px 10px;border-radius:6px;
  border:1.5px solid currentColor;margin:0 4px;
}

/* Spacer between thought groups */
.chalk-gap{height:clamp(10px,1.5vh,16px);}

/* "Your turn" prompt */
.your-turn{
  position:absolute;bottom:0;left:0;right:0;
  padding:16px clamp(32px,4vw,56px);
  background:linear-gradient(to top,rgba(15,22,32,.95),rgba(15,22,32,.6),transparent);
  display:flex;align-items:center;gap:14px;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.your-turn.show{transform:translateY(0);}

.yt-badge{
  padding:6px 14px;border-radius:8px;font-size: 14px;font-weight:700;
 letter-spacing:.3px;
  display:flex;align-items:center;gap:6px;
}
.yt-badge.c1{background:rgba(168,85,247,.08);color:#a855f7;}
.yt-badge.c2{background:rgba(236,72,153,.08);color:#ec4899;}
.yt-badge.c3{background:rgba(6,182,212,.08);color:#06b6d4;}
.yt-badge.c4{background:rgba(34,211,167,.08);color:#22d3a7;}
.yt-badge svg{width:12px;height:12px;}

.yt-text{flex:1;font-size:15px;color:rgba(255,255,255,.45);}
.yt-btn{
  padding:10px 22px;border-radius:12px;border:none;
  font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;
  display:flex;align-items:center;gap:7px;color:white;
}
.yt-btn svg{width:13px;height:13px;}
.yt-btn.c1{background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 4px 14px rgba(168,85,247,.2);}
.yt-btn.c2{background:linear-gradient(135deg,#ec4899,#db2777);box-shadow:0 4px 14px rgba(236,72,153,.2);}
.yt-btn.c3{background:linear-gradient(135deg,#06b6d4,#0891b2);box-shadow:0 4px 14px rgba(6,182,212,.2);}
.yt-btn.c4{background:linear-gradient(135deg,#22d3a7,#14b8a6);box-shadow:0 4px 14px rgba(34,211,167,.2);}
.yt-btn:hover{transform:translateY(-1px);}

/* Complete state */
.complete-overlay{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:rgba(15,22,32,.92);z-index:20;
}
.complete-overlay.show{display:flex;}
.co-badges{display:flex;gap:6px;}
.co-badge{
  padding:6px 14px;border-radius:8px;font-size:14.5px;font-weight:700;
 background:rgba(34,211,167,.06);
  color:#22d3a7;display:flex;align-items:center;gap:5px;
}
.co-badge svg{width:10px;height:10px;}
.co-title{font-size:clamp(20px,2.6vw,28px);font-weight:700;color:#22d3a7;}
.co-sub{font-size:15px;color:rgba(255,255,255,.35);text-align:center;max-width:400px;}
.co-btn{
  padding:12px 28px;border-radius:12px;border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .4s;
  display:flex;align-items:center;gap:8px;margin-top:8px;
  background:linear-gradient(135deg,#22d3a7,#06b6d4);color:white;
  box-shadow:0 4px 20px rgba(34,211,167,.25);
}
.co-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(34,211,167,.35);}
.co-btn svg{width:14px;height:14px;}

@keyframes chalkWrite{from{opacity:0;max-width:0;}to{opacity:1;max-width:100vw;}}
@keyframes pillFill{from{width:0}to{width:100%}}
@media(max-width:600px){.sidebar{display:none;}.speed{display:none;}}



.shell{display:flex;height:100vh;position:relative;z-index:1;}
.sidebar{width:60px;background:rgba(10,10,16,.92);backdrop-filter:blur(14px);border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;flex-shrink:0;}
.s-logo{font-weight:700;font-size:16px;color:#a855f7;margin-bottom:20px;}
.s-i{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.26);cursor:pointer;transition:all .2s;}
.s-i.on{background:rgba(168,85,247,.12);color:#a855f7;}

.page{flex:1;display:flex;flex-direction:column;height:100vh;}
.topbar{padding:10px clamp(20px,2.5vw,36px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);}
.back{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.5);font-size:15px;font-weight:500;cursor:pointer;padding:6px 12px;border-radius:10px;transition:all .2s;border:none;background:none;}
.back:hover{background:rgba(255,255,255,.04);color:#f0f0f5;}
.flow-badge{padding:5px 14px;border-radius:8px;font-size:14.5px;font-weight:600;background:rgba(245,158,11,.06);color:#f59e0b;display:flex;align-items:center;gap:6px;}
.flow-badge svg{width:12px;height:12px;}

.content{flex:1;display:flex;min-height:0;}

/* LEFT — question + one-liner context */
.left{flex:0 0 28%;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.05);}

.left-top{padding:clamp(18px,3vh,28px) clamp(16px,1.5vw,24px);display:flex;flex-direction:column;gap:16px;}
.lt-title{font-size:clamp(17px,1.8vw,22px);font-weight:700;line-height:1.3;}
.lt-title .hl{color:#f59e0b;}
.lt-sub{font-size:14.5px;color:rgba(255,255,255,.3);line-height:1.5;}

.q-card{padding:14px 16px;border-radius:14px;background:rgba(168,85,247,.015);border:1px solid rgba(168,85,247,.05);}
.qc-label{font-size:13px;letter-spacing:.6px;color:#a855f7;margin-bottom:5px;}
.qc-text{font-size:14.5px;color:rgba(255,255,255,.5);line-height:1.55;}

/* Spacer pushes hint to bottom */
.left-spacer{flex:1;}

.left-hint{
  padding:clamp(14px,2vh,18px) clamp(16px,1.5vw,24px);
  border-top:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;gap:8px;
}
.lh-icon{width:22px;height:22px;border-radius:6px;flex-shrink:0;background:rgba(34,211,167,.05);display:flex;align-items:center;justify-content:center;}
.lh-icon svg{width:10px;height:10px;color:#22d3a7;}
.lh-text{font-size:14.5px;color:rgba(255,255,255,.25);font-style:italic;line-height:1.4;}

/* ===== RIGHT — Upload ===== */
.right{flex:1;display:flex;flex-direction:column;}
.right-body{flex:1;display:flex;flex-direction:column;padding:clamp(18px,3vh,28px) clamp(20px,2vw,32px);gap:clamp(14px,2vh,18px);min-height:0;
             width: 100%;
}

/* Upload zone */
.upload-zone{
  flex:1;min-height:0;border-radius:18px;
  border:2px dashed rgba(245,158,11,.1);
  background:rgba(245,158,11,.006);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;cursor:pointer;transition:all .4s;text-align:center;
  position:relative;padding:20px;
}
.upload-zone:hover{border-color:rgba(245,158,11,.2);background:rgba(245,158,11,.012);}
.upload-zone.has-file{
  border-style:solid;border-color:rgba(34,211,167,.15);
  background:rgba(34,211,167,.006);justify-content:flex-start;
  padding:14px;cursor:default;
}

.uz-icon{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,rgba(245,158,11,.07),rgba(168,85,247,.03));
  display:flex;align-items:center;justify-content:center;transition:all .3s;
}
.upload-zone:hover .uz-icon{transform:scale(1.04);}
.uz-icon svg{width:24px;height:24px;}
.uz-title{font-size:15px;font-weight:600;}
.uz-sub{font-size: 14px;color:rgba(255,255,255,.25);}

.uz-methods{display:flex;gap:8px;margin-top:4px;}
.um{
  padding:8px 14px;border-radius:10px;
  background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.05);
  font-size: 14px;color:rgba(255,255,255,.4);
  display:flex;align-items:center;gap:6px;cursor:pointer;transition:all .2s;
}
.um:hover{border-color:rgba(245,158,11,.12);background:rgba(245,158,11,.012);color:rgba(255,255,255,.55);}
.um svg{width:14px;height:14px;color:#f59e0b;}

/* Uploaded state */
.uz-uploaded{display:none;flex-direction:column;gap:10px;width:100%;height:100%;}
.uz-uploaded.show{display:flex;}
.upload-zone.has-file .uz-icon,
.upload-zone.has-file .uz-title,
.upload-zone.has-file .uz-sub,
.upload-zone.has-file .uz-methods{display:none;}

.uz-preview-large{
  flex:1;min-height:0;border-radius:12px;
  background:rgba(255,255,255,.015);border:1px solid rgba(34,211,167,.06);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.uz-preview-large img{max-width:100%;max-height:100%;object-fit:contain;}

.uz-file-bar{display:flex;align-items:center;gap:10px;}
.uzf-dot{width:8px;height:8px;border-radius:50%;background:#22d3a7;flex-shrink:0;}
.uzf-name{font-size: 14px;font-weight:600;color:#22d3a7;flex:1;}
.uzf-remove{
  padding:4px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.05);
  background:none;color:rgba(255,255,255,.25);font-size:15px;
  cursor:pointer;transition:all .2s;
}
.uzf-remove:hover{border-color:rgba(236,72,153,.1);color:#ec4899;}

/* Or + type */
.or-div{
  display:flex;align-items:center;gap:12px;font-size:15px;
  color:rgba(255,255,255,.1);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;
}
.or-div::before,.or-div::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.035);}

.type-input{
  width:100%;border-radius:14px;flex-shrink:0;
  background:rgba(12,12,20,.4);border:1px solid rgba(255,255,255,.04);
  padding:12px 16px;color:#f0f0f5;font-size:15px;
  resize:none;outline:none;height:72px;line-height:1.55;transition:border-color .3s;
}
.type-input:focus{border-color:rgba(245,158,11,.15);}
.type-input::placeholder{color:rgba(255,255,255,.1);}

/* Footer */
.right-footer{
  padding:clamp(10px,1.5vh,14px) clamp(20px,2vw,32px);
  border-top:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;gap:12px;
}
.rf-lang{display:flex;align-items:center;gap:4px;font-size:15px;color:rgb(255 255 255 / 38%);flex:1;}
.rf-lang svg{width:20px;height:20px;opacity:.3;}

.submit-btn{
  padding:11px 24px;border-radius:12px;border:none;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:all .4s;
  display:flex;align-items:center;gap:7px;flex-shrink:0;
  background:linear-gradient(135deg,#f59e0b,#f97316);color:white;
  box-shadow:0 4px 16px rgba(245,158,11,.2);
  opacity:.3;pointer-events:none;
}
.submit-btn.active{opacity:1;pointer-events:auto;}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(245,158,11,.3);}
.submit-btn svg{width:14px;height:14px;}

@keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
@keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}
@media(max-width:800px){.content{flex-direction:column;}.left{flex:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.05);}.left-spacer,.left-hint{display:none;}.right{flex:1;min-height:0;}}
@media(max-width:600px){.sidebar{display:none;}}





.content{flex:1;display:flex;min-height:0;}

/* LEFT */
.left{
  flex:0 0 30%;display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.05);
  background:rgba(34,211,167,.005);
}
.left-header{
  padding:clamp(16px,2vh,22px) clamp(16px,1.5vw,24px);
  border-bottom:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;gap:8px;
}
.lh-icon{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  background:rgba(34,211,167,.06);display:flex;align-items:center;justify-content:center;
}
.lh-icon svg{width:13px;height:13px;color:#22d3a7;}
.lh-text{font-size:14.5px;letter-spacing:.5px;text-transform:uppercase;color:#22d3a7;}

.steps-list{
  flex:1;padding:clamp(14px,2vh,20px) clamp(16px,1.5vw,24px);
  display:flex;flex-direction:column;gap:0;
}
.recap-step{
  display:flex;align-items:flex-start;gap:10px;
  padding:clamp(10px,1.5vh,14px) 0;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.recap-step:last-child{border-bottom:none;}
.rs-num{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:rgba(34,211,167,.08);color:#22d3a7;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.rs-body{flex:1;min-width:0;}
.rs-title{font-size:15px;font-weight:600;color:rgba(255,255,255,.75);line-height:1.3;}
.rs-desc{font-size:14.5px;color:rgba(255,255,255,.3);line-height:1.4;margin-top:3px;}
.rs-check{font-size:13px;color:#22d3a7;display:flex;align-items:center;gap:3px;margin-top:4px;}
.rs-check svg{width:9px;height:9px;}

.next-info{
  padding:clamp(12px,1.5vh,16px) clamp(16px,1.5vw,24px);
  border-top:1px solid rgba(255,255,255,.04);
  display:flex;align-items:flex-start;gap:8px;
}
.ni-icon{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:rgba(6,182,212,.05);display:flex;align-items:center;justify-content:center;
}
.ni-icon svg{width:12px;height:12px;color:#06b6d4;}
.ni-text{font-size:14.5px;color:rgba(255,255,255,.3);line-height:1.5;}
.ni-text strong{color:rgba(255,255,255,.5);font-weight:600;}

/* RIGHT */
.right{flex:1;display:flex;flex-direction:column;background:rgba(168,85,247,.005);}
.right-header{
  padding:clamp(16px,2vh,22px) clamp(20px,2vw,32px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.rh-title{font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:-.2px;}
.rh-title .hl{background:var(--gradient-cta);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.rh-sub{font-size:12.5px;color:rgba(255,255,255,.35);margin-top:4px;line-height:1.4;}

.right-body{
  flex:1;display:flex;flex-direction:column;
  padding:clamp(16px,2.5vh,24px) clamp(20px,2vw,32px);
  gap:clamp(12px,1.8vh,18px);min-height:0;
}

.upload-zone{
  border-radius:16px;border:2px dashed rgba(168,85,247,.1);
  background:rgba(168,85,247,.01);
  padding:clamp(20px,3vh,32px) 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  cursor:pointer;transition:all .4s;text-align:center;
}
.upload-zone:hover{border-color:rgba(168,85,247,.22);background:rgba(168,85,247,.02);}
.upload-zone.has-file{border-style:solid;border-color:rgba(34,211,167,.15);background:rgba(34,211,167,.01);padding:14px 16px;}

.uz-row{display:flex;align-items:center;gap:14px;}
.uz-icon{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(236,72,153,.04));
  display:flex;align-items:center;justify-content:center;transition:all .3s;
}
.upload-zone:hover .uz-icon{transform:scale(1.04);box-shadow:0 0 16px rgba(168,85,247,.06);}
.uz-icon svg{width:22px;height:22px;}
.uz-text-col{text-align:left;}
.uz-title{font-size:15px;font-weight:600;}
.uz-hint{font-size:11.5px;color:rgba(255,255,255,.3);line-height:1.4;margin-top:2px;}
.uz-hint strong{color:#a855f7;font-weight:600;}

.uz-methods{display:flex;gap:8px;margin-top:2px;}
.um{
  padding:8px 14px;border-radius:10px;
  background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.05);
  font-size: 14px;color:rgba(255,255,255,.45);
  display:flex;align-items:center;gap:6px;cursor:pointer;transition:all .2s;
}
.um:hover{border-color:rgba(168,85,247,.12);background:rgba(168,85,247,.015);color:rgba(255,255,255,.6);}
.um svg{width:14px;height:14px;color:#a855f7;}

.uz-uploaded{display:none;align-items:center;gap:12px;width:100%;}
.uz-uploaded.show{display:flex;}
.uz-preview{
  width:52px;height:52px;border-radius:10px;
  background:rgba(34,211,167,.04);border:1px solid rgba(34,211,167,.1);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
}
.uz-preview img{width:100%;height:100%;object-fit:cover;}
.uz-preview svg{width:20px;height:20px;color:#22d3a7;}
.uz-file-info{flex:1;text-align:left;}
.uz-file-name{font-size:15px;font-weight:600;color:#22d3a7;}
.uz-file-size{font-size:15px;color:rgba(255,255,255,.25);margin-top:2px;}
.uz-remove{
  padding:5px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.05);
  background:none;color:rgba(255,255,255,.3);font-size:15px;
  cursor:pointer;transition:all .2s;
}
.uz-remove:hover{border-color:rgba(236,72,153,.12);color:#ec4899;}

.upload-zone.has-file .uz-row,
.upload-zone.has-file .uz-methods{display:none;}

.or-div{
  display:flex;align-items:center;gap:12px;font-size:15px;
  color:rgb(255 255 255 / 38%);text-transform:uppercase;letter-spacing:.5px;
}
.or-div::before,.or-div::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.04);}

.type-input{
  flex:1;min-height:0;width:100%;border-radius:14px;
  background:rgba(12,12,20,.4);border:1px solid rgba(255,255,255,.04);
  padding:14px 16px;color:#f0f0f5;font-size:13.5px;
  resize:none;outline:none;line-height:1.6;transition:border-color .3s;
}
.type-input:focus{border-color:rgba(168,85,247,.18);}
.type-input::placeholder{color:rgba(255,255,255,.14);}

.right-footer{
  padding:clamp(10px,1.5vh,14px) clamp(20px,2vw,32px);
  border-top:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;gap:12px;
}
.lang-bar{display:flex;align-items:center;gap:6px;flex:1;}
.lang-globe{display:flex;align-items:center;gap:4px;font-size:15px;color:rgba(255,255,255,.2);}
.lang-globe svg{width:11px;height:11px;opacity:.35;}
.lang-chips{display:flex;gap:3px;margin-left:4px;}
.lc{padding:3px 8px;border-radius:6px;font-size:13px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.25);}

.submit-btn{
  padding:11px 28px;border-radius:12px;border:none;
  background:var(--gradient-cta);
  color:white;font-size:14px;font-weight:600;
  cursor:pointer;transition:all .4s;
  display:flex;align-items:center;gap:7px;
  opacity:.3;pointer-events:none;flex-shrink:0;
}
.submit-btn.active{opacity:1;pointer-events:auto;}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(168,85,247,.3);}
.submit-btn svg{width:14px;height:14px;}
.top-center{
     display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 140px;
}
.step-pills{display:flex;gap:4px;}
.sp{width:clamp(40px,5vw,56px);height:6px;border-radius:4px;background:#22d3a7;}
.sp-label{font-size:14.5px;color:#22d3a7;white-space:nowrap;}

@keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
@keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}

@media(max-width:800px){
  .content{flex-direction:column;}
  .left{flex:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.05);}
  .steps-list{flex-direction:row;gap:0;}
  .recap-step{flex:1;border-bottom:none;border-right:1px solid rgba(255,255,255,.03);padding:10px 12px;}
  .recap-step:last-child{border-right:none;}
  .rs-desc{display:none;}
  .next-info{display:none;}
  .right{flex:1;min-height:0;}
}
@media(max-width:600px){.sidebar{display:none;}}



.btn{
  cursor: pointer;
}


.page{flex:1;display:flex;flex-direction:column;height:100vh;}

/* Topbar */
.topbar{padding:10px clamp(16px,2vw,28px);display:flex;align-items:center;gap:10px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(10,14,22,.7);backdrop-filter:blur(10px);}
.back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.4);font-size:12px;cursor:pointer;padding:5px 10px;border-radius:8px;border:none;background:none;}
.back svg{width:13px;height:13px;}

/* Flow breadcrumb */
.flow{display:flex;align-items:center;gap:5px;margin-left:auto;}
.fl{font-size:9px;letter-spacing:.3px;padding:3px 8px;border-radius:5px;transition:all .3s;}
.fl.done{color:#22d3a7;background:rgba(34,211,167,.04);}
.fl.on{color:#a855f7;background:rgba(168,85,247,.06);}
.fl.off{color:rgba(255,255,255,.1);}
.fl-d{width:8px;text-align:center;color:rgba(255,255,255,.06);font-size:8px;}

/* Screens */
.sc{display:none;flex:1;flex-direction:column;min-height:0;}
.sc.on {
    display: flex;
    width: 1280px;
}

/* ====== S1: UPLOAD ====== */
.s1-body{
  flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 2.5vh, 24px) clamp(28px, 4vw, 56px);
    gap: clamp(12px, 2vh, 16px);
    /* max-width: 700px; */
    margin: 0 auto;
    width: 100%;
}
.s1-title{font-size: clamp(20px, 2.6vw, 32px);
    font-weight: 700;
    text-align: center;}
.s1-sub{font-size:15px;color:rgba(255,255,255,.3);text-align:center;}

.u-tabs{display:flex;justify-content:center;gap:3px;background:rgba(255,255,255,.015);border-radius:11px;padding:3px;border:1px solid rgba(255,255,255,.04);align-self:center;}
.u-tab{
  padding: 7px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: none;
    color: rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    gap: 5px;
}
.u-tab svg{width:13px;height:13px;}
.u-tab.on{background:rgba(168,85,247,.1);color:#a855f7;}

.u-zone{flex:1;min-height:0;border-radius:16px;border:2px dashed rgba(168,85,247,.1);background:rgba(168,85,247,.006);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .4s;position:relative;padding:14px;}
.u-zone:hover{border-color:rgba(168,85,247,.18);background:rgba(168,85,247,.012);}
.u-zone.has{border-style:solid;border-color:rgba(34,211,167,.15);background:rgba(34,211,167,.006);cursor:default;}
.uz-ic{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(236,72,153,.05));display:flex;align-items:center;justify-content:center;}
.uz-ic svg{width:20px;height:20px;color:#a855f7;}
.uz-t{font-size:13px;font-weight:600;}.uz-s{font-size:11px;color:rgba(255,255,255,.2);}
.u-zone.has .uz-ic,.u-zone.has .uz-t,.u-zone.has .uz-s{display:none;}
.uz-prev{
      flex: 1;
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, .015);
    border: 1px solid rgba(34, 211, 167, .06);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: 'Caveat', cursive;
    font-size: 27px;
    color: rgba(255, 255, 255, .25);
    line-height: 1.6;
}
.uz-prev.show{display:flex;}
.uz-bar{display:none;align-items:center;gap:8px;width:100%;}.uz-bar.show{display:flex;}
.uzb-dot{width:7px;height:7px;border-radius:50%;background:#22d3a7;}
.uzb-name{font-size:11px;font-weight:600;color:#22d3a7;flex:1;}
.uzb-rm{padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.05);background:none;color:rgba(255,255,255,.2);font-size:14px;cursor:pointer;}

.s1-foot{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.spacer{flex:1;}
.btn-g{padding:9px 20px;border-radius:12px;font-size:12px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.4);}
.btn-p{padding:9px 22px;border-radius:12px;border:none;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;background:linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);color:white;box-shadow:0 3px 14px rgba(168,85,247,.2);opacity:.3;pointer-events:none;transition:all .3s;}
.btn-p.on{opacity:1;pointer-events:auto;}
.btn-p:hover{transform:translateY(-1px);}
.btn-p svg{width:12px;height:12px;}
input[type="file"]{display:none;}

/* ====== S2: REVIEW ====== */
.s2-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.5vh,24px);padding:20px;}
.r-ic{width:44px;height:44px;border-radius:50%;background:rgba(34,211,167,.08);border:2px solid rgba(34,211,167,.12);display:flex;align-items:center;justify-content:center;animation:popIn .4s ease-out;}
.r-ic svg{width:20px;height:20px;color:#22d3a7;}
.r-t{font-size:clamp(20px,2.6vw,28px);font-weight:700;text-align:center;}.r-t .hl{color:#22d3a7;}
.r-s{font-size:13px;color:rgba(255,255,255,.3);}

.r-card{width:100%;max-width:520px;border-radius:16px;padding:clamp(14px,2vh,20px);background:rgba(255,255,255,.012);border:1px solid rgba(34,211,167,.06);display:flex;gap:clamp(14px,2vw,20px);animation:slideUp .4s ease-out .15s both;}
.r-photo{width:clamp(90px,12vw,120px);height:clamp(110px,14vw,140px);border-radius:10px;flex-shrink:0;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);padding:8px;font-family:'Caveat',cursive;font-size:10px;color:rgba(255,255,255,.2);line-height:1.4;overflow:hidden;}
.r-body{flex:1;display:flex;flex-direction:column;gap:6px;}
.r-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;background:rgba(34,211,167,.04);font-size:9px;color:#22d3a7;width:fit-content;}
.r-badge svg{width:9px;height:9px;}
.r-ct{font-size:14px;font-weight:700;}.r-cs{font-size:11.5px;color:rgba(255,255,255,.3);line-height:1.45;}
.r-ch{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:rgba(255,255,255,.2);cursor:pointer;margin-top:auto;padding-top:4px;}
.r-ch:hover{color:#a855f7;}
.r-ch svg{width:10px;height:10px;}

/* ====== S3: ANALYZING ====== */
.s3-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
.a-spin{width:52px;height:52px;border-radius:50%;border:3px solid rgba(168,85,247,.08);border-top-color:#a855f7;animation:spin .8s linear infinite;}
.a-t{font-size:18px;font-weight:600;}.a-s{font-size:13px;color:rgba(255,255,255,.25);}
.a-list{display:flex;flex-direction:column;gap:7px;margin-top:6px;min-width:220px;}
.a-item{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.12);transition:color .3s;}
.a-item.on{color:rgba(255,255,255,.45);}.a-item.done{color:#22d3a7;}
.a-item svg{width:13px;height:13px;flex-shrink:0;}
.a-item .chk{display:none;}.a-item.done .chk{display:block;}.a-item.done .ld{display:none;}

/* ====== S4: DIAGNOSIS ====== */
.s4-body{flex:1;display:flex;flex-direction:column;padding:clamp(16px,2.5vh,24px) clamp(24px,3vw,44px);gap:clamp(12px,2vh,18px);}
.d-hdr{display:flex;align-items:flex-start;gap:12px;}
.d-ic{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:rgba(245,158,11,.06);display:flex;align-items:center;justify-content:center;}
.d-ic svg{width:18px;height:18px;color:#f59e0b;}
.d-t{font-size:clamp(18px,2.2vw,24px);font-weight:700;line-height:1.25;}.d-t .hl{color:#f59e0b;}
.d-s{font-size:12px;color:rgba(255,255,255,.3);margin-top:3px;}

.d-steps{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0;}
.d-steps::-webkit-scrollbar{width:3px;}.d-steps::-webkit-scrollbar-thumb{background:rgba(255,255,255,.04);border-radius:3px;}
.ds{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.008);border:1px solid rgba(255,255,255,.03);}
.ds-d{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.ds-d svg{width:10px;height:10px;}
.ds-d.grn{background:rgba(34,211,167,.08);color:#22d3a7;}
.ds-d.amb{background:rgba(245,158,11,.08);color:#f59e0b;}
.ds-b{flex:1;}
.ds-l{font-size:9px;letter-spacing:.3px;margin-bottom:2px;}
.ds-l.grn{color:#22d3a7;}.ds-l.amb{color:#f59e0b;}
.ds-c{font-family:'Caveat',cursive;font-size:clamp(17px,1.8vw,21px);color:rgba(255,255,255,.5);line-height:1.4;}
.ds-c .strk{text-decoration:line-through;text-decoration-color:rgba(236,72,153,.3);color:rgba(255,255,255,.2);}
.ds-tg{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:5px;font-size:8px;margin-top:3px;}
.ds-tg.grn{background:rgba(34,211,167,.03);color:#22d3a7;}
.ds-tg.amb{background:rgba(245,158,11,.03);color:#f59e0b;}

.d-ins{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:rgba(168,85,247,.01);border:1px solid rgba(168,85,247,.05);flex-shrink:0;}
.di-ic{width:22px;height:22px;border-radius:6px;flex-shrink:0;background:rgba(168,85,247,.06);display:flex;align-items:center;justify-content:center;}
.di-ic svg{width:10px;height:10px;color:#a855f7;}
.di-tx{font-size:12px;color:rgba(255,255,255,.4);}
.di-tx strong{color:#a855f7;}
.d-foot{display:flex;align-items:center;gap:10px;flex-shrink:0;}

/* ====== S5: DEPTH SELECTOR ====== */
.s5-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(20px,4vh,40px) clamp(24px,4vw,48px);gap:clamp(22px,3.5vh,32px);}
.s5-t{font-size:clamp(20px,2.6vw,28px);font-weight:700;text-align:center;}
.dp-cards{display:flex;gap:clamp(12px,2vw,20px);width:100%;max-width:600px;}
.dp{
  flex:1;border-radius:20px;cursor:pointer;
  padding:clamp(22px,3vh,32px) clamp(18px,2vw,24px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.8vh,16px);
  border:2px solid rgba(255,255,255,.03);background:rgba(255,255,255,.006);
  transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;
}
.dp:hover{background:rgba(255,255,255,.012);}
.dp.sel{border-color:var(--ac);background:var(--bg);}
.dp.sel .dp-glow{opacity:1;}
.dp.sel .dp-time{color:var(--ac);}
.dp-glow{position:absolute;inset:0;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .5s;}
.dp-ic{width:clamp(52px,7vh,64px);height:clamp(52px,7vh,64px);border-radius:16px;display:flex;align-items:center;justify-content:center;transition:all .4s;}
.dp-ic svg{width:clamp(24px,3vh,28px);height:clamp(24px,3vh,28px);}
.dp.sel .dp-ic{box-shadow:0 0 28px var(--glow);}
.dp-name{font-size:clamp(15px,1.7vw,18px);font-weight:700;}
.dp-desc{font-size:clamp(11.5px,1.1vw,13px);color:rgba(255,255,255,.25);line-height:1.4;}
.dp-time{font-size:10px;color:rgba(255,255,255,.1);transition:color .3s;}
.dp-rec{position:absolute;top:clamp(8px,1.2vh,12px);right:clamp(8px,1.2vw,12px);padding:3px 8px;border-radius:5px;font-size:8px;font-weight:700;opacity:0;}
.dp.rec .dp-rec{opacity:1;}

.dp[data-v="guided"]{--ac:#06b6d4;--bg:rgba(6,182,212,.005);--glow:rgba(6,182,212,.12);}
.dp[data-v="guided"] .dp-ic{background:rgba(6,182,212,.06);color:#06b6d4;}
.dp[data-v="guided"] .dp-glow{background:radial-gradient(circle at 50% 30%,rgba(6,182,212,.04),transparent 65%);}
.dp[data-v="guided"] .dp-rec{background:rgba(6,182,212,.06);color:#06b6d4;}

.dp[data-v="full"]{--ac:#a855f7;--bg:rgba(168,85,247,.005);--glow:rgba(168,85,247,.12);}
.dp[data-v="full"] .dp-ic{background:rgba(168,85,247,.06);color:#a855f7;}
.dp[data-v="full"] .dp-glow{background:radial-gradient(circle at 50% 30%,rgba(168,85,247,.04),transparent 65%);}
.dp[data-v="full"] .dp-rec{background:rgba(168,85,247,.06);color:#a855f7;}

.go{padding:13px 30px;border-radius:12px;border:none;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;color:white;transition:all .4s;}
.go svg{width:14px;height:14px;}
.go.guided{background:linear-gradient(135deg,#06b6d4,#22d3a7);box-shadow:0 4px 18px rgba(6,182,212,.25);}
.go.full{background:linear-gradient(90deg, #FB00FF 0%, #6300F4 100%);box-shadow:0 4px 18px rgba(168,85,247,.25);}
.go:hover{transform:translateY(-2px);}
.s5-hint{font-size:11px;color:rgba(255,255,255,.12);}

/* ====== S6: TEACH ====== */
.teach{flex:1;display:flex;min-height:0;background:#0f1620;}
.tp{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;}
.tp.left{flex:0 0 32%;border-right:1px solid rgba(255,255,255,.03);}
.tp-h{padding:10px clamp(12px,1.5vw,18px);border-bottom:1px solid rgba(255,255,255,.03);display:flex;align-items:center;gap:6px;flex-shrink:0;}
.tp-tg{padding:3px 8px;border-radius:5px;font-size:9px;font-weight:700;display:flex;align-items:center;gap:3px;}
.tp-tg svg{width:9px;height:9px;}
.tp-tg.y{background:rgba(34,211,167,.03);color:#22d3a7;}
.tp-tg.t{background:rgba(168,85,247,.03);color:#a855f7;}
.tp-tt{font-size:10px;color:rgba(255,255,255,.2);}

.tp-pills{margin-left:auto;display:flex;align-items:center;gap:3px;}
.tpill{width:clamp(20px,3vw,30px);height:5px;border-radius:3px;transition:all .3s;}
.tpill.done{background:#22d3a7;}.tpill.on{background:#a855f7;animation:pillPulse 1.5s ease-in-out infinite;}.tpill.skip{background:rgba(34,211,167,.12);}.tpill.off{background:rgba(255,255,255,.03);}
.tp-lbl{font-size:9px;color:#a855f7;margin-left:4px;white-space:nowrap;}

.tp-bd{
  flex:1;overflow-y:auto;padding:clamp(12px,2vh,18px) clamp(12px,1.5vw,18px);
  display:flex;flex-direction:column;gap:0;
}
.tp-bd::-webkit-scrollbar{width:3px;}.tp-bd::-webkit-scrollbar-thumb{background:rgba(255,255,255,.04);border-radius:3px;}

.board{
  flex:1;overflow-y:auto;padding:clamp(12px,2vh,18px) clamp(12px,1.5vw,18px);
  display:flex;flex-direction:column;gap:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(255,255,255,.01) 31px,rgba(255,255,255,.01) 32px),repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(255,255,255,.01) 31px,rgba(255,255,255,.01) 32px);
}
.board::-webkit-scrollbar{width:3px;}.board::-webkit-scrollbar-thumb{background:rgba(255,255,255,.04);border-radius:3px;}

.ck{font-family:'Caveat',cursive;font-size:clamp(18px,2.2vw,24px);line-height:1.65;opacity:0;white-space:pre-wrap;}
.ck.v{opacity:1;animation:chalkIn .5s ease-out;}
.ck.pk{color:#f472b6;}.ck.cy{color:#22d3ee;}.ck.gn{color:#34d399;}.ck.am{color:#fbbf24;}.ck.wh{color:rgba(255,255,255,.6);}.ck.dm{color:rgba(255,255,255,.2);font-size:clamp(14px,1.4vw,17px);}
.ck .em{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}
.ck .bx{display:inline-block;padding:1px 8px;border-radius:5px;border:1.5px solid currentColor;margin:0 3px;}
.gp{height:clamp(6px,1vh,10px);}

/* Student ok badge (left) */
.sok{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;margin:4px 0;background:rgba(34,211,167,.008);border:1px solid rgba(34,211,167,.04);opacity:0;transition:opacity .4s;}
.sok.v{opacity:1;}
.sok-d{width:18px;height:18px;border-radius:50%;background:rgba(34,211,167,.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sok-d svg{width:9px;height:9px;color:#22d3a7;}
.sok-l{font-size:9px;color:#22d3a7;font-weight:600;}
.sok-v{font-family:'Caveat',cursive;font-size:15px;color:rgba(255,255,255,.25);margin-top:1px;}

.serr{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;margin:4px 0;background:rgba(245,158,11,.005);border:1px dashed rgba(245,158,11,.06);opacity:0;transition:opacity .4s;}
.serr.v{opacity:1;}
.serr svg{width:14px;height:14px;color:#f59e0b;flex-shrink:0;}
.serr span{font-size:10px;color:rgba(245,158,11,.4);font-style:italic;}

/* Phase divider */
.pdv{display:flex;align-items:center;gap:6px;margin:6px 0;opacity:0;transition:opacity .3s;}
.pdv.v{opacity:1;}
.pdv-l{flex:1;height:1px;background:rgba(255,255,255,.03);}
.pdv-t{font-size:8px;letter-spacing:.4px;padding:2px 7px;border-radius:4px;background:rgba(6,182,212,.03);color:#06b6d4;}

/* Checkpoint */
.cpb{position:absolute;bottom:0;left:0;right:0;padding:12px clamp(12px,1.5vw,18px);background:linear-gradient(to top,rgba(15,22,32,.96),rgba(15,22,32,.7),transparent);display:flex;align-items:center;gap:8px;transform:translateY(100%);transition:transform .45s cubic-bezier(.16,1,.3,1);}
.cpb.show{transform:translateY(0);}
.cpb-q{flex:1;font-size:11px;color:rgba(255,255,255,.3);}
.cpb-b{padding:6px 14px;border-radius:12px;border:1px solid;font-size:10px;font-weight:600;cursor:pointer;background:none;}
.cpb-b.y{border-color:rgba(34,211,167,.1);color:#22d3a7;}.cpb-b.y:hover{background:rgba(34,211,167,.05);}
.cpb-b.n{border-color:rgba(245,158,11,.1);color:#f59e0b;}.cpb-b.n:hover{background:rgba(245,158,11,.05);}

/* Teach footer */
.tf{padding:10px clamp(16px,2vw,24px);border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:10px;flex-shrink:0;background:rgba(10,14,22,.7);}
.tf-h{flex:1;font-size:10px;color:rgba(255,255,255,.12);}
.tf-b{padding:10px 22px;border-radius:12px;border:none;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,#22d3a7,#06b6d4);color:white;box-shadow:0 4px 16px rgba(34,211,167,.2);opacity:.3;pointer-events:none;transition:all .3s;}
.tf-b.on{opacity:1;pointer-events:auto;}
.tf-b:hover{transform:translateY(-1px);}
.tf-b svg{width:13px;height:13px;}

/* Anims */
@keyframes oD1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,25px);}}
@keyframes oD2{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,-20px);}}
@keyframes popIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes slideUp{from{transform:translateY(14px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes chalkIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:translateX(0);}}
@keyframes pillPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@media(max-width:700px){.sidebar{display:none;}.teach{flex-direction:column;}.tp.left{flex:none;max-height:28vh;border-right:none;border-bottom:1px solid rgba(255,255,255,.03);}.dp-cards{flex-direction:column;max-width:320px;}}










/* =================================
   1920px and above (Large Desktop)
================================= */
@media (min-width: 1800px) {
  .main{
    max-width: 1800px;
  }
  .page{
           max-width: 1800px;
        padding-left: 60px;
        margin: auto;
  }
   .top-bar, .topbar {
    max-width: 1800px;
  }



}

/* ============================================
   LOGIN / AUTH PAGE STYLES
   ============================================ */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  padding: 20px;
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  animation: fadeUp 0.6s ease;
}

.login-brand {
  text-align: center;
  margin-bottom: 32px;
}

.login-jellyfish {
  width: 120px;
  height: auto;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.3));
  animation: floatLogin 3s ease-in-out infinite;
}

@keyframes floatLogin {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.login-title .purple {
  background: var(--accent-purple);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Auth Card */
.login-card {
  width: 100%;
  background: rgba(22, 22, 31, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(14px);
}

/* Tabs */
.login-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 28px;
}

.login-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-tab.active {
  background: var(--accent-purple);
  color: #fff;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.login-tab:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

/* Form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.login-field input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  transition: all 0.3s ease;
  outline: none;
}

.login-field input::placeholder {
  color: var(--text-muted);
}

.login-field input:focus {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.04);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

/* Submit Button */
.login-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient-cta);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.login-btn:active {
  transform: scale(0.98);
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Loader Spinner */
.login-btn-loader {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loginSpin 0.6s linear infinite;
}

@keyframes loginSpin {
  to { transform: rotate(360deg); }
}

/* Message */
.login-message {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

.login-message.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.login-message.success {
  background: rgba(34, 211, 167, 0.1);
  border: 1px solid rgba(34, 211, 167, 0.2);
  color: #22d3a7;
}

/* Confirm Code Message */
.login-confirm-msg {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Login Responsive */
@media (max-width: 640px) {
  .login-container {
    padding: 16px;
  }

  .login-card {
    padding: 24px 20px;
  }

  .login-title {
    font-size: 24px;
  }

  .login-jellyfish {
    width: 90px;
  }
}