@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.dark {
    --bg: #0f0620;
    --bg2: #1a0a2e;
    --main: #5F22D9;
    --sec: #ac73ff;
    --third: #e2e8f0;
    --dropdown: #231347;
}

.light {
	--bg: #fcfcfc;
	--bg2: #dddddd;
	--main: #5F22D9;
	--sec: #ac73ff;
	--third: #080808;
	--dropdown: #dddddd;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: all 0.2s ease-in-out;
}

body {
	font-family: 'Poppins', sans-serif;
	background-color: var(--bg);
	color: var(--third);
	padding: 0 20px;
}

nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-radius: 12px;
	margin: 16px 0;
	gap: 50px;
}

.nav-logo img {
	height: 40px;
}

.input-container {
	display: flex;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	color: var(--third);
	background-color: var(--bg2);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
}

.search-input {
	flex: 1;
	padding: 12px 20px;
	border: none;
	font-size: 16px;
	background: transparent;
	color: inherit;
	outline: none;
	width: 100%;
}

.search-button {
	background-color: var(--main);
	color: #ececec;
	padding: 0 20px;
	border: none;
	cursor: pointer;
}

.search-button:hover {
	background-color: #4a1ab5;
	color: #ececec;
}

.tabs {
	display: flex;
	gap: 24px;
	margin-bottom: 20px;
	padding-left: 8px;
	font-size: 16px;
	border-bottom: 1px solid #313335;
}

.tabs a {
	padding: 12px 0;
	text-decoration: none;
	color: inherit;
	position: relative;
}

.tabs a:hover,
.tabs a.active {
	color: #5F22D9;
}

.tabs a.active::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 3px;
	background-color: #5F22D9;
	border-radius: 3px;
}

.results-container {
	display: flex;
	gap: 20px;
	margin: 0 auto;
}

.results-main {
	flex: 1;
	min-width: 0;
}

.knowledge-panel {
	border-radius: 8px;
	padding: 20px;
	max-width: 300px;
	width: 100%;
	background: var(--bg2);
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
	color: var(--third);
}

body.dark .knowledge-panel {
}

.knowledge-panel img {
	max-width: 100%;
	border-radius: 5px;
	margin-bottom: 10px;
}

.knowledge-panel h2 {
	font-size: 1.5em;
	margin: 0 0 10px;
	color: var(--main);
}

.knowledge-panel p {
	font-size: 0.9em;
	color: var(--third);
	margin: 0 0 10px;
	line-height: 1.4;
}

.knowledge-panel a {
	color: var(--sec);
	text-decoration: none;
}

.knowledge-panel a:hover {
	text-decoration: underline;
}

.knowledge-panel .source {
	font-size: 0.8em;
	color: var(--third);
	opacity: 0.7;
}

.search-result {
	padding: 20px;
	border-radius: 12px;
	margin-bottom: 16px;
	background-color: var(--bg2);
	border: 1px solid var(--third);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
}

body.dark .search-result {
	background-color: #1f1f1f;
	border-color: #333;
}

.search-result h3 {
	font-size: 20px;
	margin-bottom: 4px;
	color: #5F22D9;
	word-break: break-all;
}

.navbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	margin: 10px;
	color: var(--third);
}

.navbar .left a {
	color: white;
	background-color: rgb(0 0 0 / 20%);
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 14px;
}

.navbar .right {
	position: relative;
}

.navbar .fa-cog {
	cursor: pointer;
	font-size: 20px;
	color: var(--third);
}

.dropdown {
	display: none;
	position: absolute;
	right: 0;
	top: 40px;
	background-color: var(--dropdown);
	width: 320px;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
	color: var(--third);
	z-index: 1000;
}

.dropdown-section {
	padding: 15px;
}

.dropdown-section:last-child {
	border-bottom: none;
}

.dropdown-section h4 {
	margin-bottom: 10px;
	font-size: 16px;
	color: var(--third);
}

.dropdown-section div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dropdown-section div p {
	margin: 10px 0;
	color: var(--third);
}

.theme-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
	border-radius: 25px;
	padding: 5px;
	cursor: pointer;
	background-color: var(--bg);
}

.theme-toggle i {
	font-size: 16px;
	margin: 0 10px;
	color: var(--third);
}

.theme-toggle .active {
	color: var(--main);
}

.dropdown-section div select,
.dropdown-section div input {
	background-color: var(--bg);
	color: var(--third);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
	border-radius: 5px;
	padding: 5px;
	cursor: pointer;
	width: 42%;
}

.dropdown-section .toggle-switch {
	display: flex;
	align-items: center;
}

.dropdown-section .toggle-switch input[type="checkbox"] {
	display: none;
}

.toggle-switch label {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
	border-radius: 50px;
	background-color: var(--third);
	cursor: pointer;
}

.toggle-switch label::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #fcfcfc;
	transition: all 0.3s;
}

.toggle-switch input[type="checkbox"]:checked+label {
	background-color: var(--main);
}

.toggle-switch input[type="checkbox"]:checked+label::after {
	transform: translateX(20px);
}

.dropdown-footer {
	padding: 10px 15px;
	text-align: center;
}

.dropdown-footer a {
	color: var(--third);
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.tabs {
		overflow-x: auto;
		white-space: nowrap;
		gap: 12px;
	}

	.input-container {
		flex-direction: row;
		width: 100%;
	}

	.results-container {
		flex-direction: column;
	}

	.knowledge-panel {
		max-width: 100%;
		margin-bottom: 20px;
	}
}

#results {
	margin: 20px 0;
	background: var(--bg2);
	border-radius: 10px;
	padding: 0 25px 25px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
}

#ai {
	background: var(--bg2);
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
	color: var(--third);
	padding: 1.2rem;
	margin-bottom: 20px;
}

.right {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

.meta-info {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
}

.result-item {
	padding: 8px 0 20px 0;
}

.favicon {
	border-radius: 50%;
	width: 24px;
	border: 1px solid var(--third);
}

.result-item h3 {
	font-size: 18px;
	color: var(--main);
}

.result-item p {
	margin-top: 8px;
	color: var(--third);
}

.pagination-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pagination-link.active {
	color: var(--main);
	font-weight: 600;
}

.tabs a:hover svg path {
	stroke: var(--sec) !important;
}

.tabs a svg path {
	stroke: var(--third);
}

.tabs a.active svg path {
	stroke: var(--main);
}

.image-results-container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
}

.result-item.image img {
	width: 300px;
	border-radius: 5px;
}

.search-answer-title {
	color: var(--main);
	margin-bottom: 8px;
	font-weight: 600;
}

#definition-panel {
    background: var(--bg2);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px -2px, rgba(0, 0, 0, 0.1) 0px 2px 2px -1px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
    color: var(--third);
    padding: 1.2rem;
    margin-bottom: 20px;
}

#definition-panel .search-answer-content {
    color: var(--third);
}

.tabs #nexus-tab:hover svg path {
    fill: var(--sec) !important;
}