:root{
	--kps-bg: #f7f8fb;
	--kps-surface: #ffffff;
	--kps-text: #111827;
	--kps-muted: #6b7280;

	--kps-shadow-soft: 14px 14px 28px rgba(17,24,39,.10), -14px -14px 28px rgba(255,255,255,.90);
	--kps-shadow-inset: inset 10px 10px 20px rgba(17,24,39,.08), inset -10px -10px 20px rgba(255,255,255,.95);
	--kps-shadow-hover: 18px 18px 36px rgba(17,24,39,.14), -18px -18px 36px rgba(255,255,255,.92);

	--kps-radius-xl: 26px;
	--kps-radius-lg: 20px;
	--kps-radius-md: 14px;
}

.kps-body{
	background: radial-gradient(1200px 700px at 20% 10%, #ffffff 0%, var(--kps-bg) 55%, #f3f4f6 100%);
	color: var(--kps-text);
}

.kps-neo-wrap{
	max-width: 1100px;
	margin: 14px auto 18px; /* add breathing room below navbar */
	padding: 0 18px;
}

.kps-neo-toolbar{
	display: grid;
	grid-template-columns: 1.2fr 1fr auto;
	gap: 14px;
	align-items: end;

	background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 100%);
	border-radius: var(--kps-radius-xl);
	padding: 16px 16px;
	box-shadow: var(--kps-shadow-soft);
	border: 1px solid rgba(255,255,255,.65);
	backdrop-filter: blur(8px);
}

.kps-neo-field{ display:flex; flex-direction:column; gap:8px; }
.kps-neo-field--right{ justify-self: end; width: min(420px, 100%); }

.kps-neo-label{
	font-size: 12px;
	color: var(--kps-muted);
	letter-spacing: .02em;
}

.kps-neo-input{
	height: 46px;
	padding: 0 14px;
	border-radius: var(--kps-radius-lg);
	border: 1px solid rgba(17,24,39,.06);
	background: #fff;
	box-shadow: var(--kps-shadow-inset);
	outline: none;
	font: inherit;
}

.kps-neo-input::placeholder{ color: rgba(107,114,128,.7); }

.kps-neo-input:focus{
	border-color: rgba(59,130,246,.28);
	box-shadow: var(--kps-shadow-inset), 0 0 0 4px rgba(59,130,246,.10);
}

.kps-neo-btn{
	height: 46px;
	padding: 0 14px;
	border-radius: var(--kps-radius-lg);
	border: 1px solid rgba(17,24,39,.06);
	background: #fff;
	box-shadow: var(--kps-shadow-soft);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--kps-text);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.kps-neo-btn:hover{ transform: translateY(-1px); box-shadow: var(--kps-shadow-hover); }
.kps-neo-btn:active{ transform: translateY(0px); box-shadow: var(--kps-shadow-soft); }

.kps-neo-grid{
	max-width: 1100px;
	margin: 14px auto 34px;
	padding: 0 18px;
	gap: 18px;
}

/* category cards */
.kps-category-card{
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 14px;
	align-items: center;

	background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 100%);
	border-radius: 24px;
	padding: 18px 18px;
	text-decoration: none;
	color: inherit;

	box-shadow: var(--kps-shadow-soft);
	border: 1px solid rgba(255,255,255,.65);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	position: relative;
	overflow: hidden;

	animation: kpsFadeUp .45s ease both;
	animation-delay: calc(var(--i, 0) * 45ms);
}

.kps-category-card::before{
	content:"";
	position:absolute;
	inset:-2px;
	background: radial-gradient(600px 220px at 10% 0%, rgba(255,255,255,.95), transparent 55%),
	            radial-gradient(520px 220px at 100% 0%, rgba(59,130,246,.10), transparent 55%);
	opacity:.9;
	pointer-events:none;
}

.kps-category-card:hover{
	transform: translateY(-4px);
	box-shadow: var(--kps-shadow-hover);
	border-color: rgba(59,130,246,.22);
}

.kps-category-ico{
	width: 54px;
	height: 54px;
	border-radius: 18px;
	display:flex;
	align-items:center;
	justify-content:center;
	background: #fff;
	box-shadow: var(--kps-shadow-inset);
	border: 1px solid rgba(17,24,39,.05);
}

.kps-category-ico i{ font-size: 20px; color: rgba(17,24,39,.78); }

.kps-category-meta{ display:flex; flex-direction:column; gap:6px; }
.kps-category-title{ font-weight: 650; letter-spacing: .01em; }
.kps-category-sub{ font-size: 12px; color: var(--kps-muted); line-height: 1.35; }

@keyframes kpsFadeUp{
	from{ opacity:0; transform: translateY(10px); }
	to{ opacity:1; transform: translateY(0); }
}

@media (max-width: 860px){
	.kps-neo-toolbar{ grid-template-columns: 1fr; }
	.kps-neo-field--right{ justify-self: stretch; width: 100%; }
	.kps-neo-btn{ justify-content:center; }
	.kps-category-card{ grid-template-columns: 46px 1fr; }
	.kps-category-ico{ width: 46px; height: 46px; border-radius: 16px; }
}