pan-african-youth-internship

repository

loading code, commits, and activity

repositories

loading repo index

#1	/* ===== Reset & Base ===== */
#2	*,
#3	*::before,
#4	*::after {
#5	box-sizing: border-box;
#6	margin: 0;
#7	padding: 0;
#8	}
#9
#10	:root {
#11	--green-50: #f0fdf4;
#12	--green-100: #dcfce7;
#13	--green-200: #bbf7d0;
#14	--green-400: #4ade80;
#15	--green-500: #22c55e;
#16	--green-600: #16a34a;
#17	--green-700: #15803d;
#18	--green-800: #166534;
#19	--green-900: #14532d;
#20
#21	--gold-400: #facc15;
#22	--gold-500: #eab308;
#23
#24	--red-500: #ef4444;
#25	--red-600: #dc2626;
#26
#27	--gray-50: #f9fafb;
#28	--gray-100: #f3f4f6;
#29	--gray-200: #e5e7eb;
#30	--gray-300: #d1d5db;
#31	--gray-400: #9ca3af;
#32	--gray-500: #6b7280;
#33	--gray-600: #4b5563;
#34	--gray-700: #374151;
#35	--gray-800: #1f2937;
#36	--gray-900: #111827;
#37	--gray-950: #030712;
#38
#39	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
#40	"Helvetica Neue", Arial, sans-serif;
#41	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
#42
#43	color-scheme: light;
#44	font-family: var(--font-sans);
#45	line-height: 1.6;
#46	-webkit-font-smoothing: antialiased;
#47	}
#48
#49	html {
#50	scroll-behavior: smooth;
#51	}
#52
#53	body {
#54	background: #fff;
#55	color: var(--gray-800);
#56	}
#57
#58	a {
#59	color: inherit;
#60	text-decoration: none;
#61	}
#62
#63	img {
#64	max-width: 100%;
#65	display: block;
#66	}
#67
#68	/* ===== Layout ===== */
#69	.container {
#70	max-width: 1200px;
#71	margin: 0 auto;
#72	padding: 0 1.5rem;
#73	}
#74
#75	.section {
#76	padding: 6rem 0;
#77	}
#78
#79	.section-dark {
#80	background: var(--gray-50);
#81	}
#82
#83	.section-cta {
#84	background: linear-gradient(135deg, var(--green-700), var(--green-900));
#85	color: #fff;
#86	}
#87
#88	.section-header {
#89	text-align: center;
#90	max-width: 680px;
#91	margin: 0 auto 3.5rem;
#92	}
#93
#94	.section-tag {
#95	display: inline-block;
#96	font-family: var(--font-mono);
#97	font-size: 0.75rem;
#98	font-weight: 600;
#99	letter-spacing: 0.1em;
#100	text-transform: uppercase;
#101	color: var(--green-600);
#102	background: var(--green-50);
#103	border: 1px solid var(--green-200);
#104	padding: 0.3rem 0.75rem;
#105	border-radius: 999px;
#106	margin-bottom: 1rem;
#107	}
#108
#109	.section-dark .section-tag {
#110	background: var(--green-100);
#111	}
#112
#113	.section-title {
#114	font-size: 2.25rem;
#115	font-weight: 700;
#116	line-height: 1.2;
#117	letter-spacing: -0.02em;
#118	color: var(--gray-900);
#119	margin-bottom: 1rem;
#120	}
#121
#122	.section-dark .section-title {
#123	color: var(--gray-900);
#124	}
#125
#126	.section-desc {
#127	font-size: 1.1rem;
#128	color: var(--gray-500);
#129	line-height: 1.7;
#130	}
#131
#132	/* ===== Buttons ===== */
#133	.btn {
#134	display: inline-flex;
#135	align-items: center;
#136	justify-content: center;
#137	font-weight: 600;
#138	border-radius: 0.5rem;
#139	transition: all 0.2s;
#140	cursor: pointer;
#141	border: 2px solid transparent;
#142	font-size: 0.95rem;
#143	padding: 0.6rem 1.5rem;
#144	}
#145
#146	.btn-sm {
#147	padding: 0.45rem 1rem;
#148	font-size: 0.85rem;
#149	}
#150
#151	.btn-lg {
#152	padding: 0.85rem 2rem;
#153	font-size: 1rem;
#154	}
#155
#156	.btn-primary {
#157	background: var(--green-600);
#158	color: #fff;
#159	border-color: var(--green-600);
#160	}
#161
#162	.btn-primary:hover {
#163	background: var(--green-700);
#164	border-color: var(--green-700);
#165	}
#166
#167	.btn-outline {
#168	background: transparent;
#169	color: var(--green-700);
#170	border-color: var(--green-600);
#171	}
#172
#173	.btn-outline:hover {
#174	background: var(--green-50);
#175	}
#176
#177	.btn-white {
#178	background: #fff;
#179	color: var(--green-800);
#180	border-color: #fff;
#181	}
#182
#183	.btn-white:hover {
#184	background: var(--gray-100);
#185	}
#186
#187	.btn-outline-white {
#188	background: transparent;
#189	color: #fff;
#190	border-color: rgba(255, 255, 255, 0.5);
#191	}
#192
#193	.btn-outline-white:hover {
#194	background: rgba(255, 255, 255, 0.1);
#195	border-color: #fff;
#196	}
#197
#198	/* ===== Navigation ===== */
#199	.nav {
#200	position: fixed;
#201	top: 0;
#202	left: 0;
#203	right: 0;
#204	z-index: 200;
#205	background: #fff;
#206	border-bottom: 1px solid var(--gray-200);
#207	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
#208	}
#209
#210	.nav-inner {
#211	max-width: 1200px;
#212	margin: 0 auto;
#213	padding: 0 1.5rem;
#214	height: 4rem;
#215	display: flex;
#216	align-items: center;
#217	justify-content: space-between;
#218	}
#219
#220	.logo {
#221	display: flex;
#222	align-items: center;
#223	gap: 0.25rem;
#224	font-weight: 700;
#225	font-size: 1.5rem;
#226	}
#227
#228	.logo-icon {
#229	font-size: 1.75rem;
#230	display: inline-flex;
#231	align-items: center;
#232	justify-content: center;
#233	}
#234
#235	.logo-icon img {
#236	width: 4rem;
#237	height: 4rem;
#238	object-fit: contain;
#239	border-radius: 8px;
#240	}
#241
#242	.logo-highlight {
#243	color: var(--green-600);
#244	}
#245
#246	.nav-links {
#247	display: flex;
#248	gap: 2rem;
#249	}
#250
#251	.nav-link {
#252	font-size: 0.9rem;
#253	font-weight: 500;
#254	color: var(--gray-600);
#255	transition: color 0.2s;
#256	}
#257
#258	.nav-link:hover {
#259	color: var(--green-600);
#260	}
#261
#262	.nav-actions {
#263	display: flex;
#264	gap: 0.75rem;
#265	}
#266
#267	.mobile-menu-btn {
#268	display: none;
#269	background: none;
#270	border: none;
#271	font-size: 1.5rem;
#272	cursor: pointer;
#273	color: var(--gray-700);
#274	}
#275
#276	.mobile-menu {
#277	display: none;
#278	flex-direction: column;
#279	padding: 1rem 1.5rem 1.5rem;
#280	border-top: 1px solid var(--gray-200);
#281	background: #fff;
#282	}
#283
#284	.mobile-menu-link {
#285	padding: 0.75rem 0;
#286	font-weight: 500;
#287	color: var(--gray-700);
#288	border-bottom: 1px solid var(--gray-100);
#289	}
#290
#291	.mobile-menu-actions {
#292	display: flex;
#293	gap: 0.75rem;
#294	margin-top: 1rem;
#295	}
#296
#297	@media (max-width: 768px) {
#298	.nav-links,
#299	.nav-actions {
#300	display: none;
#301	}
#302	.mobile-menu-btn {
#303	display: block;
#304	}
#305	.mobile-menu {
#306	display: flex;
#307	}
#308	}
#309
#310	/* ===== Hero ===== */
#311	.hero {
#312	position: relative;
#313	padding: 8rem 0 4rem;
#314	overflow: hidden;
#315	background: linear-gradient(160deg, var(--green-50) 0%, #fff 40%, var(--gray-50) 100%);
#316	}
#317
#318	.hero-bg {
#319	position: absolute;
#320	inset: 0;
#321	background:
#322	radial-gradient(circle at 20% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
#323	radial-gradient(circle at 80% 20%, rgba(234, 179, 8, 0.06) 0%, transparent 50%);
#324	pointer-events: none;
#325	overflow: hidden;
#326	}
#327
#328	.hero-content {
#329	position: relative;
#330	z-index: 1;
#331	max-width: 1200px;
#332	margin: 0 auto;
#333	padding: 0 1.5rem;
#334	text-align: center;
#335	}
#336
#337	.hero-badge {
#338	display: inline-block;
#339	font-family: var(--font-mono);
#340	font-size: 0.75rem;
#341	font-weight: 600;
#342	letter-spacing: 0.1em;
#343	text-transform: uppercase;
#344	color: var(--green-700);
#345	background: var(--green-100);
#346	border: 1px solid var(--green-200);
#347	padding: 0.4rem 1rem;
#348	border-radius: 999px;
#349	margin-bottom: 1.5rem;
#350	}
#351
#352	.hero-title {
#353	font-size: 3.5rem;
#354	font-weight: 800;
#355	line-height: 1.1;
#356	letter-spacing: -0.03em;
#357	color: var(--gray-900);
#358	max-width: 800px;
#359	margin: 0 auto 1.5rem;
#360	}
#361
#362	.hero-highlight {
#363	color: var(--green-600);
#364	}
#365
#366	.hero-subtitle {
#367	font-size: 1.2rem;
#368	color: var(--gray-500);
#369	max-width: 640px;
#370	margin: 0 auto 2.5rem;
#371	line-height: 1.7;
#372	}
#373
#374	.hero-actions {
#375	display: flex;
#376	gap: 1rem;
#377	justify-content: center;
#378	flex-wrap: wrap;
#379	margin-bottom: 4rem;
#380	}
#381
#382	.hero-stats {
#383	display: grid;
#384	grid-template-columns: repeat(3, 1fr);
#385	gap: 3rem;
#386	max-width: 750px;
#387	margin: 0 auto;
#388	padding-top: 3rem;
#389	border-top: 2px solid var(--green-600);
#390	}
#391
#392	.hero-stat {
#393	text-align: center;
#394	}
#395
#396	.hero-stat-value {
#397	display: block;
#398	font-size: 3.25rem;
#399	font-weight: 900;
#400	color: var(--green-600);
#401	letter-spacing: -0.03em;
#402	line-height: 1;
#403	margin-bottom: 0.5rem;
#404	}
#405
#406	.hero-stat-label {
#407	font-size: 0.85rem;
#408	color: #1a1a1a;
#409	font-weight: 600;
#410	text-transform: uppercase;
#411	letter-spacing: 0.08em;
#412	}
#413
#414	@media (max-width: 640px) {
#415	.hero-title {
#416	font-size: 2.25rem;
#417	}
#418	.hero-stats {
#419	grid-template-columns: repeat(2, 1fr);
#420	}
#421	}
#422
#423	/* ===== Split Layout ===== */
#424	.split {
#425	display: grid;
#426	grid-template-columns: 1fr 1fr;
#427	gap: 4rem;
#428	align-items: center;
#429	}
#430
#431	.split.reverse {
#432	direction: rtl;
#433	}
#434
#435	.split.reverse > * {
#436	direction: ltr;
#437	}
#438
#439	.split-text .section-tag {
#440	margin-bottom: 1rem;
#441	}
#442
#443	.split-text .section-title {
#444	text-align: left;
#445	}
#446
#447	.split-text .section-desc {
#448	text-align: left;
#449	}
#450
#451	.challenge-list {
#452	list-style: none;
#453	margin-top: 1.5rem;
#454	}
#455
#456	.challenge-list li {
#457	position: relative;
#458	padding-left: 1.5rem;
#459	margin-bottom: 0.75rem;
#460	color: var(--gray-600);
#461	font-size: 0.95rem;
#462	}
#463
#464	.challenge-list li::before {
#465	content: "";
#466	position: absolute;
#467	left: 0;
#468	top: 0.55rem;
#469	width: 8px;
#470	height: 8px;
#471	background: var(--green-600);
#472	border-radius: 50%;
#473	}
#474
#475	@media (max-width: 768px) {
#476	.split {
#477	grid-template-columns: 1fr;
#478	gap: 2rem;
#479	}
#480	.split.reverse {
#481	direction: ltr;
#482	}
#483	}
#484
#485	/* ===== Challenge Visual ===== */
#486	.challenge-card {
#487	background: #fff;
#488	border: 2px solid var(--green-600);
#489	border-radius: 1rem;
#490	padding: 2.5rem;
#491	text-align: center;
#492	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
#493	}
#494
#495	.challenge-card-icon {
#496	font-size: 2.5rem;
#497	margin-bottom: 0.75rem;
#498	}
#499
#500	.challenge-card h3 {
#501	font-size: 1.1rem;
#502	font-weight: 700;
#503	margin-bottom: 0.25rem;
#504	color: #000;
#505	}
#506
#507	.challenge-card p {
#508	font-size: 0.85rem;
#509	color: #333;
#510	}
#511
#512	.challenge-arrow {
#513	font-size: 1.5rem;
#514	color: var(--gray-300);
#515	margin: 0.75rem 0;
#516	}
#517
#518	.challenge-gap {
#519	display: inline-block;
#520	background: transparent;
#521	color: var(--green-700);
#522	border: 2px solid var(--green-600);
#523	font-weight: 700;
#524	font-size: 0.85rem;
#525	padding: 0.5rem 1.5rem;
#526	border-radius: 0.5rem;
#527	letter-spacing: 0.02em;
#528	}
#529
#530	.challenge-bridge {
#531	background: linear-gradient(135deg, var(--green-600), var(--green-800));
#532	color: #fff;
#533	padding: 1.25rem 1.5rem;
#534	border-radius: 0.75rem;
#535	margin: 0.5rem 0;
#536	}
#537
#538	.challenge-bridge-title {
#539	font-weight: 700;
#540	font-size: 1rem;
#541	margin-bottom: 0.25rem;
#542	}
#543
#544	.challenge-bridge-desc {
#545	font-size: 0.8rem;
#546	opacity: 0.9;
#547	}
#548
#549	.challenge-arrow {
#550	font-size: 1.5rem;
#551	color: var(--green-600);
#552	margin: 0.75rem 0;
#553	}
#554
#555	/* ===== Feature Cards ===== */
#556	.features-grid {
#557	display: grid;
#558	grid-template-columns: repeat(4, 1fr);
#559	gap: 1.5rem;
#560	}
#561
#562	.features-grid-3 {
#563	grid-template-columns: repeat(3, 1fr);
#564	}
#565
#566	.feature-card {
#567	background: #fff;
#568	border: 1px solid var(--gray-200);
#569	border-radius: 0.75rem;
#570	padding: 1.75rem;
#571	transition: all 0.2s;
#572	}
#573
#574	.feature-card:hover {
#575	border-color: var(--green-300);
#576	box-shadow: 0 4px 16px rgba(34, 197, 94, 0.08);
#577	transform: translateY(-2px);
#578	}
#579
#580	.section-dark .feature-card {
#581	background: #fff;
#582	}
#583
#584	.feature-icon {
#585	font-size: 2rem;
#586	margin-bottom: 1rem;
#587	}
#588
#589	.feature-icon-svg {
#590	width: 3rem;
#591	height: 3rem;
#592	border-radius: 0.75rem;
#593	display: flex;
#594	align-items: center;
#595	justify-content: center;
#596	margin-bottom: 1rem;
#597	background: linear-gradient(135deg, var(--green-500), var(--green-700));
#598	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
#599	}
#600
#601	.feature-icon-svg svg {
#602	width: 1.5rem;
#603	height: 1.5rem;
#604	color: #fff;
#605	fill: none;
#606	stroke: currentColor;
#607	stroke-width: 2;
#608	stroke-linecap: round;
#609	stroke-linejoin: round;
#610	}
#611
#612	.feature-card h3 {
#613	font-size: 1rem;
#614	font-weight: 600;
#615	margin-bottom: 0.5rem;
#616	color: var(--gray-900);
#617	}
#618
#619	.feature-card p {
#620	font-size: 0.875rem;
#621	color: var(--gray-500);
#622	line-height: 1.6;
#623	}
#624
#625	@media (max-width: 1024px) {
#626	.features-grid {
#627	grid-template-columns: repeat(2, 1fr);
#628	}
#629	.features-grid-3 {
#630	grid-template-columns: repeat(2, 1fr);
#631	}
#632	}
#633
#634	@media (max-width: 640px) {
#635	.features-grid,
#636	.features-grid-3 {
#637	grid-template-columns: 1fr;
#638	}
#639	}
#640
#641	/* ===== Steps ===== */
#642	.steps {
#643	display: grid;
#644	grid-template-columns: repeat(4, 1fr);
#645	gap: 2rem;
#646	}
#647
#648	.step {
#649	text-align: center;
#650	position: relative;
#651	}
#652
#653	.step-num {
#654	display: inline-flex;
#655	align-items: center;
#656	justify-content: center;
#657	width: 3rem;
#658	height: 3rem;
#659	border-radius: 50%;
#660	background: var(--green-600);
#661	color: #fff;
#662	font-weight: 700;
#663	font-size: 0.9rem;
#664	margin-bottom: 1.25rem;
#665	}
#666
#667	.step-title {
#668	font-size: 1.05rem;
#669	font-weight: 600;
#670	margin-bottom: 0.5rem;
#671	color: var(--gray-900);
#672	}
#673
#674	.step-desc {
#675	font-size: 0.875rem;
#676	color: var(--gray-500);
#677	line-height: 1.6;
#678	}
#679
#680	@media (max-width: 768px) {
#681	.steps {
#682	grid-template-columns: repeat(2, 1fr);
#683	}
#684	}
#685
#686	@media (max-width: 480px) {
#687	.steps {
#688	grid-template-columns: 1fr;
#689	}
#690	}
#691
#692	/* ===== Filter Demo ===== */
#693	.filter-demo {
#694	background: #fff;
#695	border: 1px solid var(--gray-200);
#696	border-radius: 1rem;
#697	padding: 2rem;
#698	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
#699	}
#700
#701	.filter-demo-header {
#702	font-weight: 700;
#703	font-size: 1.1rem;
#704	margin-bottom: 1.25rem;
#705	color: var(--gray-900);
#706	}
#707
#708	.filter-row {
#709	display: flex;
#710	flex-wrap: wrap;
#711	gap: 0.5rem;
#712	margin-bottom: 0.75rem;
#713	}
#714
#715	.filter-chip {
#716	font-size: 0.8rem;
#717	font-weight: 500;
#718	padding: 0.4rem 0.75rem;
#719	border-radius: 999px;
#720	border: 1px solid var(--gray-200);
#721	background: var(--gray-50);
#722	color: var(--gray-600);
#723	}
#724
#725	.filter-chip.active {
#726	background: var(--green-100);
#727	border-color: var(--green-300);
#728	color: var(--green-700);
#729	}
#730
#731	.filter-results {
#732	margin-top: 1.5rem;
#733	display: flex;
#734	flex-direction: column;
#735	gap: 0.75rem;
#736	}
#737
#738	.filter-result-card {
#739	background: var(--gray-50);
#740	border: 1px solid var(--gray-200);
#741	border-radius: 0.5rem;
#742	padding: 1rem 1.25rem;
#743	position: relative;
#744	}
#745
#746	.filter-result-badge {
#747	position: absolute;
#748	top: 0.75rem;
#749	right: 0.75rem;
#750	font-size: 0.65rem;
#751	font-weight: 700;
#752	text-transform: uppercase;
#753	letter-spacing: 0.05em;
#754	background: var(--green-100);
#755	color: var(--green-700);
#756	padding: 0.2rem 0.5rem;
#757	border-radius: 0.25rem;
#758	}
#759
#760	.filter-result-card h4 {
#761	font-size: 0.95rem;
#762	font-weight: 600;
#763	margin-bottom: 0.25rem;
#764	color: var(--gray-900);
#765	}
#766
#767	.filter-result-card p {
#768	font-size: 0.8rem;
#769	color: var(--gray-500);
#770	}
#771
#772	/* ===== Roadmap ===== */
#773	.roadmap {
#774	max-width: 600px;
#775	margin: 0 auto;
#776	}
#777
#778	.roadmap-item {
#779	display: flex;
#780	gap: 1.5rem;
#781	position: relative;
#782	}
#783
#784	.roadmap-marker {
#785	display: flex;
#786	flex-direction: column;
#787	align-items: center;
#788	flex-shrink: 0;
#789	}
#790
#791	.roadmap-dot {
#792	width: 16px;
#793	height: 16px;
#794	border-radius: 50%;
#795	background: var(--green-600);
#796	border: 3px solid var(--green-200);
#797	flex-shrink: 0;
#798	}
#799
#800	.roadmap-line {
#801	width: 2px;
#802	flex: 1;
#803	background: var(--green-200);
#804	min-height: 2rem;
#805	}
#806
#807	.roadmap-content {
#808	padding-bottom: 2rem;
#809	}
#810
#811	.roadmap-phase {
#812	font-family: var(--font-mono);
#813	font-size: 0.7rem;
#814	font-weight: 600;
#815	text-transform: uppercase;
#816	letter-spacing: 0.1em;
#817	color: var(--green-600);
#818	}
#819
#820	.roadmap-content h3 {
#821	font-size: 1.1rem;
#822	font-weight: 600;
#823	margin: 0.25rem 0 0.5rem;
#824	color: var(--gray-900);
#825	}
#826
#827	.roadmap-content p {
#828	font-size: 0.9rem;
#829	color: var(--gray-500);
#830	line-height: 1.6;
#831	}
#832
#833	/* ===== Revenue Grid ===== */
#834	.revenue-grid {
#835	display: grid;
#836	grid-template-columns: repeat(4, 1fr);
#837	gap: 1rem;
#838	max-width: 900px;
#839	margin: 0 auto;
#840	}
#841
#842	.revenue-item {
#843	display: flex;
#844	align-items: center;
#845	gap: 0.75rem;
#846	background: var(--gray-50);
#847	border: 1px solid var(--gray-200);
#848	border-radius: 0.5rem;
#849	padding: 1rem 1.25rem;
#850	font-size: 0.9rem;
#851	font-weight: 500;
#852	color: var(--gray-700);
#853	}
#854
#855	.revenue-check {
#856	color: var(--green-600);
#857	font-weight: 700;
#858	font-size: 1.1rem;
#859	}
#860
#861	@media (max-width: 768px) {
#862	.revenue-grid {
#863	grid-template-columns: repeat(2, 1fr);
#864	}
#865	}
#866
#867	@media (max-width: 480px) {
#868	.revenue-grid {
#869	grid-template-columns: 1fr;
#870	}
#871	}
#872
#873	/* ===== CTA ===== */
#874	.cta-content {
#875	text-align: center;
#876	max-width: 640px;
#877	margin: 0 auto;
#878	}
#879
#880	.cta-title {
#881	font-size: 2.5rem;
#882	font-weight: 800;
#883	letter-spacing: -0.02em;
#884	margin-bottom: 1rem;
#885	}
#886
#887	.cta-desc {
#888	font-size: 1.1rem;
#889	opacity: 0.85;
#890	line-height: 1.7;
#891	margin-bottom: 2rem;
#892	}
#893
#894	.cta-actions {
#895	display: flex;
#896	gap: 1rem;
#897	justify-content: center;
#898	flex-wrap: wrap;
#899	margin-bottom: 1.5rem;
#900	}
#901
#902	.cta-note {
#903	font-size: 0.85rem;
#904	opacity: 0.65;
#905	}
#906
#907	/* ===== Footer ===== */
#908	.footer {
#909	background: var(--gray-950);
#910	color: var(--gray-400);
#911	padding: 4rem 0 2rem;
#912	}
#913
#914	.footer-grid {
#915	display: grid;
#916	grid-template-columns: 2fr 1fr 1fr 1fr;
#917	gap: 3rem;
#918	margin-bottom: 3rem;
#919	}
#920
#921	.footer-brand .logo {
#922	margin-bottom: 1rem;
#923	}
#924
#925	.footer-brand .logo-text {
#926	color: #fff;
#927	}
#928
#929	.footer-tagline {
#930	font-size: 0.9rem;
#931	line-height: 1.6;
#932	color: var(--gray-500);
#933	}
#934
#935	.footer-col h4 {
#936	color: #fff;
#937	font-size: 0.85rem;
#938	font-weight: 600;
#939	text-transform: uppercase;
#940	letter-spacing: 0.05em;
#941	margin-bottom: 1rem;
#942	}
#943
#944	.footer-col a {
#945	display: block;
#946	font-size: 0.9rem;
#947	color: var(--gray-400);
#948	margin-bottom: 0.6rem;
#949	transition: color 0.2s;
#950	}
#951
#952	.footer-col a:hover {
#953	color: var(--green-400);
#954	}
#955
#956	.footer-bottom {
#957	display: flex;
#958	justify-content: space-between;
#959	align-items: center;
#960	padding-top: 2rem;
#961	border-top: 1px solid var(--gray-800);
#962	font-size: 0.8rem;
#963	}
#964
#965	.footer-social {
#966	display: flex;
#967	gap: 1.25rem;
#968	}
#969
#970	.footer-social a {
#971	font-weight: 600;
#972	color: var(--gray-500);
#973	transition: color 0.2s;
#974	}
#975
#976	.footer-social a:hover {
#977	color: var(--green-400);
#978	}
#979
#980	@media (max-width: 768px) {
#981	.footer-grid {
#982	grid-template-columns: 1fr 1fr;
#983	gap: 2rem;
#984	}
#985	.footer-brand {
#986	grid-column: 1 / -1;
#987	}
#988	.footer-bottom {
#989	flex-direction: column;
#990	gap: 1rem;
#991	text-align: center;
#992	}
#993	}
#994
#995	@media (max-width: 480px) {
#996	.footer-grid {
#997	grid-template-columns: 1fr;
#998	}
#999	}
#1000
#1001	/* ===== Page Transitions ===== */
#1002	@keyframes page-float-in {
#1003	0% {
#1004	opacity: 0;
#1005	transform: translateY(40px) scale(0.98);
#1006	}
#1007	60% {
#1008	opacity: 1;
#1009	transform: translateY(-6px) scale(1.005);
#1010	}
#1011	80% {
#1012	transform: translateY(3px) scale(0.998);
#1013	}
#1014	100% {
#1015	opacity: 1;
#1016	transform: translateY(0) scale(1);
#1017	}
#1018	}
#1019
#1020	@keyframes page-float-out {
#1021	0% {
#1022	opacity: 1;
#1023	transform: translateY(0) scale(1);
#1024	}
#1025	100% {
#1026	opacity: 0;
#1027	transform: translateY(-30px) scale(0.98);
#1028	}
#1029	}
#1030
#1031	.page-transition-enter {
#1032	animation: page-float-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
#1033	}
#1034
#1035	.page-transition-exit {
#1036	animation: page-float-out 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards;
#1037	}
#1038
#1039	/* Floating idle animation for page content */
#1040	@keyframes gentle-float {
#1041	0%, 100% {
#1042	transform: translateY(0);
#1043	}
#1044	50% {
#1045	transform: translateY(-4px);
#1046	}
#1047	}
#1048
#1049	.page-transition-enter .login-card,
#1050	.page-transition-enter .reg-success-card,
#1051	.page-transition-enter .hero-content {
#1052	animation: gentle-float 3s ease-in-out 0.6s infinite;
#1053	}
#1054
#1055	/* ===== Registration Page ===== */
#1056	.reg-page {
#1057	min-height: 100vh;
#1058	background: var(--gray-50);
#1059	}
#1060
#1061	.reg-container {
#1062	display: grid;
#1063	grid-template-columns: 300px 1fr;
#1064	min-height: calc(100vh - 4rem);
#1065	padding-top: 4rem;
#1066	}
#1067
#1068	@media (max-width: 900px) {
#1069	.reg-container {
#1070	grid-template-columns: 1fr;
#1071	}
#1072	}
#1073
#1074	/* Sidebar */
#1075	.reg-sidebar {
#1076	background: #fff;
#1077	border-right: 1px solid var(--gray-200);
#1078	padding: 2rem 1.5rem;
#1079	position: sticky;
#1080	top: 4rem;
#1081	height: calc(100vh - 4rem);
#1082	overflow-y: auto;
#1083	}
#1084
#1085	@media (max-width: 900px) {
#1086	.reg-sidebar {
#1087	position: relative;
#1088	top: 0;
#1089	height: auto;
#1090	border-right: none;
#1091	border-bottom: 1px solid var(--gray-200);
#1092	padding: 1.5rem;
#1093	}
#1094	}
#1095
#1096	.reg-sidebar-inner {
#1097	max-width: 280px;
#1098	}
#1099
#1100	@media (max-width: 900px) {
#1101	.reg-sidebar-inner {
#1102	max-width: 100%;
#1103	}
#1104	}
#1105
#1106	.reg-sidebar-title {
#1107	font-size: 1.25rem;
#1108	font-weight: 700;
#1109	color: var(--gray-900);
#1110	margin-bottom: 0.25rem;
#1111	}
#1112
#1113	.reg-sidebar-subtitle {
#1114	font-size: 0.85rem;
#1115	color: var(--gray-500);
#1116	margin-bottom: 2rem;
#1117	}
#1118
#1119	@media (max-width: 900px) {
#1120	.reg-sidebar-subtitle {
#1121	margin-bottom: 1rem;
#1122	}
#1123	}
#1124
#1125	.reg-progress-steps {
#1126	display: flex;
#1127	flex-direction: column;
#1128	gap: 0.25rem;
#1129	margin-bottom: 2rem;
#1130	}
#1131
#1132	@media (max-width: 900px) {
#1133	.reg-progress-steps {
#1134	flex-direction: row;
#1135	overflow-x: auto;
#1136	gap: 0.5rem;
#1137	margin-bottom: 1rem;
#1138	}
#1139	}
#1140
#1141	.reg-progress-step {
#1142	display: flex;
#1143	align-items: center;
#1144	gap: 0.75rem;
#1145	padding: 0.6rem 0.75rem;
#1146	border-radius: 0.5rem;
#1147	transition: all 0.2s;
#1148	}
#1149
#1150	@media (max-width: 900px) {
#1151	.reg-progress-step {
#1152	flex-shrink: 0;
#1153	gap: 0.5rem;
#1154	padding: 0.4rem 0.6rem;
#1155	}
#1156	}
#1157
#1158	.reg-progress-active {
#1159	background: var(--green-50);
#1160	border: 1px solid var(--green-200);
#1161	}
#1162
#1163	.reg-progress-done {
#1164	opacity: 0.7;
#1165	}
#1166
#1167	.reg-progress-marker {
#1168	display: flex;
#1169	align-items: center;
#1170	justify-content: center;
#1171	width: 2rem;
#1172	height: 2rem;
#1173	border-radius: 50%;
#1174	font-size: 0.8rem;
#1175	font-weight: 700;
#1176	flex-shrink: 0;
#1177	background: var(--gray-100);
#1178	color: var(--gray-500);
#1179	border: 2px solid var(--gray-200);
#1180	}
#1181
#1182	.reg-progress-active .reg-progress-marker {
#1183	background: var(--green-600);
#1184	color: #fff;
#1185	border-color: var(--green-600);
#1186	}
#1187
#1188	.reg-progress-done .reg-progress-marker {
#1189	background: var(--green-100);
#1190	color: var(--green-700);
#1191	border-color: var(--green-300);
#1192	}
#1193
#1194	.reg-progress-info {
#1195	display: flex;
#1196	flex-direction: column;
#1197	}
#1198
#1199	@media (max-width: 900px) {
#1200	.reg-progress-info {
#1201	display: none;
#1202	}
#1203	}
#1204
#1205	.reg-progress-label {
#1206	font-size: 0.7rem;
#1207	font-weight: 600;
#1208	text-transform: uppercase;
#1209	letter-spacing: 0.05em;
#1210	color: var(--gray-400);
#1211	}
#1212
#1213	.reg-progress-active .reg-progress-label {
#1214	color: var(--green-600);
#1215	}
#1216
#1217	.reg-progress-title {
#1218	font-size: 0.85rem;
#1219	font-weight: 500;
#1220	color: var(--gray-700);
#1221	}
#1222
#1223	.reg-progress-active .reg-progress-title {
#1224	color: var(--green-800);
#1225	font-weight: 600;
#1226	}
#1227
#1228	.reg-progress-bar-container {
#1229	height: 6px;
#1230	background: var(--gray-200);
#1231	border-radius: 999px;
#1232	overflow: hidden;
#1233	margin-bottom: 0.5rem;
#1234	}
#1235
#1236	.reg-progress-bar {
#1237	height: 100%;
#1238	background: var(--green-600);
#1239	border-radius: 999px;
#1240	transition: width 0.4s ease;
#1241	}
#1242
#1243	.reg-progress-pct {
#1244	font-size: 0.8rem;
#1245	font-weight: 600;
#1246	color: var(--green-600);
#1247	text-align: right;
#1248	}
#1249
#1250	/* Main form area */
#1251	.reg-main {
#1252	padding: 2rem;
#1253	display: flex;
#1254	justify-content: center;
#1255	}
#1256
#1257	@media (max-width: 900px) {
#1258	.reg-main {
#1259	padding: 1.5rem 1rem;
#1260	}
#1261	}
#1262
#1263	.reg-form {
#1264	width: 100%;
#1265	max-width: 720px;
#1266	}
#1267
#1268	.reg-form-header {
#1269	margin-bottom: 2rem;
#1270	}
#1271
#1272	.reg-step-badge {
#1273	display: inline-block;
#1274	font-family: var(--font-mono);
#1275	font-size: 0.7rem;
#1276	font-weight: 600;
#1277	text-transform: uppercase;
#1278	letter-spacing: 0.1em;
#1279	color: var(--green-600);
#1280	background: var(--green-50);
#1281	border: 1px solid var(--green-200);
#1282	padding: 0.25rem 0.6rem;
#1283	border-radius: 999px;
#1284	margin-bottom: 0.75rem;
#1285	}
#1286
#1287	.reg-form-title {
#1288	font-size: 1.75rem;
#1289	font-weight: 700;
#1290	color: var(--gray-900);
#1291	letter-spacing: -0.01em;
#1292	}
#1293
#1294	/* Step intro */
#1295	.reg-step-intro {
#1296	margin-bottom: 2rem;
#1297	padding-bottom: 1.5rem;
#1298	border-bottom: 1px solid var(--gray-200);
#1299	}
#1300
#1301	.reg-step-intro h3 {
#1302	font-size: 1.15rem;
#1303	font-weight: 600;
#1304	color: var(--gray-900);
#1305	margin-bottom: 0.25rem;
#1306	}
#1307
#1308	.reg-step-intro p {
#1309	font-size: 0.9rem;
#1310	color: var(--gray-500);
#1311	}
#1312
#1313	/* Form fields */
#1314	.reg-field {
#1315	margin-bottom: 1.5rem;
#1316	}
#1317
#1318	.reg-label {
#1319	display: block;
#1320	font-size: 0.85rem;
#1321	font-weight: 600;
#1322	color: var(--gray-700);
#1323	margin-bottom: 0.4rem;
#1324	}
#1325
#1326	.reg-required {
#1327	color: var(--red-500);
#1328	margin-left: 0.2rem;
#1329	}
#1330
#1331	.reg-hint {
#1332	display: block;
#1333	font-size: 0.75rem;
#1334	color: var(--gray-400);
#1335	margin-top: 0.3rem;
#1336	}
#1337
#1338	.reg-input {
#1339	width: 100%;
#1340	padding: 0.65rem 0.85rem;
#1341	border: 1px solid var(--gray-300);
#1342	border-radius: 0.5rem;
#1343	font-size: 0.9rem;
#1344	font-family: var(--font-sans);
#1345	color: var(--gray-800);
#1346	background: #fff;
#1347	transition: border-color 0.2s, box-shadow 0.2s;
#1348	outline: none;
#1349	}
#1350
#1351	.reg-input:focus {
#1352	border-color: var(--green-500);
#1353	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
#1354	}
#1355
#1356	.reg-input::placeholder {
#1357	color: var(--gray-400);
#1358	}
#1359
#1360	.reg-textarea {
#1361	resize: vertical;
#1362	min-height: 80px;
#1363	}
#1364
#1365	select.reg-input {
#1366	cursor: pointer;
#1367	appearance: none;
#1368	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
#1369	background-repeat: no-repeat;
#1370	background-position: right 0.75rem center;
#1371	padding-right: 2rem;
#1372	}
#1373
#1374	/* Grid layouts */
#1375	.reg-grid-2 {
#1376	display: grid;
#1377	grid-template-columns: 1fr 1fr;
#1378	gap: 0 1.5rem;
#1379	}
#1380
#1381	@media (max-width: 640px) {
#1382	.reg-grid-2 {
#1383	grid-template-columns: 1fr;
#1384	}
#1385	}
#1386
#1387	/* Chips */
#1388	.reg-chips {
#1389	display: flex;
#1390	flex-wrap: wrap;
#1391	gap: 0.5rem;
#1392	}
#1393
#1394	.reg-chip {
#1395	display: inline-flex;
#1396	align-items: center;
#1397	gap: 0.3rem;
#1398	padding: 0.4rem 0.85rem;
#1399	border-radius: 999px;
#1400	border: 1px solid var(--gray-200);
#1401	background: #fff;
#1402	font-size: 0.82rem;
#1403	font-weight: 500;
#1404	color: var(--gray-600);
#1405	cursor: pointer;
#1406	transition: all 0.15s;
#1407	font-family: var(--font-sans);
#1408	}
#1409
#1410	.reg-chip:hover {
#1411	border-color: var(--green-300);
#1412	background: var(--green-50);
#1413	}
#1414
#1415	.reg-chip-active {
#1416	background: var(--green-100);
#1417	border-color: var(--green-400);
#1418	color: var(--green-800);
#1419	}
#1420
#1421	.reg-chip-active:hover {
#1422	background: var(--green-200);
#1423	}
#1424
#1425	.reg-chip-check {
#1426	font-size: 0.7rem;
#1427	font-weight: 700;
#1428	}
#1429
#1430	.reg-chip-add {
#1431	border-style: dashed;
#1432	border-color: var(--green-300);
#1433	color: var(--green-600);
#1434	}
#1435
#1436	.reg-chip-add:hover {
#1437	background: var(--green-50);
#1438	}
#1439
#1440	.reg-custom-skill {
#1441	display: flex;
#1442	gap: 0.5rem;
#1443	margin-top: 0.75rem;
#1444	}
#1445
#1446	.reg-custom-skill .reg-input {
#1447	flex: 1;
#1448	}
#1449
#1450	/* File upload */
#1451	.reg-file-upload {
#1452	margin-top: 0.25rem;
#1453	}
#1454
#1455	.reg-file-label {
#1456	display: flex;
#1457	align-items: center;
#1458	gap: 0.75rem;
#1459	cursor: pointer;
#1460	}
#1461
#1462	.reg-file-input {
#1463	display: none;
#1464	}
#1465
#1466	.reg-file-btn {
#1467	display: inline-flex;
#1468	align-items: center;
#1469	padding: 0.5rem 1rem;
#1470	background: #fff;
#1471	border: 1px solid var(--gray-300);
#1472	border-radius: 0.5rem;
#1473	font-size: 0.85rem;
#1474	font-weight: 500;
#1475	color: var(--gray-700);
#1476	transition: all 0.15s;
#1477	flex-shrink: 0;
#1478	}
#1479
#1480	.reg-file-btn:hover {
#1481	background: var(--gray-50);
#1482	border-color: var(--green-400);
#1483	}
#1484
#1485	.reg-file-name {
#1486	font-size: 0.85rem;
#1487	color: var(--gray-500);
#1488	overflow: hidden;
#1489	text-overflow: ellipsis;
#1490	white-space: nowrap;
#1491	}
#1492
#1493	/* Sub headings */
#1494	.reg-sub-heading {
#1495	font-size: 1rem;
#1496	font-weight: 600;
#1497	color: var(--gray-800);
#1498	margin: 2rem 0 1rem;
#1499	padding-top: 1.5rem;
#1500	border-top: 1px solid var(--gray-200);
#1501	}
#1502
#1503	/* Validation hints */
#1504	.reg-validation-hint {
#1505	font-size: 0.82rem;
#1506	color: var(--red-500);
#1507	margin-top: -0.75rem;
#1508	margin-bottom: 1rem;
#1509	}
#1510
#1511	/* Form actions */
#1512	.reg-form-actions {
#1513	display: flex;
#1514	justify-content: space-between;
#1515	align-items: center;
#1516	margin-top: 2.5rem;
#1517	padding-top: 2rem;
#1518	border-top: 1px solid var(--gray-200);
#1519	}
#1520
#1521	.btn:disabled {
#1522	opacity: 0.5;
#1523	cursor: not-allowed;
#1524	pointer-events: none;
#1525	}
#1526
#1527	/* Success page */
#1528	.reg-success {
#1529	display: flex;
#1530	align-items: center;
#1531	justify-content: center;
#1532	min-height: 100vh;
#1533	padding: 6rem 1.5rem 2rem;
#1534	background: linear-gradient(
#1535	160deg,
#1536	var(--green-50) 0%,
#1537	#fff 40%,
#1538	var(--gray-50) 100%
#1539	);
#1540	}
#1541
#1542	.reg-success-card {
#1543	max-width: 520px;
#1544	text-align: center;
#1545	background: #fff;
#1546	border: 1px solid var(--gray-200);
#1547	border-radius: 1rem;
#1548	padding: 3rem 2.5rem;
#1549	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
#1550	}
#1551
#1552	.reg-success-icon {
#1553	font-size: 3.5rem;
#1554	margin-bottom: 1rem;
#1555	}
#1556
#1557	.reg-success-card h2 {
#1558	font-size: 1.75rem;
#1559	font-weight: 700;
#1560	color: var(--gray-900);
#1561	margin-bottom: 0.75rem;
#1562	}
#1563
#1564	.reg-success-card > p {
#1565	font-size: 1rem;
#1566	color: var(--gray-600);
#1567	line-height: 1.6;
#1568	margin-bottom: 0.5rem;
#1569	}
#1570
#1571	.reg-success-detail {
#1572	font-size: 0.9rem !important;
#1573	color: var(--gray-500) !important;
#1574	margin-bottom: 1.5rem !important;
#1575	}
#1576
#1577	.reg-success-next {
#1578	text-align: left;
#1579	background: var(--gray-50);
#1580	border-radius: 0.75rem;
#1581	padding: 1.25rem 1.5rem;
#1582	margin-bottom: 2rem;
#1583	}
#1584
#1585	.reg-success-next h4 {
#1586	font-size: 0.9rem;
#1587	font-weight: 600;
#1588	color: var(--gray-800);
#1589	margin-bottom: 0.75rem;
#1590	}
#1591
#1592	.reg-success-next ul {
#1593	list-style: none;
#1594	padding: 0;
#1595	}
#1596
#1597	.reg-success-next li {
#1598	position: relative;
#1599	padding-left: 1.5rem;
#1600	margin-bottom: 0.4rem;
#1601	font-size: 0.9rem;
#1602	color: var(--gray-600);
#1603	}
#1604
#1605	.reg-success-next li::before {
#1606	content: "→";
#1607	position: absolute;
#1608	left: 0;
#1609	color: var(--green-600);
#1610	font-weight: 600;
#1611	}
#1612
#1613	/* ===== Login Page ===== */
#1614	.login-page {
#1615	min-height: 100vh;
#1616	background: var(--gray-50);
#1617	}
#1618
#1619	.login-container {
#1620	display: flex;
#1621	align-items: center;
#1622	justify-content: center;
#1623	min-height: 100vh;
#1624	padding: 6rem 1.5rem 2rem;
#1625	background: linear-gradient(
#1626	160deg,
#1627	var(--green-50) 0%,
#1628	#fff 40%,
#1629	var(--gray-50) 100%
#1630	);
#1631	}
#1632
#1633	.login-card {
#1634	width: 100%;
#1635	max-width: 440px;
#1636	background: #fff;
#1637	border: 1px solid var(--gray-200);
#1638	border-radius: 1rem;
#1639	padding: 2.5rem 2rem;
#1640	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
#1641	}
#1642
#1643	.login-header {
#1644	text-align: center;
#1645	margin-bottom: 2rem;
#1646	}
#1647
#1648	.login-icon {
#1649	font-size: 2.5rem;
#1650	margin-bottom: 0.75rem;
#1651	}
#1652
#1653	.login-title {
#1654	font-size: 1.75rem;
#1655	font-weight: 700;
#1656	color: var(--gray-900);
#1657	margin-bottom: 0.25rem;
#1658	}
#1659
#1660	.login-subtitle {
#1661	font-size: 0.95rem;
#1662	color: var(--gray-500);
#1663	}
#1664
#1665	/* Type toggle */
#1666	.login-type-toggle {
#1667	display: flex;
#1668	gap: 0.5rem;
#1669	margin-bottom: 1.75rem;
#1670	background: var(--gray-100);
#1671	border-radius: 0.5rem;
#1672	padding: 0.25rem;
#1673	}
#1674
#1675	.login-type-btn {
#1676	flex: 1;
#1677	display: flex;
#1678	align-items: center;
#1679	justify-content: center;
#1680	gap: 0.5rem;
#1681	padding: 0.65rem 1rem;
#1682	border: none;
#1683	border-radius: 0.375rem;
#1684	background: transparent;
#1685	font-size: 0.85rem;
#1686	font-weight: 600;
#1687	color: var(--gray-500);
#1688	cursor: pointer;
#1689	transition: all 0.2s;
#1690	font-family: var(--font-sans);
#1691	}
#1692
#1693	.login-type-btn:hover {
#1694	color: var(--gray-700);
#1695	}
#1696
#1697	.login-type-active {
#1698	background: #fff;
#1699	color: var(--green-700);
#1700	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
#1701	}
#1702
#1703	.login-type-icon {
#1704	font-size: 1rem;
#1705	}
#1706
#1707	/* Form */
#1708	.login-form {
#1709	display: flex;
#1710	flex-direction: column;
#1711	gap: 1.25rem;
#1712	}
#1713
#1714	.login-error {
#1715	display: flex;
#1716	align-items: center;
#1717	gap: 0.5rem;
#1718	background: #fef2f2;
#1719	border: 1px solid #fecaca;
#1720	border-radius: 0.5rem;
#1721	padding: 0.75rem 1rem;
#1722	font-size: 0.85rem;
#1723	color: var(--red-600);
#1724	}
#1725
#1726	.login-error-icon {
#1727	font-size: 1rem;
#1728	flex-shrink: 0;
#1729	}
#1730
#1731	.login-field {
#1732	display: flex;
#1733	flex-direction: column;
#1734	}
#1735
#1736	.login-label {
#1737	font-size: 0.85rem;
#1738	font-weight: 600;
#1739	color: var(--gray-700);
#1740	margin-bottom: 0.4rem;
#1741	}
#1742
#1743	.login-input-wrap {
#1744	display: flex;
#1745	align-items: center;
#1746	border: 1px solid var(--gray-300);
#1747	border-radius: 0.5rem;
#1748	background: #fff;
#1749	transition: border-color 0.2s, box-shadow 0.2s;
#1750	overflow: hidden;
#1751	}
#1752
#1753	.login-input-wrap:focus-within {
#1754	border-color: var(--green-500);
#1755	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
#1756	}
#1757
#1758	.login-input-icon {
#1759	font-size: 0.9rem;
#1760	padding: 0 0 0 0.85rem;
#1761	color: var(--gray-400);
#1762	flex-shrink: 0;
#1763	}
#1764
#1765	.login-input {
#1766	flex: 1;
#1767	border: none;
#1768	outline: none;
#1769	padding: 0.7rem 0.85rem;
#1770	font-size: 0.9rem;
#1771	font-family: var(--font-sans);
#1772	color: var(--gray-800);
#1773	background: transparent;
#1774	}
#1775
#1776	.login-input::placeholder {
#1777	color: var(--gray-400);
#1778	}
#1779
#1780	.login-password-toggle {
#1781	background: none;
#1782	border: none;
#1783	cursor: pointer;
#1784	padding: 0 0.85rem;
#1785	font-size: 0.9rem;
#1786	color: var(--gray-400);
#1787	transition: color 0.2s;
#1788	}
#1789
#1790	.login-password-toggle:hover {
#1791	color: var(--gray-600);
#1792	}
#1793
#1794	/* Options row */
#1795	.login-options {
#1796	display: flex;
#1797	justify-content: space-between;
#1798	align-items: center;
#1799	font-size: 0.85rem;
#1800	}
#1801
#1802	.login-remember {
#1803	display: flex;
#1804	align-items: center;
#1805	gap: 0.4rem;
#1806	color: var(--gray-600);
#1807	cursor: pointer;
#1808	}
#1809
#1810	.login-checkbox {
#1811	accent-color: var(--green-600);
#1812	width: 1rem;
#1813	height: 1rem;
#1814	cursor: pointer;
#1815	}
#1816
#1817	.login-forgot {
#1818	color: var(--green-600);
#1819	font-weight: 500;
#1820	transition: color 0.2s;
#1821	}
#1822
#1823	.login-forgot:hover {
#1824	color: var(--green-700);
#1825	}
#1826
#1827	/* Submit */
#1828	.login-submit {
#1829	width: 100%;
#1830	margin-top: 0.25rem;
#1831	}
#1832
#1833	/* Divider */
#1834	.login-divider {
#1835	display: flex;
#1836	align-items: center;
#1837	gap: 1rem;
#1838	margin: 1.5rem 0;
#1839	color: var(--gray-400);
#1840	font-size: 0.85rem;
#1841	}
#1842
#1843	.login-divider::before,
#1844	.login-divider::after {
#1845	content: "";
#1846	flex: 1;
#1847	height: 1px;
#1848	background: var(--gray-200);
#1849	}
#1850
#1851	/* Social login */
#1852	.login-social {
#1853	display: flex;
#1854	gap: 0.75rem;
#1855	}
#1856
#1857	.login-social-btn {
#1858	flex: 1;
#1859	display: flex;
#1860	align-items: center;
#1861	justify-content: center;
#1862	gap: 0.5rem;
#1863	padding: 0.65rem 1rem;
#1864	border: 1px solid var(--gray-200);
#1865	border-radius: 0.5rem;
#1866	background: #fff;
#1867	font-size: 0.85rem;
#1868	font-weight: 600;
#1869	color: var(--gray-700);
#1870	cursor: pointer;
#1871	transition: all 0.2s;
#1872	font-family: var(--font-sans);
#1873	}
#1874
#1875	.login-social-btn:hover {
#1876	border-color: var(--gray-300);
#1877	background: var(--gray-50);
#1878	}
#1879
#1880	.login-social-icon {
#1881	font-weight: 700;
#1882	color: var(--gray-500);
#1883	}
#1884
#1885	/* Register link */
#1886	.login-register-link {
#1887	text-align: center;
#1888	font-size: 0.85rem;
#1889	color: var(--gray-500);
#1890	margin-top: 1.5rem;
#1891	}
#1892
#1893	.login-register-link a {
#1894	color: var(--green-600);
#1895	font-weight: 600;
#1896	transition: color 0.2s;
#1897	}
#1898
#1899	.login-register-link a:hover {
#1900	color: var(--green-700);
#1901	}
#1902
#1903	@media (max-width: 480px) {
#1904	.login-card {
#1905	padding: 2rem 1.25rem;
#1906	}
#1907	.login-social {
#1908	flex-direction: column;
#1909	}
#1910	}
#1911
#1912	/* ===== Dashboard Shared ===== */
#1913	.dash-page {
#1914	min-height: 100vh;
#1915	background: var(--gray-50);
#1916	}
#1917
#1918	.dash-container {
#1919	max-width: 1200px;
#1920	margin: 0 auto;
#1921	padding: 6rem 1.5rem 2rem;
#1922	}
#1923
#1924	.dash-header {
#1925	display: flex;
#1926	justify-content: space-between;
#1927	align-items: flex-start;
#1928	flex-wrap: wrap;
#1929	gap: 1rem;
#1930	margin-bottom: 2rem;
#1931	}
#1932
#1933	.dash-header h1 {
#1934	font-size: 1.75rem;
#1935	font-weight: 700;
#1936	color: var(--gray-900);
#1937	letter-spacing: -0.01em;
#1938	}
#1939
#1940	.dash-org-name {
#1941	display: flex;
#1942	align-items: center;
#1943	gap: 0.75rem;
#1944	flex-wrap: wrap;
#1945	}
#1946
#1947	.dash-org-name h1 {
#1948	margin: 0;
#1949	}
#1950
#1951	.dash-verified-badge {
#1952	display: inline-flex;
#1953	align-items: center;
#1954	gap: 0.3rem;
#1955	font-size: 0.72rem;
#1956	font-weight: 600;
#1957	text-transform: uppercase;
#1958	letter-spacing: 0.04em;
#1959	color: var(--green-700);
#1960	background: var(--green-100);
#1961	border: 1px solid var(--green-200);
#1962	padding: 0.25rem 0.6rem;
#1963	border-radius: 999px;
#1964	}
#1965
#1966	.dash-org-meta {
#1967	font-size: 0.9rem;
#1968	color: var(--gray-500);
#1969	margin-top: 0.25rem;
#1970	}
#1971
#1972	/* Dashboard nav tabs */
#1973	.dash-nav-tabs {
#1974	display: flex;
#1975	gap: 0.25rem;
#1976	overflow-x: auto;
#1977	}
#1978
#1979	.dash-nav-tab {
#1980	padding: 0.5rem 1rem;
#1981	border: none;
#1982	background: none;
#1983	font-size: 0.85rem;
#1984	font-weight: 500;
#1985	color: var(--gray-500);
#1986	cursor: pointer;
#1987	border-radius: 0.375rem;
#1988	transition: all 0.15s;
#1989	white-space: nowrap;
#1990	font-family: var(--font-sans);
#1991	}
#1992
#1993	.dash-nav-tab:hover {
#1994	color: var(--gray-700);
#1995	background: var(--gray-100);
#1996	}
#1997
#1998	.dash-nav-tab-active {
#1999	color: var(--green-700);
#2000	background: var(--green-50);
#2001	font-weight: 600;
#2002	}
#2003
#2004	@media (max-width: 900px) {
#2005	.dash-nav-tabs {
#2006	display: none;
#2007	}
#2008	}
#2009
#2010	/* Stats grid */
#2011	.dash-stats-grid {
#2012	display: grid;
#2013	grid-template-columns: repeat(4, 1fr);
#2014	gap: 1rem;
#2015	margin-bottom: 1.5rem;
#2016	}
#2017
#2018	@media (max-width: 768px) {
#2019	.dash-stats-grid {
#2020	grid-template-columns: repeat(2, 1fr);
#2021	}
#2022	}
#2023
#2024	@media (max-width: 480px) {
#2025	.dash-stats-grid {
#2026	grid-template-columns: 1fr;
#2027	}
#2028	}
#2029
#2030	.dash-stat-card {
#2031	display: flex;
#2032	align-items: center;
#2033	gap: 1rem;
#2034	background: #fff;
#2035	border: 1px solid var(--gray-200);
#2036	border-radius: 0.75rem;
#2037	padding: 1.25rem;
#2038	transition: box-shadow 0.2s, transform 0.2s;
#2039	}
#2040
#2041	.dash-stat-card:hover {
#2042	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
#2043	transform: translateY(-1px);
#2044	}
#2045
#2046	.dash-stat-icon {
#2047	display: flex;
#2048	align-items: center;
#2049	justify-content: center;
#2050	width: 2.75rem;
#2051	height: 2.75rem;
#2052	border-radius: 0.625rem;
#2053	font-size: 1.25rem;
#2054	flex-shrink: 0;
#2055	}
#2056
#2057	.dash-stat-info {
#2058	display: flex;
#2059	flex-direction: column;
#2060	}
#2061
#2062	.dash-stat-value {
#2063	font-size: 1.5rem;
#2064	font-weight: 800;
#2065	color: var(--gray-900);
#2066	line-height: 1.2;
#2067	letter-spacing: -0.02em;
#2068	}
#2069
#2070	.dash-stat-label {
#2071	font-size: 0.78rem;
#2072	color: var(--gray-500);
#2073	font-weight: 500;
#2074	}
#2075
#2076	/* Grid layouts */
#2077	.dash-grid-2 {
#2078	display: grid;
#2079	grid-template-columns: 1fr 1fr;
#2080	gap: 1.5rem;
#2081	margin-bottom: 1.5rem;
#2082	align-items: start;
#2083	}
#2084
#2085	@media (max-width: 768px) {
#2086	.dash-grid-2 {
#2087	grid-template-columns: 1fr;
#2088	}
#2089	}
#2090
#2091	/* Cards */
#2092	.dash-card {
#2093	background: #fff;
#2094	border: 1px solid var(--gray-200);
#2095	border-radius: 0.75rem;
#2096	padding: 1.5rem;
#2097	margin-bottom: 1.5rem;
#2098	}
#2099
#2100	.dash-card-header {
#2101	display: flex;
#2102	justify-content: space-between;
#2103	align-items: center;
#2104	flex-wrap: wrap;
#2105	gap: 0.75rem;
#2106	margin-bottom: 1.25rem;
#2107	}
#2108
#2109	.dash-card-title {
#2110	font-size: 1rem;
#2111	font-weight: 600;
#2112	color: var(--gray-900);
#2113	margin-bottom: 0;
#2114	}
#2115
#2116	.dash-content {
#2117	display: flex;
#2118	flex-direction: column;
#2119	}
#2120
#2121	/* Status badges */
#2122	.dash-status {
#2123	display: inline-flex;
#2124	align-items: center;
#2125	font-size: 0.72rem;
#2126	font-weight: 600;
#2127	text-transform: uppercase;
#2128	letter-spacing: 0.04em;
#2129	padding: 0.2rem 0.6rem;
#2130	border-radius: 999px;
#2131	}
#2132
#2133	.dash-status-new {
#2134	background: var(--blue-100, #dbeafe);
#2135	color: #1e40af;
#2136	}
#2137
#2138	.dash-status-reviewed {
#2139	background: var(--gray-100);
#2140	color: var(--gray-600);
#2141	}
#2142
#2143	.dash-status-shortlisted,
#2144	.dash-status-interview {
#2145	background: var(--gold-100, #fef9c3);
#2146	color: #92400e;
#2147	}
#2148
#2149	.dash-status-accepted {
#2150	background: var(--green-100);
#2151	color: var(--green-800);
#2152	}
#2153
#2154	.dash-status-rejected {
#2155	background: #fef2f2;
#2156	color: #991b1b;
#2157	}
#2158
#2159	.dash-status-submitted,
#2160	.dash-status-underreview {
#2161	background: var(--blue-100, #dbeafe);
#2162	color: #1e40af;
#2163	}
#2164
#2165	.dash-status-active {
#2166	background: var(--green-100);
#2167	color: var(--green-800);
#2168	}
#2169
#2170	.dash-status-closed {
#2171	background: var(--gray-100);
#2172	color: var(--gray-600);
#2173	}
#2174
#2175	.dash-status-draft {
#2176	background: var(--gold-100, #fef9c3);
#2177	color: #92400e;
#2178	}
#2179
#2180	/* Skill tags */
#2181	.dash-skill-tags {
#2182	display: flex;
#2183	flex-wrap: wrap;
#2184	gap: 0.4rem;
#2185	}
#2186
#2187	.dash-skill-tag {
#2188	display: inline-block;
#2189	font-size: 0.75rem;
#2190	font-weight: 500;
#2191	padding: 0.2rem 0.6rem;
#2192	border-radius: 999px;
#2193	background: var(--gray-100);
#2194	color: var(--gray-600);
#2195	border: 1px solid var(--gray-200);
#2196	}
#2197
#2198	/* ===== Applicant List (Org Dashboard) ===== */
#2199	.dash-applicant-list {
#2200	display: flex;
#2201	flex-direction: column;
#2202	gap: 0.75rem;
#2203	}
#2204
#2205	.dash-applicant-row {
#2206	display: flex;
#2207	align-items: center;
#2208	gap: 0.75rem;
#2209	padding: 0.75rem 0;
#2210	border-bottom: 1px solid var(--gray-100);
#2211	}
#2212
#2213	.dash-applicant-row:last-child {
#2214	border-bottom: none;
#2215	}
#2216
#2217	.dash-applicant-avatar {
#2218	width: 2.25rem;
#2219	height: 2.25rem;
#2220	border-radius: 50%;
#2221	background: var(--green-100);
#2222	color: var(--green-800);
#2223	display: flex;
#2224	align-items: center;
#2225	justify-content: center;
#2226	font-size: 0.85rem;
#2227	font-weight: 700;
#2228	flex-shrink: 0;
#2229	}
#2230
#2231	.dash-applicant-info {
#2232	flex: 1;
#2233	display: flex;
#2234	flex-direction: column;
#2235	min-width: 0;
#2236	}
#2237
#2238	.dash-applicant-name {
#2239	font-size: 0.9rem;
#2240	font-weight: 600;
#2241	color: var(--gray-900);
#2242	}
#2243
#2244	.dash-applicant-detail {
#2245	font-size: 0.78rem;
#2246	color: var(--gray-500);
#2247	overflow: hidden;
#2248	text-overflow: ellipsis;
#2249	white-space: nowrap;
#2250	}
#2251
#2252	/* ===== Opportunity List (Org Dashboard) ===== */
#2253	.dash-opp-list {
#2254	display: flex;
#2255	flex-direction: column;
#2256	gap: 0.5rem;
#2257	}
#2258
#2259	.dash-opp-row {
#2260	display: flex;
#2261	align-items: center;
#2262	justify-content: space-between;
#2263	gap: 1rem;
#2264	padding: 0.75rem 0;
#2265	border-bottom: 1px solid var(--gray-100);
#2266	}
#2267
#2268	.dash-opp-row:last-child {
#2269	border-bottom: none;
#2270	}
#2271
#2272	.dash-opp-info {
#2273	display: flex;
#2274	flex-direction: column;
#2275	min-width: 0;
#2276	}
#2277
#2278	.dash-opp-title {
#2279	font-size: 0.9rem;
#2280	font-weight: 600;
#2281	color: var(--gray-900);
#2282	}
#2283
#2284	.dash-opp-meta {
#2285	font-size: 0.78rem;
#2286	color: var(--gray-500);
#2287	}
#2288
#2289	.dash-opp-applicants {
#2290	display: flex;
#2291	flex-direction: column;
#2292	align-items: center;
#2293	flex-shrink: 0;
#2294	}
#2295
#2296	.dash-opp-count {
#2297	font-size: 1.25rem;
#2298	font-weight: 800;
#2299	color: var(--green-600);
#2300	}
#2301
#2302	.dash-opp-count-label {
#2303	font-size: 0.68rem;
#2304	color: var(--gray-500);
#2305	}
#2306
#2307	/* ===== Tables (Org Dashboard) ===== */
#2308	.dash-table-wrap {
#2309	overflow-x: auto;
#2310	}
#2311
#2312	.dash-table {
#2313	width: 100%;
#2314	border-collapse: collapse;
#2315	font-size: 0.85rem;
#2316	}
#2317
#2318	.dash-table th {
#2319	text-align: left;
#2320	font-size: 0.72rem;
#2321	font-weight: 600;
#2322	text-transform: uppercase;
#2323	letter-spacing: 0.05em;
#2324	color: var(--gray-500);
#2325	padding: 0.75rem 1rem;
#2326	border-bottom: 2px solid var(--gray-200);
#2327	white-space: nowrap;
#2328	}
#2329
#2330	.dash-table td {
#2331	padding: 0.85rem 1rem;
#2332	border-bottom: 1px solid var(--gray-100);
#2333	color: var(--gray-700);
#2334	vertical-align: middle;
#2335	}
#2336
#2337	.dash-table tbody tr:hover {
#2338	background: var(--gray-50);
#2339	}
#2340
#2341	.dash-table-title {
#2342	font-weight: 600;
#2343	color: var(--gray-900) !important;
#2344	}
#2345
#2346	.dash-table-count {
#2347	display: inline-flex;
#2348	align-items: center;
#2349	justify-content: center;
#2350	width: 2rem;
#2351	height: 2rem;
#2352	border-radius: 50%;
#2353	background: var(--green-50);
#2354	color: var(--green-700);
#2355	font-weight: 700;
#2356	font-size: 0.8rem;
#2357	}
#2358
#2359	.dash-actions {
#2360	display: flex;
#2361	gap: 0.4rem;
#2362	}
#2363
#2364	.dash-action-btn {
#2365	width: 2rem;
#2366	height: 2rem;
#2367	display: flex;
#2368	align-items: center;
#2369	justify-content: center;
#2370	border: 1px solid var(--gray-200);
#2371	border-radius: 0.375rem;
#2372	background: #fff;
#2373	cursor: pointer;
#2374	font-size: 0.85rem;
#2375	transition: all 0.15s;
#2376	}
#2377
#2378	.dash-action-btn:hover {
#2379	border-color: var(--green-400);
#2380	background: var(--green-50);
#2381	}
#2382
#2383	.dash-filter-chips {
#2384	display: flex;
#2385	flex-wrap: wrap;
#2386	gap: 0.4rem;
#2387	}
#2388
#2389	/* ===== Youth: Profile completeness ===== */
#2390	.youth-profile-completeness {
#2391	display: flex;
#2392	align-items: center;
#2393	gap: 0.75rem;
#2394	flex-shrink: 0;
#2395	}
#2396
#2397	.youth-pc-label {
#2398	font-size: 0.78rem;
#2399	color: var(--gray-500);
#2400	font-weight: 500;
#2401	white-space: nowrap;
#2402	}
#2403
#2404	.youth-pc-bar {
#2405	width: 100px;
#2406	height: 6px;
#2407	background: var(--gray-200);
#2408	border-radius: 999px;
#2409	overflow: hidden;
#2410	}
#2411
#2412	.youth-pc-fill {
#2413	height: 100%;
#2414	background: var(--green-500);
#2415	border-radius: 999px;
#2416	transition: width 0.4s ease;
#2417	}
#2418
#2419	.youth-pc-pct {
#2420	font-size: 0.85rem;
#2421	font-weight: 700;
#2422	color: var(--green-600);
#2423	min-width: 2.5rem;
#2424	}
#2425
#2426	/* ===== Youth: Nav avatar ===== */
#2427	.youth-nav-avatar {
#2428	width: 2rem;
#2429	height: 2rem;
#2430	border-radius: 50%;
#2431	background: var(--green-600);
#2432	color: #fff;
#2433	display: flex;
#2434	align-items: center;
#2435	justify-content: center;
#2436	font-size: 0.75rem;
#2437	font-weight: 700;
#2438	cursor: default;
#2439	}
#2440
#2441	/* ===== Youth: Recommended list ===== */
#2442	.youth-recommended-list {
#2443	display: flex;
#2444	flex-direction: column;
#2445	gap: 0.6rem;
#2446	}
#2447
#2448	.youth-recommended-row {
#2449	display: flex;
#2450	align-items: center;
#2451	gap: 0.75rem;
#2452	padding: 0.6rem 0;
#2453	border-bottom: 1px solid var(--gray-100);
#2454	}
#2455
#2456	.youth-recommended-row:last-child {
#2457	border-bottom: none;
#2458	}
#2459
#2460	.youth-rec-avatar {
#2461	width: 2.25rem;
#2462	height: 2.25rem;
#2463	border-radius: 0.5rem;
#2464	background: var(--green-100);
#2465	color: var(--green-800);
#2466	display: flex;
#2467	align-items: center;
#2468	justify-content: center;
#2469	font-size: 0.85rem;
#2470	font-weight: 700;
#2471	flex-shrink: 0;
#2472	}
#2473
#2474	.youth-rec-info {
#2475	flex: 1;
#2476	display: flex;
#2477	flex-direction: column;
#2478	min-width: 0;
#2479	}
#2480
#2481	.youth-rec-title {
#2482	font-size: 0.88rem;
#2483	font-weight: 600;
#2484	color: var(--gray-900);
#2485	}
#2486
#2487	.youth-rec-meta {
#2488	font-size: 0.75rem;
#2489	color: var(--gray-500);
#2490	overflow: hidden;
#2491	text-overflow: ellipsis;
#2492	white-space: nowrap;
#2493	}
#2494
#2495	.youth-rec-match {
#2496	display: flex;
#2497	flex-direction: column;
#2498	align-items: center;
#2499	flex-shrink: 0;
#2500	}
#2501
#2502	.youth-rec-match-pct {
#2503	font-size: 1rem;
#2504	font-weight: 800;
#2505	color: var(--green-600);
#2506	}
#2507
#2508	.youth-rec-match-label {
#2509	font-size: 0.65rem;
#2510	color: var(--gray-500);
#2511	text-transform: uppercase;
#2512	letter-spacing: 0.04em;
#2513	}
#2514
#2515	/* ===== Youth: Application list ===== */
#2516	.youth-app-list {
#2517	display: flex;
#2518	flex-direction: column;
#2519	gap: 0.6rem;
#2520	}
#2521
#2522	.youth-app-row {
#2523	display: flex;
#2524	align-items: center;
#2525	justify-content: space-between;
#2526	gap: 0.75rem;
#2527	padding: 0.6rem 0;
#2528	border-bottom: 1px solid var(--gray-100);
#2529	}
#2530
#2531	.youth-app-row:last-child {
#2532	border-bottom: none;
#2533	}
#2534
#2535	.youth-app-info {
#2536	display: flex;
#2537	flex-direction: column;
#2538	min-width: 0;
#2539	}
#2540
#2541	.youth-app-title {
#2542	font-size: 0.88rem;
#2543	font-weight: 600;
#2544	color: var(--gray-900);
#2545	}
#2546
#2547	.youth-app-meta {
#2548	font-size: 0.75rem;
#2549	color: var(--gray-500);
#2550	}
#2551
#2552	.youth-app-stats {
#2553	display: flex;
#2554	gap: 1rem;
#2555	}
#2556
#2557	.youth-app-stat {
#2558	font-size: 0.8rem;
#2559	color: var(--gray-500);
#2560	font-weight: 500;
#2561	}
#2562
#2563	/* ===== Youth: Quick actions ===== */
#2564	.youth-quick-actions {
#2565	display: grid;
#2566	grid-template-columns: repeat(4, 1fr);
#2567	gap: 0.75rem;
#2568	}
#2569
#2570	@media (max-width: 640px) {
#2571	.youth-quick-actions {
#2572	grid-template-columns: repeat(2, 1fr);
#2573	}
#2574	}
#2575
#2576	.youth-quick-action {
#2577	display: flex;
#2578	flex-direction: column;
#2579	align-items: center;
#2580	gap: 0.5rem;
#2581	padding: 1.25rem 0.75rem;
#2582	border: 1px solid var(--gray-200);
#2583	border-radius: 0.75rem;
#2584	background: #fff;
#2585	cursor: pointer;
#2586	transition: all 0.2s;
#2587	position: relative;
#2588	font-family: var(--font-sans);
#2589	}
#2590
#2591	.youth-quick-action:hover {
#2592	border-color: var(--green-400);
#2593	background: var(--green-50);
#2594	transform: translateY(-2px);
#2595	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);
#2596	}
#2597
#2598	.youth-qa-icon {
#2599	font-size: 1.5rem;
#2600	}
#2601
#2602	.youth-qa-label {
#2603	font-size: 0.78rem;
#2604	font-weight: 600;
#2605	color: var(--gray-700);
#2606	text-align: center;
#2607	}
#2608
#2609	.youth-qa-badge {
#2610	position: absolute;
#2611	top: 0.5rem;
#2612	right: 0.5rem;
#2613	width: 1.25rem;
#2614	height: 1.25rem;
#2615	border-radius: 50%;
#2616	background: var(--red-500);
#2617	color: #fff;
#2618	font-size: 0.65rem;
#2619	font-weight: 700;
#2620	display: flex;
#2621	align-items: center;
#2622	justify-content: center;
#2623	}
#2624
#2625	/* ===== Youth: Opportunity cards ===== */
#2626	.youth-opp-grid {
#2627	display: grid;
#2628	grid-template-columns: 1fr;
#2629	gap: 1rem;
#2630	}
#2631
#2632	.youth-opp-card {
#2633	background: #fff;
#2634	border: 1px solid var(--gray-200);
#2635	border-radius: 0.75rem;
#2636	padding: 1.25rem;
#2637	transition: all 0.2s;
#2638	}
#2639
#2640	.youth-opp-card:hover {
#2641	border-color: var(--green-300);
#2642	box-shadow: 0 4px 16px rgba(34, 197, 94, 0.06);
#2643	}
#2644
#2645	.youth-opp-applied {
#2646	border-color: var(--green-300);
#2647	background: var(--green-50);
#2648	}
#2649
#2650	.youth-opp-header {
#2651	display: flex;
#2652	justify-content: space-between;
#2653	align-items: flex-start;
#2654	margin-bottom: 0.5rem;
#2655	}
#2656
#2657	.youth-opp-org {
#2658	display: flex;
#2659	align-items: center;
#2660	gap: 0.6rem;
#2661	}
#2662
#2663	.youth-opp-org-avatar {
#2664	width: 2rem;
#2665	height: 2rem;
#2666	border-radius: 0.375rem;
#2667	background: var(--green-100);
#2668	color: var(--green-800);
#2669	display: flex;
#2670	align-items: center;
#2671	justify-content: center;
#2672	font-size: 0.8rem;
#2673	font-weight: 700;
#2674	flex-shrink: 0;
#2675	}
#2676
#2677	.youth-opp-org-name {
#2678	font-size: 0.82rem;
#2679	font-weight: 600;
#2680	color: var(--gray-700);
#2681	display: flex;
#2682	align-items: center;
#2683	gap: 0.3rem;
#2684	}
#2685
#2686	.youth-opp-verified {
#2687	color: var(--green-600);
#2688	font-size: 0.7rem;
#2689	font-weight: 800;
#2690	}
#2691
#2692	.youth-opp-posted {
#2693	font-size: 0.72rem;
#2694	color: var(--gray-400);
#2695	}
#2696
#2697	.youth-opp-save {
#2698	background: none;
#2699	border: none;
#2700	font-size: 1.2rem;
#2701	cursor: pointer;
#2702	color: var(--gray-400);
#2703	transition: color 0.15s;
#2704	padding: 0;
#2705	line-height: 1;
#2706	}
#2707
#2708	.youth-opp-save:hover,
#2709	.youth-opp-save-active {
#2710	color: var(--gold-500);
#2711	}
#2712
#2713	.youth-opp-title {
#2714	font-size: 1.1rem;
#2715	font-weight: 700;
#2716	color: var(--gray-900);
#2717	margin-bottom: 0.6rem;
#2718	}
#2719
#2720	.youth-opp-tags {
#2721	display: flex;
#2722	flex-wrap: wrap;
#2723	gap: 0.4rem;
#2724	margin-bottom: 0.6rem;
#2725	}
#2726
#2727	.youth-opp-tag {
#2728	font-size: 0.7rem;
#2729	font-weight: 600;
#2730	padding: 0.2rem 0.55rem;
#2731	border-radius: 999px;
#2732	text-transform: uppercase;
#2733	letter-spacing: 0.03em;
#2734	}
#2735
#2736	.youth-opp-tag-type {
#2737	background: var(--blue-100, #dbeafe);
#2738	color: #1e40af;
#2739	}
#2740
#2741	.youth-opp-tag-location {
#2742	background: var(--gray-100);
#2743	color: var(--gray-600);
#2744	}
#2745
#2746	.youth-opp-tag-paid {
#2747	background: var(--gray-100);
#2748	color: var(--gray-600);
#2749	}
#2750
#2751	.youth-opp-tag-paid-yes {
#2752	background: var(--green-100);
#2753	color: var(--green-800);
#2754	}
#2755
#2756	.youth-opp-meta {
#2757	display: flex;
#2758	flex-wrap: wrap;
#2759	gap: 1rem;
#2760	font-size: 0.8rem;
#2761	color: var(--gray-500);
#2762	margin-bottom: 0.75rem;
#2763	}
#2764
#2765	.youth-opp-details {
#2766	padding-top: 0.75rem;
#2767	border-top: 1px solid var(--gray-100);
#2768	margin-bottom: 0.75rem;
#2769	}
#2770
#2771	.youth-opp-desc {
#2772	font-size: 0.88rem;
#2773	color: var(--gray-600);
#2774	line-height: 1.6;
#2775	margin-bottom: 0.75rem;
#2776	}
#2777
#2778	.youth-opp-skills {
#2779	display: flex;
#2780	align-items: center;
#2781	flex-wrap: wrap;
#2782	gap: 0.4rem;
#2783	margin-bottom: 0.75rem;
#2784	}
#2785
#2786	.youth-opp-skills-label {
#2787	font-size: 0.78rem;
#2788	font-weight: 600;
#2789	color: var(--gray-700);
#2790	margin-right: 0.25rem;
#2791	}
#2792
#2793	.youth-opp-match {
#2794	display: flex;
#2795	align-items: center;
#2796	gap: 0.6rem;
#2797	}
#2798
#2799	.youth-opp-match-label {
#2800	font-size: 0.78rem;
#2801	font-weight: 600;
#2802	color: var(--gray-700);
#2803	flex-shrink: 0;
#2804	}
#2805
#2806	.youth-opp-match-bar {
#2807	flex: 1;
#2808	height: 6px;
#2809	background: var(--gray-200);
#2810	border-radius: 999px;
#2811	overflow: hidden;
#2812	max-width: 200px;
#2813	}
#2814
#2815	.youth-opp-match-fill {
#2816	height: 100%;
#2817	background: var(--green-500);
#2818	border-radius: 999px;
#2819	transition: width 0.4s ease;
#2820	}
#2821
#2822	.youth-opp-match-pct {
#2823	font-size: 0.82rem;
#2824	font-weight: 700;
#2825	color: var(--green-600);
#2826	}
#2827
#2828	.youth-opp-actions {
#2829	display: flex;
#2830	align-items: center;
#2831	gap: 0.75rem;
#2832	padding-top: 0.75rem;
#2833	border-top: 1px solid var(--gray-100);
#2834	}
#2835
#2836	.youth-opp-applied-badge {
#2837	font-size: 0.78rem;
#2838	font-weight: 600;
#2839	color: var(--green-700);
#2840	background: var(--green-100);
#2841	padding: 0.3rem 0.75rem;
#2842	border-radius: 999px;
#2843	}
#2844
#2845	.youth-opp-applicants {
#2846	font-size: 0.75rem;
#2847	color: var(--gray-400);
#2848	margin-left: auto;
#2849	}
#2850
#2851	/* ===== Youth: Search & Filters ===== */
#2852	.youth-search-bar {
#2853	margin-bottom: 1rem;
#2854	}
#2855
#2856	.youth-search-input-wrap {
#2857	display: flex;
#2858	align-items: center;
#2859	border: 1px solid var(--gray-300);
#2860	border-radius: 0.5rem;
#2861	background: #fff;
#2862	transition: border-color 0.2s, box-shadow 0.2s;
#2863	overflow: hidden;
#2864	}
#2865
#2866	.youth-search-input-wrap:focus-within {
#2867	border-color: var(--green-500);
#2868	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
#2869	}
#2870
#2871	.youth-search-icon {
#2872	font-size: 0.9rem;
#2873	padding: 0 0 0 0.85rem;
#2874	color: var(--gray-400);
#2875	flex-shrink: 0;
#2876	}
#2877
#2878	.youth-search-input {
#2879	flex: 1;
#2880	border: none;
#2881	outline: none;
#2882	padding: 0.7rem 0.85rem;
#2883	font-size: 0.9rem;
#2884	font-family: var(--font-sans);
#2885	color: var(--gray-800);
#2886	background: transparent;
#2887	}
#2888
#2889	.youth-search-input::placeholder {
#2890	color: var(--gray-400);
#2891	}
#2892
#2893	.youth-search-clear {
#2894	background: none;
#2895	border: none;
#2896	cursor: pointer;
#2897	padding: 0 0.85rem;
#2898	font-size: 0.9rem;
#2899	color: var(--gray-400);
#2900	}
#2901
#2902	.youth-filters {
#2903	display: flex;
#2904	flex-wrap: wrap;
#2905	gap: 1rem;
#2906	margin-bottom: 0.75rem;
#2907	}
#2908
#2909	.youth-filter-group {
#2910	display: flex;
#2911	flex-direction: column;
#2912	gap: 0.25rem;
#2913	min-width: 140px;
#2914	}
#2915
#2916	.youth-filter-label {
#2917	font-size: 0.72rem;
#2918	font-weight: 600;
#2919	text-transform: uppercase;
#2920	letter-spacing: 0.04em;
#2921	color: var(--gray-500);
#2922	}
#2923
#2924	.youth-results-count {
#2925	font-size: 0.82rem;
#2926	color: var(--gray-500);
#2927	font-weight: 500;
#2928	}
#2929
#2930	/* ===== Youth: Application timeline ===== */
#2931	.youth-app-timeline {
#2932	display: flex;
#2933	flex-direction: column;
#2934	gap: 0;
#2935	}
#2936
#2937	.youth-timeline-item {
#2938	display: flex;
#2939	gap: 1rem;
#2940	position: relative;
#2941	padding-bottom: 1.5rem;
#2942	}
#2943
#2944	.youth-timeline-item:last-child {
#2945	padding-bottom: 0;
#2946	}
#2947
#2948	.youth-timeline-marker {
#2949	width: 12px;
#2950	height: 12px;
#2951	border-radius: 50%;
#2952	background: var(--gray-300);
#2953	flex-shrink: 0;
#2954	margin-top: 0.35rem;
#2955	position: relative;
#2956	z-index: 1;
#2957	}
#2958
#2959	.youth-timeline-item:not(:last-child)::before {
#2960	content: "";
#2961	position: absolute;
#2962	left: 5px;
#2963	top: 1.1rem;
#2964	bottom: 0;
#2965	width: 2px;
#2966	background: var(--gray-200);
#2967	}
#2968
#2969	.youth-timeline-submitted .youth-timeline-marker,
#2970	.youth-timeline-underreview .youth-timeline-marker {
#2971	background: #3b82f6;
#2972	}
#2973
#2974	.youth-timeline-shortlisted .youth-timeline-marker,
#2975	.youth-timeline-interview .youth-timeline-marker {
#2976	background: var(--gold-500);
#2977	}
#2978
#2979	.youth-timeline-accepted .youth-timeline-marker {
#2980	background: var(--green-500);
#2981	}
#2982
#2983	.youth-timeline-rejected .youth-timeline-marker {
#2984	background: var(--red-500);
#2985	}
#2986
#2987	.youth-timeline-content {
#2988	flex: 1;
#2989	min-width: 0;
#2990	}
#2991
#2992	.youth-timeline-header {
#2993	display: flex;
#2994	justify-content: space-between;
#2995	align-items: flex-start;
#2996	gap: 0.75rem;
#2997	margin-bottom: 0.35rem;
#2998	}
#2999
#3000	.youth-timeline-title {
#3001	font-size: 0.95rem;
#3002	font-weight: 600;
#3003	color: var(--gray-900);
#3004	}
#3005
#3006	.youth-timeline-org {
#3007	font-size: 0.78rem;
#3008	color: var(--gray-500);
#3009	}
#3010
#3011	.youth-timeline-meta {
#3012	display: flex;
#3013	flex-wrap: wrap;
#3014	gap: 0.75rem;
#3015	font-size: 0.78rem;
#3016	color: var(--gray-500);
#3017	}
#3018
#3019	.youth-timeline-next {
#3020	color: var(--green-600);
#3021	font-weight: 500;
#3022	}
#3023
#3024	/* ===== Youth: Notifications ===== */
#3025	.youth-notif-list {
#3026	display: flex;
#3027	flex-direction: column;
#3028	gap: 0;
#3029	}
#3030
#3031	.youth-notif-item {
#3032	display: flex;
#3033	align-items: flex-start;
#3034	gap: 0.75rem;
#3035	padding: 1rem 0;
#3036	border-bottom: 1px solid var(--gray-100);
#3037	position: relative;
#3038	}
#3039
#3040	.youth-notif-item:last-child {
#3041	border-bottom: none;
#3042	}
#3043
#3044	.youth-notif-unread {
#3045	background: var(--green-50);
#3046	margin: 0 -1.5rem;
#3047	padding: 1rem 1.5rem;
#3048	border-radius: 0.5rem;
#3049	}
#3050
#3051	.youth-notif-icon {
#3052	width: 2.25rem;
#3053	height: 2.25rem;
#3054	border-radius: 50%;
#3055	background: var(--gray-100);
#3056	display: flex;
#3057	align-items: center;
#3058	justify-content: center;
#3059	font-size: 1rem;
#3060	flex-shrink: 0;
#3061	}
#3062
#3063	.youth-notif-unread .youth-notif-icon {
#3064	background: var(--green-100);
#3065	}
#3066
#3067	.youth-notif-content {
#3068	flex: 1;
#3069	min-width: 0;
#3070	}
#3071
#3072	.youth-notif-title {
#3073	font-size: 0.88rem;
#3074	font-weight: 600;
#3075	color: var(--gray-900);
#3076	margin-bottom: 0.15rem;
#3077	}
#3078
#3079	.youth-notif-desc {
#3080	font-size: 0.82rem;
#3081	color: var(--gray-600);
#3082	line-height: 1.5;
#3083	margin-bottom: 0.25rem;
#3084	}
#3085
#3086	.youth-notif-time {
#3087	font-size: 0.72rem;
#3088	color: var(--gray-400);
#3089	}
#3090
#3091	.youth-notif-dot {
#3092	width: 8px;
#3093	height: 8px;
#3094	border-radius: 50%;
#3095	background: var(--green-500);
#3096	flex-shrink: 0;
#3097	margin-top: 0.5rem;
#3098	}
#3099
#3100	/* ===== Youth: Profile ===== */
#3101	.youth-profile-header {
#3102	display: flex;
#3103	align-items: center;
#3104	gap: 1.25rem;
#3105	margin-bottom: 1.25rem;
#3106	}
#3107
#3108	.youth-profile-avatar-lg {
#3109	width: 3.5rem;
#3110	height: 3.5rem;
#3111	border-radius: 50%;
#3112	background: var(--green-600);
#3113	color: #fff;
#3114	display: flex;
#3115	align-items: center;
#3116	justify-content: center;
#3117	font-size: 1.25rem;
#3118	font-weight: 700;
#3119	flex-shrink: 0;
#3120	}
#3121
#3122	.youth-profile-name {
#3123	font-size: 1.35rem;
#3124	font-weight: 700;
#3125	color: var(--gray-900);
#3126	margin-bottom: 0.15rem;
#3127	}
#3128
#3129	.youth-profile-tagline {
#3130	font-size: 0.88rem;
#3131	color: var(--gray-500);
#3132	}
#3133
#3134	.youth-profile-location {
#3135	font-size: 0.82rem;
#3136	color: var(--gray-500);
#3137	margin-top: 0.15rem;
#3138	}
#3139
#3140	.youth-profile-bio {
#3141	font-size: 0.9rem;
#3142	color: var(--gray-600);
#3143	line-height: 1.6;
#3144	margin-bottom: 1rem;
#3145	}
#3146
#3147	.youth-profile-detail {
#3148	display: flex;
#3149	justify-content: space-between;
#3150	align-items: center;
#3151	padding: 0.5rem 0;
#3152	border-bottom: 1px solid var(--gray-100);
#3153	}
#3154
#3155	.youth-profile-detail:last-child {
#3156	border-bottom: none;
#3157	}
#3158
#3159	.youth-pd-label {
#3160	font-size: 0.82rem;
#3161	color: var(--gray-500);
#3162	font-weight: 500;
#3163	}
#3164
#3165	.youth-pd-value {
#3166	font-size: 0.88rem;
#3167	font-weight: 600;
#3168	color: var(--gray-800);
#3169	}
#3170
#3171	.youth-profile-section {
#3172	margin-bottom: 1rem;
#3173	}
#3174
#3175	.youth-ps-label {
#3176	font-size: 0.82rem;
#3177	font-weight: 600;
#3178	color: var(--gray-700);
#3179	margin-bottom: 0.5rem;
#3180	}
#3181
#3182	/* ===== Youth: Empty states ===== */
#3183	.youth-empty {
#3184	text-align: center;
#3185	padding: 3rem 1.5rem;
#3186	}
#3187
#3188	.youth-empty-icon {
#3189	font-size: 2.5rem;
#3190	margin-bottom: 0.75rem;
#3191	}
#3192
#3193	.youth-empty h3 {
#3194	font-size: 1.1rem;
#3195	font-weight: 600;
#3196	color: var(--gray-900);
#3197	margin-bottom: 0.35rem;
#3198	}
#3199
#3200	.youth-empty p {
#3201	font-size: 0.9rem;
#3202	color: var(--gray-500);
#3203	}
#3204
#3205	/* ===== Modals ===== */
#3206	.dash-modal-overlay {
#3207	position: fixed;
#3208	inset: 0;
#3209	background: rgba(0, 0, 0, 0.4);
#3210	display: flex;
#3211	align-items: center;
#3212	justify-content: center;
#3213	z-index: 200;
#3214	padding: 1.5rem;
#3215	backdrop-filter: blur(4px);
#3216	}
#3217
#3218	.dash-modal {
#3219	background: #fff;
#3220	border-radius: 1rem;
#3221	width: 100%;
#3222	max-width: 520px;
#3223	max-height: 90vh;
#3224	overflow-y: auto;
#3225	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
#3226	}
#3227
#3228	.dash-modal-lg {
#3229	max-width: 720px;
#3230	}
#3231
#3232	.dash-modal-header {
#3233	display: flex;
#3234	justify-content: space-between;
#3235	align-items: center;
#3236	padding: 1.25rem 1.5rem;
#3237	border-bottom: 1px solid var(--gray-200);
#3238	position: sticky;
#3239	top: 0;
#3240	background: #fff;
#3241	z-index: 1;
#3242	border-radius: 1rem 1rem 0 0;
#3243	}
#3244
#3245	.dash-modal-header h2 {
#3246	font-size: 1.15rem;
#3247	font-weight: 700;
#3248	color: var(--gray-900);
#3249	}
#3250
#3251	.dash-modal-close {
#3252	background: none;
#3253	border: none;
#3254	font-size: 1.25rem;
#3255	cursor: pointer;
#3256	color: var(--gray-400);
#3257	padding: 0;
#3258	width: 2rem;
#3259	height: 2rem;
#3260	display: flex;
#3261	align-items: center;
#3262	justify-content: center;
#3263	border-radius: 0.375rem;
#3264	transition: all 0.15s;
#3265	}
#3266
#3267	.dash-modal-close:hover {
#3268	background: var(--gray-100);
#3269	color: var(--gray-700);
#3270	}
#3271
#3272	.dash-modal-body {
#3273	padding: 1.5rem;
#3274	}
#3275
#3276	/* ===== Dashboard Sidebar ===== */
#3277	.dash-nav-left {
#3278	display: flex;
#3279	align-items: center;
#3280	gap: 0.75rem;
#3281	}
#3282
#3283	.dash-sidebar-toggle {
#3284	display: none;
#3285	background: none;
#3286	border: none;
#3287	font-size: 1.3rem;
#3288	cursor: pointer;
#3289	color: var(--gray-700);
#3290	padding: 0.25rem;
#3291	}
#3292
#3293	@media (max-width: 900px) {
#3294	.dash-sidebar-toggle {
#3295	display: block;
#3296	}
#3297	}
#3298
#3299	.dash-mobile-overlay {
#3300	position: fixed;
#3301	inset: 0;
#3302	background: rgba(0, 0, 0, 0.3);
#3303	z-index: 150;
#3304	backdrop-filter: blur(2px);
#3305	}
#3306
#3307	.dash-sidebar {
#3308	position: fixed;
#3309	top: 4rem;
#3310	left: 0;
#3311	bottom: 0;
#3312	width: 260px;
#3313	background: #fff;
#3314	border-right: 1px solid var(--gray-200);
#3315	z-index: 150;
#3316	display: flex;
#3317	flex-direction: column;
#3318	overflow-y: auto;
#3319	transform: translateX(-100%);
#3320	transition: transform 0.25s ease;
#3321	}
#3322
#3323	.dash-sidebar-open {
#3324	transform: translateX(0);
#3325	}
#3326
#3327	@media (min-width: 901px) {
#3328	.dash-sidebar {
#3329	transform: translateX(0);
#3330	}
#3331	.dash-mobile-overlay {
#3332	display: none;
#3333	}
#3334	.dash-container {
#3335	margin-left: 260px;
#3336	}
#3337	}
#3338
#3339	.dash-sidebar-user {
#3340	display: flex;
#3341	align-items: center;
#3342	gap: 0.75rem;
#3343	padding: 1.25rem 1.25rem 1rem;
#3344	border-bottom: 1px solid var(--gray-100);
#3345	}
#3346
#3347	.dash-sidebar-org-icon {
#3348	width: 2.75rem;
#3349	height: 2.75rem;
#3350	border-radius: 0.625rem;
#3351	background: var(--green-100);
#3352	display: flex;
#3353	align-items: center;
#3354	justify-content: center;
#3355	font-size: 1.25rem;
#3356	flex-shrink: 0;
#3357	}
#3358
#3359	.dash-sidebar-name {
#3360	font-size: 0.88rem;
#3361	font-weight: 700;
#3362	color: var(--gray-900);
#3363	display: block;
#3364	}
#3365
#3366	.dash-sidebar-sub {
#3367	font-size: 0.75rem;
#3368	color: var(--gray-500);
#3369	display: block;
#3370	}
#3371
#3372	.dash-sidebar-nav {
#3373	flex: 1;
#3374	padding: 0.75rem 0.75rem;
#3375	display: flex;
#3376	flex-direction: column;
#3377	gap: 0.15rem;
#3378	overflow-y: auto;
#3379	}
#3380
#3381	.dash-sidebar-link {
#3382	display: flex;
#3383	align-items: center;
#3384	gap: 0.75rem;
#3385	padding: 0.65rem 0.75rem;
#3386	border: none;
#3387	background: none;
#3388	border-radius: 0.5rem;
#3389	font-size: 0.88rem;
#3390	font-weight: 500;
#3391	color: var(--gray-600);
#3392	cursor: pointer;
#3393	transition: all 0.15s;
#3394	text-align: left;
#3395	width: 100%;
#3396	font-family: var(--font-sans);
#3397	position: relative;
#3398	}
#3399
#3400	.dash-sidebar-link:hover {
#3401	background: var(--gray-50);
#3402	color: var(--gray-900);
#3403	}
#3404
#3405	.dash-sidebar-link-active {
#3406	background: var(--green-50);
#3407	color: var(--green-800);
#3408	font-weight: 600;
#3409	}
#3410
#3411	.dash-sidebar-link-active:hover {
#3412	background: var(--green-100);
#3413	}
#3414
#3415	.dash-sidebar-icon {
#3416	font-size: 1.1rem;
#3417	width: 1.5rem;
#3418	text-align: center;
#3419	flex-shrink: 0;
#3420	}
#3421
#3422	.dash-sidebar-badge {
#3423	margin-left: auto;
#3424	background: var(--red-500);
#3425	color: #fff;
#3426	font-size: 0.65rem;
#3427	font-weight: 700;
#3428	width: 1.25rem;
#3429	height: 1.25rem;
#3430	border-radius: 50%;
#3431	display: flex;
#3432	align-items: center;
#3433	justify-content: center;
#3434	}
#3435
#3436	.dash-sidebar-footer {
#3437	padding: 0.75rem;
#3438	border-top: 1px solid var(--gray-100);
#3439	}
#3440

z6MkmNFz/pan-african-youth-internship