.shs * {
	box-sizing: border-box;
}

.shs {
	--shs-bg: #09091e;
	--shs-nav-bg: #07071a;
	--shs-border: rgba(255, 255, 255, 0.07);
	--shs-border2: rgba(255, 255, 255, 0.13);
	--shs-text: #ffffff;
	--shs-muted: rgba(255, 255, 255, 0.55);
	--shs-accent: #6c63ff;
	--shs-accent-light: #8b7fff;
	--shs-card-border: rgba(108, 99, 255, 0.22);
	--shs-card-hover-border: rgba(108, 99, 255, 0.7);
	--shs-radius: 14px;

	--shs-drawer-bg-1: #0c1f24;
	--shs-drawer-bg-2: #081a23;
	--shs-drawer-border: rgba(45, 212, 191, 0.35);
	--shs-drawer-accent: #2dd4bf;
	--shs-drawer-accent-light: #5eead4;
	--shs-drawer-accent-soft: rgba(45, 212, 191, 0.12);

	position: relative;
	background: var(--shs-bg);
	color: var(--shs-text);
	font-family: 'Inter', system-ui, sans-serif;
	border-radius: var(--shs-radius);
	overflow: hidden;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	isolation: isolate;
}

.shs h1, .shs h2, .shs h3, .shs h4,
.shs .shs-catlabel,
.shs-dh-title {
	font-family: 'Poppins', sans-serif;
}

.shs-i {
	display: block;
	color: #ffffff;
}

.shs-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.shs-orb1 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(108, 99, 255, 0.12) 0%, transparent 70%);
	top: -200px;
	left: -100px;
}
.shs-orb2 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(79, 57, 224, 0.1) 0%, transparent 70%);
	bottom: -150px;
	right: -80px;
	animation: shs-orb 16s ease-in-out infinite alternate-reverse;
}
.shs-orb1 {
	animation: shs-orb 13s ease-in-out infinite alternate;
}
@keyframes shs-orb {
	to { transform: translate(20px, 14px) scale(1.06); }
}

.shs-shell {
	display: flex;
	position: relative;
	z-index: 1;
	min-height: 480px;
}

.shs-nav {
	width: 96px;
	flex-shrink: 0;
	background: linear-gradient(145deg, rgba(20, 18, 60, 0.9) 0%, rgba(14, 12, 42, 0.95) 100%);
	border-right: 1px solid var(--shs-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 18px 8px;
	max-height: 720px;
	overflow-y: auto;
	scrollbar-width: none;
}
.shs-nav::-webkit-scrollbar {
	display: none;
}

.shs-navbtn {
	width: 100%;
	border: none;
	background: transparent;
	color: #ffffff;
	border-radius: 12px;
	padding: 16px 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer !important;
	position: relative;
	transition: background 0.18s, color 0.18s;
	font-family: 'Inter', sans-serif;
}
.shs-navbtn:hover {
	background: rgba(108, 99, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
}
.shs-navbtn.on {
	background: rgba(108, 99, 255, 0.18);
	color: #fff;
}
.shs-navbtn.on::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 14px;
	bottom: 14px;
	width: 3px;
	background: linear-gradient(to bottom, #6c63ff, #a78bfa);
	border-radius: 0 3px 3px 0;
}
.shs-navbtn svg {
	width: 24px;
	height: 24px;
	color: #ffffff;
}
.shs-navlbl {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	line-height: 1;
	max-width: 76px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.shs-navcount {
    position: absolute;
    top: 10px;
    right: 0px;
    background: linear-gradient(193.06deg, #F5F1FF -59.37%, #4F39E0 106.12%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    min-width: 20px;
    height: 20px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.shs-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.shs-topbar {
	padding: 18px 24px;
	border-bottom: 1px solid var(--shs-border);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.shs-catlabel {
	font-family: 'Poppins', sans-serif;
	font-size: 36px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.5px;
	line-height: 1.15;
}
.shs-catsub {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--shs-muted);
	margin-top: 2px;
}
.shs-search-wrap {
	margin-left: auto;
	position: relative;
}
.shs-search {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(108, 99, 255, 0.3);
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	padding: 10px 14px 10px 38px;
	width: 240px;
	max-width: 100%;
	outline: none;
	transition: border-color 0.2s, background 0.2s;
	font-family: 'Inter', sans-serif;
}
.shs-search::placeholder,
.shs-search::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.45);
	opacity: 1;
}
.shs-search:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.45);
}
.shs-search:focus {
	border-color: var(--shs-accent);
	background: rgba(108, 99, 255, 0.1);
}
/* .shs-search-wrap svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #ffffff;
	width: 16px;
	height: 16px;
	pointer-events: none;
} */

.shs-cards-area {
	padding: 24px 24px 28px;
}

.shs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 18px;
	margin-bottom: 8px;
}

.shs-card {
	background: linear-gradient(145deg, rgba(20, 18, 60, 0.9) 0%, rgba(14, 12, 42, 0.95) 100%);
	border: 1px solid var(--shs-card-border);
	border-radius: var(--shs-radius);
	padding: 22px 18px 18px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.34, 1.36, 0.64, 1), border-color 0.2s, box-shadow 0.25s;
	animation: shs-fadeup 0.35s ease both;
}
.shs-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.6), transparent);
	opacity: 0;
	transition: opacity 0.25s;
}
.shs-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--shs-radius);
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(108, 99, 255, 0.14), transparent 60%);
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}
.shs-card:hover {
	transform: translateY(-8px) scale(1.015);
	border-color: var(--shs-card-hover-border);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(108, 99, 255, 0.3), 0 0 36px rgba(108, 99, 255, 0.12);
}
.shs-card:hover::before { opacity: 1; }
.shs-card:hover::after { opacity: 1; }

@keyframes shs-fadeup {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.shs-card-ico {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: rgba(108, 99, 255, 0.15);
	border: 1px solid rgba(108, 99, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	transition: background 0.2s, border-color 0.2s;
}
.shs-card:hover .shs-card-ico {
	background: rgba(108, 99, 255, 0.25);
	border-color: rgba(108, 99, 255, 0.5);
}
.shs-card-ico svg {
	width: 26px;
	height: 26px;
	color: #ffffff;
}
.shs-card-img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	display: block;
}

.shs-card-line {
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #6c63ff, #a78bfa);
	margin-bottom: 12px;
	transition: width 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.shs-card:hover .shs-card-line {
	width: 50px;
}

.shs-card-title {
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	line-height: 1.35;
	margin-bottom: 8px;
}
.shs-card-desc {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.6;
	margin: 0;
}
.shs-card-tags {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.shs-ctag {
	font-size: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid rgba(108, 99, 255, 0.3);
	color: rgba(167, 139, 250, 0.9);
	background: rgba(108, 99, 255, 0.08);
}

.shs-more-wrap {
	text-align: center;
	padding: 16px 0 8px;
}
.shs-more {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
	padding: 12px 36px;
	border-radius: 999px;
	border: 1px solid rgba(108, 99, 255, 0.5);
	background: transparent;
	color: #a78bfa;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}
.shs-more svg {
	width: 16px;
	height: 16px;
	color: #ffffff;
}
.shs-more:hover {
	background: rgba(108, 99, 255, 0.15);
	border-color: rgba(108, 99, 255, 0.85);
	box-shadow: 0 0 24px rgba(108, 99, 255, 0.2);
	transform: translateY(-2px);
}

.shs-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--shs-muted);
}
.shs-empty svg {
	width: 34px;
	height: 34px;
	margin: 0 auto 12px;
	display: block;
	color: #ffffff;
	opacity: 0.3;
}
.shs-empty p {
	font-size: 14px;
	margin: 0;
}

.shs-empty-msg {
	color: #999;
	font-style: italic;
}

.shs-overlay {
	position: absolute;
	inset: 0;
	background: rgba(4, 10, 12, 0.55);
	backdrop-filter: blur(3px);
	z-index: 500;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
	border-radius: var(--shs-radius);
}
.shs-overlay.open {
	opacity: 1;
	pointer-events: all;
}

.shs-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 90%;
    background: #070036;
    border-left: 1px solid rgba(255, 255, 255, .08);
    z-index: 501;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -30px 0 80px rgba(0, 0, 0, .45);
    overflow: hidden;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.shs-drawer.open{
    transform:translateX(0);
}

.shs-drawer-head{

    padding:30px 26px 24px;

    display:flex;
    gap:16px;
    align-items:flex-start;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.03)
    );

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.10);
}

.shs-dh-ico{

    width:60px;
    height:60px;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.06)
    );

    border:1px solid rgba(255,255,255,.15);

    color:#ffffff;

    flex-shrink:0;

    box-shadow:
    0 15px 35px rgba(0,0,0,.15);
}

.shs-dh-ico svg {
	width: 32px;
	height: 32px;
	color: #ffffff;
}

.shs-dh-img{
    width:34px;
    height:34px;
    object-fit:contain;
}

.shs-dh-info{
    flex:1;
    min-width:0;
}

.shs-dh-title{

    font-family:'Poppins',sans-serif;

    font-size:26px;
    line-height:1.2;

    font-weight:500;

    color: #ffffff;

    letter-spacing:-.02em;
}

.shs-dh-cat{

    display:inline-block;

    margin-top:10px;

    padding:6px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    color:#D8F8FF;

    font-size:12px;

    font-weight:600;
}

.shs-dclose{

    width:40px;
    height:40px;
	padding-left: 10px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.08);

    color:#ffffff;

    cursor:pointer;
    align-items:center;
    justify-content:center;

    transition:.3s;
}

.shs-dclose svg {
	width: 18px;
	height: 18px;
	color: #ffffff;
}

.shs-dclose:hover{

    background:rgba(255,255,255,.18);

    transform:rotate(90deg);
}

.shs-drawer-body{

    flex:1;

    overflow-y:auto;

    padding:30px;

    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.25) transparent;
}

.shs-drawer-body::-webkit-scrollbar{
    width:6px;
}

.shs-drawer-body::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:20px;
}

.shs-d-desc{

    margin:0 0 30px !important;

    font-size:18px;

    line-height:1.9;

    font-weight:400;

    color:rgba(255,255,255,.88);
}

.shs-d-sec{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:16px;

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.22em;

    color:#BDF8FF;
}

.shs-d-sec::after{

    content:'';

    flex:1;

    height:1px;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.20),
        transparent
    );
}

.shs-d-tags{

    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-bottom:34px;
}

.shs-dtag{

    padding:10px 18px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.10);

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    backdrop-filter:blur(12px);

    transition:.3s;

    box-shadow:
    0 10px 25px rgba(0,0,0,.12);
}

.shs-dtag:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,.18);
}

.shs-d-rels{

    display:flex;
    flex-direction:column;

    gap:12px;

    margin-bottom:36px;
}

.shs-d-rel{

    display:flex;
    align-items:center;

    gap:14px;

    padding:16px 18px;

    border-radius:16px;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(16px);

    transition:all .35s ease;
}

.shs-d-rel:hover{

    transform:
    translateX(6px)
    translateY(-2px);

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.08)
    );

    box-shadow:
    0 20px 40px rgba(0,0,0,.18);
}

.shs-d-rel svg {
	width: 20px;
	height: 20px;
	color: #ffffff;
	flex-shrink: 0;
}

.shs-d-rel-name{

    flex:1;

    color:#ffffff;

    font-size:16px;

    font-weight:600;
}

.shs-d-rel-cat{

    font-size:12px;

    color:rgba(255,255,255,.65);
}

.shs-ask-btn{

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    background-color: #131d64;

    color:#ffffff;

    font-size:17px;

    font-weight:700;

    font-family:'Inter',sans-serif;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    transition:.35s;
}

.shs-ask-btn svg {
	width: 18px;
	height: 18px;
	color: #ffffff;
}

.shs-ask-btn:hover{

    transform:translateY(-3px);

    background-color: #131d64;

    color:#ffffff;

    box-shadow:
    0 25px 55px rgba(125,211,252,.55);
}

@media(max-width:768px){

    .shs-drawer{
        width:100%;
        max-width:100%;
    }

    .shs-drawer-body{
        padding:22px;
    }

    .shs-dh-title{
        font-size:22px;
    }

    .shs-d-desc{
        font-size:16px;
    }

    .shs-ask-btn{
        height:58px;
        font-size:16px;
    }
}

.shs-d-title{
    font-size:24px;
    line-height:1.25;
    font-weight:800;
    color:#0F172A;
    margin-bottom:12px;
    font-family:'Inter',sans-serif;
}

@media (max-width: 900px) {
	.shs-nav {
		width: 72px;
	}
	.shs-grid {
		grid-template-columns: repeat(2, 1fr); /* pehle: auto-fill, minmax(190px, 1fr) */
	}

	/* --- naya tablet fix --- */
	.shs-topbar {
		padding: 16px 18px;
		gap: 12px;
	}
	.shs-catlabel {
		font-size: 24px;
	}
	.shs-catsub {
		font-size: 12px;
	}
	.shs-search-wrap {
		width: 100%;
		margin-left: 0;
		flex-basis: 100%;
	}
	.shs-search {
		width: 100%;
	}
	.shs-cards-area {
		padding: 18px 18px 22px;
	}
	.shs-card {
		padding: 18px 16px 16px;
	}
	.shs-card-title {
		font-size: 17px;
	}
	.shs-card-desc {
		font-size: 13px;
	}
	.shs-drawer {
		width: 380px;
	}
}
@media (max-width: 680px) {
	.shs {
		border-radius: 12px;
	}

	.shs-shell {
		flex-direction: column;
		min-height: 0;
	}

	.shs-nav {
		width: 100%;
		max-height: none;
		flex-direction: row;
		align-items: stretch;
		overflow-x: auto;
		overflow-y: visible;
		border-right: none;
		border-bottom: 1px solid var(--shs-border);
		padding: 10px 10px;
		gap: 8px;
		-webkit-overflow-scrolling: touch;
	}
	.shs-navbtn {
		flex-direction: row;
		flex-shrink: 0;
		width: auto;
		padding: 8px 14px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.08);
		gap: 6px;
	}
	.shs-navbtn.on {
		border-color: rgba(108, 99, 255, 0.5);
	}
	.shs-navbtn.on::before {
		display: none;
	}
	.shs-navlbl {
		font-size: 12px;
		max-width: none;
	}
	.shs-navcount {
		position: static;
		margin-left: 2px;
	}

	.shs-topbar {
		padding: 14px 16px;
		gap: 10px;
	}
	.shs-catlabel {
		font-size: 17px;
	}
	.shs-search-wrap {
		width: 100%;
		margin-left: 0;
	}
	.shs-search {
		width: 100%;
	}

	.shs-cards-area {
		padding: 16px 16px 20px;
	}

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

	.shs-card {
		padding: 16px 16px 14px;
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}
	.shs-card-ico {
		margin-bottom: 0;
		flex-shrink: 0;
		width: 38px;
		height: 38px;
	}
	.shs-card-ico svg {
		width: 20px;
		height: 20px;
	}
	.shs-card-line {
		display: none;
	}
	.shs-card-body {
		flex: 1;
		min-width: 0;
	}
	.shs-card-title {
		font-size: 14.5px;
		margin-bottom: 4px;
	}
	.shs-card-desc {
		font-size: 12.5px;
		line-height: 1.5;
	}
	.shs-card-tags {
		margin-top: 8px;
	}
	.shs-card:hover {
		transform: none;
	}

	.shs-more {
		width: 100%;
		justify-content: center;
		padding: 12px 20px;
		font-size: 13px;
	}

	.shs-drawer {
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		max-height: 85%;
		border-left: none;
		border-top: 1px solid var(--shs-drawer-border);
		border-radius: 18px 18px 0 0;
		transform: translateY(100%);
	}
	.shs-drawer.open {
		transform: translateY(0);
	}
}

@media (max-width: 380px) {
	.shs-navlbl {
		display: none;
	}
	.shs-navbtn {
		padding: 8px 10px;
	}
}