:root{
	--hk-bg:#080a0f;
	--hk-bg-2:#0d1018;
	--hk-surface:#111621;
	--hk-surface-2:#171d2a;
	--hk-surface-3:#1d2535;
	--hk-border:rgba(255,255,255,.09);
	--hk-border-2:rgba(255,255,255,.15);
	--hk-text:#f7f8fb;
	--hk-muted:rgba(247,248,251,.62);
	--hk-muted-2:rgba(247,248,251,.42);
	--hk-primary:#e83283;
	--hk-primary-2:#ff5aa6;
	--hk-success:#41d7a7;
	--hk-info:#39cbfb;
	--hk-warning:#ffc107;
	--hk-danger:#fd7e14;
	--hk-radius:22px;
	--hk-sidebar-width:292px;
}

*{
	box-sizing:border-box;
}

html,
body{
	min-height:100%;
}

body.hk-body{
	margin:0;
	background:#080a0f;
	color:var(--hk-text);
	font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	overflow-x:hidden;
	position:relative;
}

body.hk-body:after{
	content:"";
	position:fixed;
	inset:0;
	z-index:-2;
	pointer-events:none;
	background:
		radial-gradient(circle at 12% 8%, rgba(232,50,131,.20), transparent 28%),
		radial-gradient(circle at 82% 16%, rgba(57,203,251,.16), transparent 30%),
		radial-gradient(circle at 50% 90%, rgba(65,215,167,.08), transparent 34%),
		linear-gradient(135deg, #07080c 0%, #0a0d14 45%, #090b10 100%);
}

body.hk-body:before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background-image:
		linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
	background-size:44px 44px;
	mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 80%);
	z-index:-1;
}

/* App layout */

.hk-app{
	min-height:100vh;
	display:flex;
}

.hk-sidebar{
	width:var(--hk-sidebar-width);
	min-height:100vh;
	padding:18px;
	position:fixed;
	left:0;
	top:0;
	z-index:1040;
}

.hk-sidebar-inner{
	height:calc(100vh - 36px);
	background:linear-gradient(180deg, rgba(17,22,33,.88), rgba(13,16,24,.82));
	border:1px solid var(--hk-border);
	border-radius:28px;
	backdrop-filter:blur(18px);
	box-shadow:0 24px 80px rgba(0,0,0,.35);
	padding:18px;
	display:flex;
	flex-direction:column;
	overflow:hidden;
}

.hk-main{
	flex:1;
	min-width:0;
	padding-left:var(--hk-sidebar-width);
}

.hk-content{
	padding:18px 22px 28px;
	max-width:1600px;
	margin:0 auto;
}

/* Brand */

.hk-brand{
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none;
	color:#fff;
	margin-bottom:24px;
}

.hk-brand:hover{
	color:#fff;
}

.hk-brand-mark{
	width:46px;
	height:46px;
	border-radius:17px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:
		linear-gradient(135deg, rgba(232,50,131,.95), rgba(65,215,167,.82));
	box-shadow:
		0 12px 30px rgba(232,50,131,.24),
		inset 0 1px 0 rgba(255,255,255,.30);
	color:#fff;
	font-size:20px;
}

.hk-brand-title{
	font-size:22px;
	font-weight:800;
	line-height:1;
	letter-spacing:-.5px;
}

.hk-brand-title span{
	color:var(--hk-success);
}

.hk-brand-subtitle{
	margin-top:3px;
	font-size:11px;
	color:var(--hk-muted);
	letter-spacing:.6px;
	text-transform:uppercase;
}

/* Sidebar menu */

.hk-side-section{
	min-height:0;
	overflow:auto;
	padding-right:2px;
}

.hk-side-label{
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:1.4px;
	color:var(--hk-muted-2);
	margin:0 0 10px 6px;
}

.hk-side-menu{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:7px;
}

.hk-side-link{
	display:flex;
	align-items:center;
	gap:11px;
	padding:10px;
	border-radius:16px;
	color:rgba(255,255,255,.72);
	text-decoration:none;
	border:1px solid transparent;
	transition:.16s ease;
}

.hk-side-link:hover{
	color:#fff;
	background:rgba(255,255,255,.055);
	border-color:rgba(255,255,255,.08);
	transform:translateX(2px);
}

.hk-side-link.active{
	color:#fff;
	background:
		linear-gradient(135deg, rgba(232,50,131,.22), rgba(57,203,251,.09));
	border-color:rgba(232,50,131,.34);
	box-shadow:0 10px 26px rgba(232,50,131,.12);
}

.hk-side-link-icon{
	width:38px;
	height:38px;
	border-radius:13px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,.055);
	color:var(--hk-muted);
	flex-shrink:0;
}

.hk-side-link.active .hk-side-link-icon{
	background:rgba(232,50,131,.25);
	color:var(--hk-primary-2);
}

.hk-side-link-text{
	display:flex;
	flex-direction:column;
	line-height:1.15;
}

.hk-side-link-text span{
	font-size:14px;
	font-weight:700;
}

.hk-side-link-text small{
	font-size:11px;
	color:var(--hk-muted-2);
	margin-top:3px;
}

/* Sidebar CTA */

.hk-side-card{
	margin-top:auto;
	background:
		radial-gradient(circle at top right, rgba(65,215,167,.18), transparent 40%),
		linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
	border:1px solid var(--hk-border);
	border-radius:22px;
	padding:14px;
}

.hk-side-card-icon{
	width:40px;
	height:40px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(65,215,167,.15);
	color:var(--hk-success);
	margin-bottom:10px;
}

.hk-side-card-title{
	font-size:14px;
	font-weight:800;
}

.hk-side-card-text{
	font-size:12px;
	color:var(--hk-muted);
	margin-top:4px;
}

.hk-sidebar-footer{
	display:flex;
	align-items:center;
	gap:8px;
	margin-top:14px;
	font-size:12px;
	color:var(--hk-muted);
	padding:0 4px;
}

.hk-online-dot{
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--hk-success);
	box-shadow:0 0 0 5px rgba(65,215,167,.12);
}

/* Topbar */

.hk-topbar{
	height:74px;
	position:sticky;
	top:0;
	z-index:1020;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:0 22px;
	background:rgba(8,10,15,.66);
	backdrop-filter:blur(16px);
	border-bottom:1px solid rgba(255,255,255,.06);
}

.hk-page-kicker{
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:1.4px;
	color:var(--hk-muted-2);
}

.hk-page-title-mini{
	font-size:15px;
	font-weight:800;
	line-height:1.1;
}

.hk-mobile-menu-btn{
	width:42px;
	height:42px;
	border-radius:14px;
	border:1px solid var(--hk-border);
	background:rgba(255,255,255,.055);
	color:#fff;
}

.hk-top-actions{
	display:flex;
	align-items:center;
	gap:8px;
}

.hk-top-actions .btn{
	border-radius:12px;
}

/* Content cards */

.hk-content-card{
	background:
		linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
	border:1px solid var(--hk-border);
	border-radius:28px;
	padding:16px;
	box-shadow:0 24px 80px rgba(0,0,0,.22);
	backdrop-filter:blur(10px);
}

.hk-breadcrumb{
	background:rgba(255,255,255,.045);
	border:1px solid var(--hk-border);
	border-radius:18px;
	padding:.8rem 1rem;
	font-size:13px;
}

.hk-breadcrumb a{
	color:rgba(255,255,255,.65);
	text-decoration:none;
}

.hk-breadcrumb a:hover{
	color:#fff;
}

.hk-breadcrumb .active{
	color:#fff;
}

.hk-footer{
	text-align:center;
	color:var(--hk-muted-2);
	font-size:11px;
	padding:24px 0 4px;
}

/* Offcanvas */

.hk-offcanvas{
	background:
		radial-gradient(circle at top left, rgba(232,50,131,.18), transparent 34%),
		#0d1018;
}

/* Mobile dock */

.hk-mobile-dock{
	position:fixed;
	left:12px;
	right:12px;
	bottom:12px;
	z-index:1050;
	height:66px;
	border-radius:22px;
	background:rgba(17,22,33,.90);
	border:1px solid var(--hk-border);
	backdrop-filter:blur(16px);
	box-shadow:0 18px 50px rgba(0,0,0,.36);
	display:flex;
	align-items:center;
	justify-content:space-around;
	padding:8px;
}

.hk-dock-item{
	flex:1;
	height:50px;
	border-radius:16px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	color:var(--hk-muted);
	font-size:10px;
	gap:3px;
}

.hk-dock-item i{
	font-size:16px;
}

.hk-dock-item:hover{
	color:#fff;
}

.hk-dock-main{
	background:linear-gradient(135deg, rgba(232,50,131,.95), rgba(65,215,167,.75));
	color:#fff;
	box-shadow:0 10px 26px rgba(232,50,131,.22);
}

/* Hero */

.hk-hero{
	position:relative;
	overflow:hidden;
	border-radius:28px;
	padding:26px;
	margin-bottom:16px;
	background:
		radial-gradient(circle at 78% 20%, rgba(65,215,167,.22), transparent 28%),
		radial-gradient(circle at 25% 0%, rgba(232,50,131,.26), transparent 32%),
		linear-gradient(135deg, rgba(29,37,53,.95), rgba(13,16,24,.95));
	border:1px solid var(--hk-border);
	box-shadow:0 24px 80px rgba(0,0,0,.25);
}

.hk-hero:after{
	content:"";
	position:absolute;
	right:-80px;
	top:-80px;
	width:260px;
	height:260px;
	border-radius:50%;
	background:rgba(57,203,251,.12);
	filter:blur(8px);
}

.hk-hero-content{
	position:relative;
	z-index:1;
}

.hk-hero-kicker{
	display:inline-flex;
	align-items:center;
	gap:7px;
	border-radius:999px;
	padding:6px 10px;
	background:rgba(255,255,255,.075);
	border:1px solid var(--hk-border);
	color:var(--hk-success);
	font-size:12px;
	font-weight:700;
	margin-bottom:12px;
}

.hk-hero-title{
	font-size:34px;
	line-height:1.05;
	font-weight:900;
	letter-spacing:-1.2px;
	margin:0;
	max-width:720px;
}

.hk-hero-text{
	color:var(--hk-muted);
	font-size:15px;
	margin-top:12px;
	max-width:680px;
}

.hk-hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:18px;
}

.hk-hero-actions .btn{
	border-radius:14px;
	padding:.55rem .9rem;
}

/* Common utilities */

.fs10{font-size:10px!important}
.fs11{font-size:11px!important}
.fs12{font-size:12px!important}
.fs13{font-size:13px!important}
.fs14{font-size:14px!important}

.text-muted-soft{
	color:var(--hk-muted)!important;
}

.border-soft{
	border-color:var(--hk-border)!important;
}

.bg-soft{
	background:rgba(255,255,255,.045)!important;
}

.btn{
	font-weight:700;
}

.btn-success{
	background:linear-gradient(135deg, #33c995, #41d7a7);
	border:0;
	color:#06110d;
}

.btn-success:hover{
	filter:brightness(1.05);
	color:#06110d;
}

.btn-outline-light{
	border-color:rgba(255,255,255,.18);
	color:rgba(255,255,255,.78);
}

.btn-outline-light:hover{
	background:rgba(255,255,255,.10);
	border-color:rgba(255,255,255,.24);
	color:#fff;
}

.form-control,
.form-select{
	border-radius:14px;
}

.form-control.bg-dark,
.form-select.bg-dark,
.input-group-text.bg-dark{
	background-color:#0d111a!important;
	border-color:var(--hk-border-2)!important;
	color:#fff!important;
}

.form-control.bg-dark:focus,
.form-select.bg-dark:focus{
	box-shadow:0 0 0 .22rem rgba(232,50,131,.14);
	border-color:rgba(232,50,131,.55)!important;
}

/* Flavor catalog */

.hf-toolbar{
	background:#101620;
	border:1px solid var(--hk-border);
	border-radius:22px;
	padding:14px;
}

.hf-stat-card{
	min-width:94px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.035));
	border:1px solid var(--hk-border);
	border-radius:18px;
	padding:12px 14px;
}

.hf-stat-value{
	font-size:24px;
	line-height:1;
	font-weight:900;
	letter-spacing:-.6px;
}

.hf-stat-label{
	font-size:11px;
	color:var(--hk-muted);
	margin-top:4px;
}

.hf-brand-section{
	border:1px solid var(--hk-border);
	border-radius:24px;
	overflow:hidden;
	background:rgba(255,255,255,.026);
}

.hf-brand-head{
	background:
		linear-gradient(90deg, rgba(232,50,131,.18), rgba(57,203,251,.08));
	border-bottom:1px solid var(--hk-border);
	padding:14px 16px;
}

.hf-brand-name{
	font-weight:900;
	font-size:18px;
	letter-spacing:-.3px;
}

.hf-brand-meta{
	color:var(--hk-muted);
	font-size:12px;
	margin-top:2px;
}

.hf-flavor-card{
	background:
		linear-gradient(180deg, rgba(21,25,34,.98), rgba(14,18,27,.98));
	border:1px solid var(--hk-border);
	border-radius:20px;
	height:100%;
	transition:.16s ease;
	position:relative;
	overflow:hidden;
}

.hf-flavor-card:before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at top right, rgba(232,50,131,.10), transparent 38%);
	pointer-events:none;
	opacity:0;
	transition:.16s ease;
}

.hf-flavor-card:hover{
	border-color:rgba(232,50,131,.55);
	transform:translateY(-2px);
	box-shadow:0 18px 42px rgba(0,0,0,.30);
}

.hf-flavor-card:hover:before{
	opacity:1;
}

.hf-flavor-title{
	font-size:15px;
	font-weight:900;
	line-height:1.15;
	letter-spacing:-.2px;
}

.hf-flavor-subtitle{
	font-size:12px;
	color:var(--hk-muted);
}

.hf-flavor-desc{
	min-height:38px;
	font-size:12px;
	color:rgba(255,255,255,.68);
}

.hf-pill{
	display:inline-flex;
	align-items:center;
	gap:4px;
	border-radius:999px;
	padding:4px 8px;
	font-size:11px;
	line-height:1;
	border:1px solid var(--hk-border);
	background:rgba(255,255,255,.045);
	color:rgba(255,255,255,.78);
}

.hf-pill-primary{
	background:rgba(232,50,131,.17);
	border-color:rgba(232,50,131,.36);
	color:#fff;
}

.hf-pill-success{
	background:rgba(65,215,167,.13);
	border-color:rgba(65,215,167,.32);
	color:#d9fff4;
}

.hf-pill-info{
	background:rgba(57,203,251,.13);
	border-color:rgba(57,203,251,.32);
	color:#d9f7ff;
}

.hf-pill-warning{
	background:rgba(255,193,7,.13);
	border-color:rgba(255,193,7,.32);
	color:#fff3cd;
}

.hf-pill-danger{
	background:rgba(253,126,20,.14);
	border-color:rgba(253,126,20,.34);
	color:#ffe3ce;
}

.hf-param-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:6px;
}

.hf-param{
	background:rgba(255,255,255,.035);
	border:1px solid var(--hk-border);
	border-radius:13px;
	padding:6px 8px;
	font-size:11px;
	color:var(--hk-muted);
}

.hf-param b{
	color:#fff;
	font-weight:900;
}

.hf-hidden{
	display:none!important;
}

/* Responsive */

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

	.hk-main{
		padding-left:0;
	}

	.hk-content{
		padding:14px 12px 92px;
	}

	.hk-topbar{
		height:66px;
		padding:0 12px;
	}

	.hk-top-actions{
		display:none;
	}

	.hk-content-card{
		border-radius:22px;
		padding:12px;
	}

	.hk-hero{
		border-radius:22px;
		padding:20px;
	}

	.hk-hero-title{
		font-size:28px;
	}

	.hk-side-link:hover{
		transform:none;
	}
}

@media (max-width: 575.98px){
	.hk-hero-title{
		font-size:24px;
	}

	.hf-param-grid{
		grid-template-columns:repeat(2, 1fr);
	}

	.hf-stat-card{
		flex:1;
		min-width:0;
	}

	.hf-stat-value{
		font-size:20px;
	}
}
/* Table catalog */

.hk-table-card{
	background:rgba(12,16,24,.72);
	border:1px solid var(--hk-border);
	border-radius:22px;
	overflow:hidden;
}

.hk-flavors-table{
	--bs-table-bg:transparent;
	--bs-table-hover-bg:rgba(255,255,255,.045);
	margin:0;
}

.hk-flavors-table thead th{
	position:sticky;
	top:0;
	z-index:2;
	background:#101620;
	color:rgba(255,255,255,.62);
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.7px;
	font-weight:800;
	border-bottom:1px solid var(--hk-border);
	white-space:nowrap;
}

.hk-flavors-table td{
	border-color:rgba(255,255,255,.055);
	font-size:13px;
	vertical-align:middle;
}

.hk-table-title{
	color:#fff;
	font-weight:800;
	text-decoration:none;
	display:block;
	max-width:260px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-table-title:hover{
	color:var(--hk-success);
}

.hk-table-subtitle{
	max-width:260px;
	font-size:11px;
	color:var(--hk-muted);
}

.hk-flavor-dot{
	width:34px;
	height:34px;
	border-radius:13px;
	background:
		linear-gradient(135deg, rgba(232,50,131,.95), rgba(65,215,167,.78));
	box-shadow:0 8px 22px rgba(232,50,131,.18);
	flex-shrink:0;
	position:relative;
}

.hk-flavor-dot:after{
	content:"";
	position:absolute;
	inset:10px;
	border-radius:50%;
	background:rgba(255,255,255,.75);
}

.hk-num-badge{
	width:28px;
	height:28px;
	border-radius:10px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,.06);
	border:1px solid var(--hk-border);
	color:#fff;
	font-size:12px;
	font-weight:900;
}

.hk-num-badge.danger{
	background:rgba(253,126,20,.14);
	border-color:rgba(253,126,20,.35);
	color:#ffe3ce;
}

.hk-empty-state{
	text-align:center;
	padding:44px 20px;
	background:rgba(255,255,255,.035);
	border:1px solid var(--hk-border);
	border-radius:24px;
	margin-top:14px;
}

.hk-empty-icon{
	width:62px;
	height:62px;
	border-radius:22px;
	margin:0 auto 14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(232,50,131,.13);
	color:var(--hk-primary-2);
	font-size:24px;
}

/* Flavor detail */

.hk-detail-card{
	background:
		linear-gradient(180deg, rgba(21,25,34,.98), rgba(14,18,27,.98));
	border:1px solid var(--hk-border);
	border-radius:24px;
	padding:16px;
	box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.hk-detail-main-icon{
	width:68px;
	height:68px;
	border-radius:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:
		linear-gradient(135deg, rgba(232,50,131,.95), rgba(65,215,167,.78));
	color:#fff;
	font-size:28px;
	margin-bottom:14px;
	box-shadow:0 16px 36px rgba(232,50,131,.22);
}

.hk-info-list{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.hk-info-list > div{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	background:rgba(255,255,255,.035);
	border:1px solid var(--hk-border);
	border-radius:14px;
	padding:9px 10px;
}

.hk-info-list span{
	color:var(--hk-muted);
	font-size:12px;
}

.hk-info-list b{
	color:#fff;
	font-size:12px;
	text-align:right;
}

.hk-big-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:48px;
	height:38px;
	border-radius:14px;
	background:rgba(232,50,131,.15);
	border:1px solid rgba(232,50,131,.34);
	color:#fff;
	font-weight:900;
	font-size:13px;
}

.hk-metric-row{
	margin-bottom:12px;
	font-size:12px;
	color:var(--hk-muted);
}

.hk-metric-row b{
	color:#fff;
}

.hk-progress{
	height:8px;
	background:rgba(255,255,255,.07);
	border-radius:999px;
	overflow:hidden;
}

.hk-progress .progress-bar{
	background:
		linear-gradient(90deg, var(--hk-primary), var(--hk-success));
	border-radius:999px;
}

.hk-percent-box{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:8px;
}

.hk-percent-box > div{
	background:rgba(255,255,255,.035);
	border:1px solid var(--hk-border);
	border-radius:16px;
	padding:12px;
	text-align:center;
}

.hk-percent-box span{
	display:block;
	color:var(--hk-muted);
	font-size:11px;
	margin-bottom:4px;
}

.hk-percent-box b{
	display:block;
	font-size:20px;
	color:#fff;
}

.hk-mini-param{
	background:rgba(255,255,255,.035);
	border:1px solid var(--hk-border);
	border-radius:16px;
	padding:12px;
	height:100%;
}

.hk-mini-param span{
	display:block;
	color:var(--hk-muted);
	font-size:11px;
	margin-bottom:4px;
}

.hk-mini-param b{
	color:#fff;
	font-size:15px;
}

@media (max-width: 991.98px){
	.hk-flavors-table{
		min-width:1100px;
	}

	.hk-table-title,
	.hk-table-subtitle{
		max-width:220px;
	}
}

@media (max-width: 575.98px){
	.hk-percent-box{
		grid-template-columns:1fr;
	}
}



.fw-black{
	font-weight:900;
}

/* Search flavor input */

.hk-flavor-search{
	position:relative;
}

.hk-flavor-suggest{
	position:absolute;
	top:calc(100% + 8px);
	left:0;
	right:0;
	z-index:30;
	background:rgba(12,16,24,.98);
	border:1px solid var(--hk-border-2);
	border-radius:18px;
	padding:8px;
	box-shadow:0 24px 70px rgba(0,0,0,.42);
	backdrop-filter:blur(14px);
	max-height:390px;
	overflow:auto;
}

.hk-flavor-suggest-item{
	width:100%;
	border:0;
	background:transparent;
	color:#fff;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	text-align:left;
	padding:10px 11px;
	border-radius:14px;
	transition:.14s ease;
}

.hk-flavor-suggest-item:hover{
	background:rgba(232,50,131,.14);
}

.hk-flavor-suggest-main{
	font-size:14px;
	font-weight:800;
	line-height:1.15;
}

.hk-flavor-suggest-meta{
	margin-top:3px;
	font-size:11px;
	color:var(--hk-muted);
}

.hk-flavor-suggest-empty{
	padding:14px;
	color:var(--hk-muted);
	font-size:13px;
	text-align:center;
}

/* Compact results */

.hk-mix-results-compact{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.hk-mix-compact-card{
	background:
		linear-gradient(180deg, rgba(21,25,34,.98), rgba(14,18,27,.98));
	border:1px solid var(--hk-border);
	border-radius:22px;
	padding:13px;
	box-shadow:0 16px 38px rgba(0,0,0,.16);
	position:relative;
	overflow:hidden;
}

.hk-mix-compact-card:before{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle at top right, rgba(232,50,131,.10), transparent 34%);
	pointer-events:none;
}

.hk-mix-compact-card > *{
	position:relative;
	z-index:1;
}

.hk-mix-compact-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	margin-bottom:10px;
}

.hk-mix-compact-title{
	font-size:16px;
	font-weight:900;
	letter-spacing:-.3px;
	line-height:1.15;
}

.hk-mix-compact-desc{
	margin-top:3px;
	font-size:12px;
	color:var(--hk-muted);
	line-height:1.35;
}

.hk-mix-score-pills{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:5px;
	flex-shrink:0;
}

.hk-mix-score-pills span{
	min-width:42px;
	height:30px;
	border-radius:12px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:rgba(65,215,167,.12);
	border:1px solid rgba(65,215,167,.26);
	color:#d9fff4;
	font-size:11px;
	font-weight:900;
}

.hk-mix-line-list{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.hk-mix-line{
	background:rgba(255,255,255,.032);
	border:1px solid var(--hk-border);
	border-radius:15px;
	padding:8px;
}

.hk-mix-line-left{
	display:flex;
	align-items:center;
	gap:9px;
	min-width:0;
}

.hk-mix-line-percent{
	width:44px;
	height:32px;
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(232,50,131,.15);
	border:1px solid rgba(232,50,131,.34);
	color:#fff;
	font-weight:900;
	font-size:12px;
	flex-shrink:0;
}

.hk-mix-line-name{
	font-size:13px;
	font-weight:800;
	line-height:1.15;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-mix-line-meta{
	font-size:11px;
	color:var(--hk-muted);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-mix-line-bar{
	height:5px;
	border-radius:999px;
	background:rgba(255,255,255,.07);
	overflow:hidden;
	margin-top:7px;
}

.hk-mix-line-bar > div{
	height:100%;
	border-radius:999px;
	background:linear-gradient(90deg, var(--hk-primary), var(--hk-success));
}

.hk-mix-compact-profile{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	gap:6px;
	margin-top:10px;
}

.hk-mix-compact-profile > div{
	background:rgba(255,255,255,.032);
	border:1px solid var(--hk-border);
	border-radius:12px;
	padding:7px 8px;
	color:var(--hk-muted);
	font-size:11px;
}

.hk-mix-compact-profile b{
	float:right;
	color:#fff;
}

/* Magic loader */

.hk-magic-loader{
	position:fixed;
	inset:0;
	z-index:3000;
	background:rgba(5,7,11,.76);
	backdrop-filter:blur(12px);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
}

.hk-magic-box{
	width:min(420px, 100%);
	border-radius:28px;
	background:
		radial-gradient(circle at top, rgba(232,50,131,.28), transparent 42%),
		linear-gradient(180deg, rgba(21,25,34,.98), rgba(14,18,27,.98));
	border:1px solid var(--hk-border-2);
	box-shadow:0 30px 90px rgba(0,0,0,.5);
	padding:28px;
	text-align:center;
	color:#fff;
}

.hk-magic-orb{
	width:84px;
	height:84px;
	border-radius:30px;
	margin:0 auto 16px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg, var(--hk-primary), var(--hk-success));
	box-shadow:
		0 0 38px rgba(232,50,131,.42),
		0 0 80px rgba(65,215,167,.18);
	font-size:32px;
	animation:hkMagicFloat 1.4s ease-in-out infinite;
}

.hk-magic-title{
	font-size:20px;
	font-weight:900;
	letter-spacing:-.4px;
}

.hk-magic-text{
	margin-top:6px;
	color:var(--hk-muted);
	font-size:13px;
}

.hk-magic-dots{
	display:flex;
	justify-content:center;
	gap:7px;
	margin-top:18px;
}

.hk-magic-dots span{
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--hk-success);
	animation:hkMagicDots .9s infinite ease-in-out;
}

.hk-magic-dots span:nth-child(2){
	animation-delay:.14s;
}

.hk-magic-dots span:nth-child(3){
	animation-delay:.28s;
}

@keyframes hkMagicFloat{
	0%,100%{transform:translateY(0) rotate(0deg)}
	50%{transform:translateY(-8px) rotate(4deg)}
}

@keyframes hkMagicDots{
	0%,100%{opacity:.25;transform:translateY(0)}
	50%{opacity:1;transform:translateY(-5px)}
}

@media (max-width: 991.98px){
	.hk-mix-compact-head{
		flex-direction:column;
	}

	.hk-mix-score-pills{
		justify-content:flex-start;
	}

	.hk-mix-compact-profile{
		grid-template-columns:repeat(3, 1fr);
	}
}

@media (max-width: 575.98px){
	.hk-mix-compact-profile{
		grid-template-columns:repeat(2, 1fr);
	}
}


.hk-mix-generator-top .form-label{
	min-height:16px;
}

.hk-flavor-search{
	position:relative;
	z-index:40;
}

.hk-flavor-suggest{
	z-index:300;
}

.hk-generate-btn{
	min-height:38px;
}


.hk-section-head{
	padding:2px 2px 0;
}

.hk-generator-form{
	background:rgba(255,255,255,.025);
	border:1px solid rgba(255,255,255,.06);
	border-radius:20px;
	padding:12px;
}

.hk-generator-form .form-label{
	min-height:16px;
}

.hk-flavor-search{
	position:relative;
	z-index:40;
}

.hk-flavor-suggest{
	z-index:300;
}

.hk-generate-btn{
	min-height:38px;
}


.hk-mix-stack{
	width:100%;
	min-height:46px;
	display:flex;
	overflow:hidden;
	border-radius:16px;
	border:1px solid var(--hk-border);
	background:rgba(255,255,255,.04);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.hk-mix-stack-segment{
	min-width:34px;
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2px;
	padding:6px 4px;
	color:#fff;
	text-align:center;
	overflow:hidden;
	border-right:1px solid rgba(0,0,0,.25);
}

.hk-mix-stack-segment:last-child{
	border-right:0;
}

.hk-mix-stack-segment:before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
	pointer-events:none;
}

.hk-mix-stack-name,
.hk-mix-stack-percent{
	position:relative;
	z-index:1;
	max-width:100%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-mix-stack-name{
	font-size:11px;
	font-weight:800;
	line-height:1.1;
}

.hk-mix-stack-percent{
	font-size:12px;
	font-weight:900;
	line-height:1;
}

.hk-seg-0{
	background:linear-gradient(135deg, rgba(232,50,131,.95), rgba(232,50,131,.62));
}

.hk-seg-1{
	background:linear-gradient(135deg, rgba(65,215,167,.95), rgba(65,215,167,.58));
}

.hk-seg-2{
	background:linear-gradient(135deg, rgba(57,203,251,.95), rgba(57,203,251,.58));
}

.hk-seg-3{
	background:linear-gradient(135deg, rgba(255,193,7,.95), rgba(255,193,7,.58));
	color:#201700;
}

.hk-seg-4{
	background:linear-gradient(135deg, rgba(253,126,20,.95), rgba(253,126,20,.58));
}

.hk-seg-5{
	background:linear-gradient(135deg, rgba(156,100,255,.95), rgba(156,100,255,.58));
}

.hk-mix-line-compact{
	padding:7px 8px;
}

.hk-mix-line-compact .hk-mix-line-percent{
	width:42px;
	height:28px;
	font-size:11px;
}

.hk-mix-line-compact .hk-mix-line-name{
	font-size:12px;
}

.hk-mix-line-compact .hk-mix-line-meta{
	font-size:10px;
}


.hk-mix-results-compact{
	display:grid;
	grid-template-columns:1fr;
	gap:12px;
}

.hk-mix-card-pro{
	background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
	border:1px solid rgba(255,255,255,.09);
	border-radius:18px;
	padding:14px;
	box-shadow:0 14px 38px rgba(0,0,0,.22);
	overflow:hidden;
}

.hk-mix-pro-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:12px;
	margin-bottom:12px;
}

.hk-mix-pro-kicker{
	font-size:11px;
	color:rgba(255,255,255,.55);
	text-transform:uppercase;
	letter-spacing:.06em;
	margin-bottom:3px;
}

.hk-mix-pro-title{
	font-size:18px;
	font-weight:800;
	color:#fff;
	line-height:1.15;
}

.hk-mix-pro-desc{
	font-size:12px;
	color:rgba(255,255,255,.55);
	margin-top:4px;
	line-height:1.35;
}

.hk-mix-main-score{
	width:72px;
	min-width:72px;
	border-radius:16px;
	background:rgba(65,215,167,.1);
	border:1px solid rgba(65,215,167,.22);
	text-align:center;
	padding:8px 6px;
}

.hk-mix-main-score-value{
	font-size:22px;
	font-weight:900;
	line-height:1;
	color:#41d7a7;
}

.hk-mix-main-score-label{
	font-size:10px;
	color:rgba(255,255,255,.55);
	margin-top:3px;
}

.hk-mix-stack-pro{
	display:flex;
	width:100%;
	height:36px;
	border-radius:12px;
	overflow:hidden;
	background:#111;
	border:1px solid rgba(255,255,255,.08);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.hk-mix-stack-segment-pro{
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	min-width:28px;
	padding:0 6px;
	border-right:1px solid rgba(0,0,0,.28);
	overflow:hidden;
	white-space:nowrap;
	text-shadow:0 1px 2px rgba(0,0,0,.55);
}

.hk-mix-stack-segment-pro:last-child{
	border-right:0;
}

.hk-stack-name{
	font-size:11px;
	font-weight:700;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-stack-percent{
	font-size:10px;
	font-weight:900;
	opacity:.9;
}

.hk-seg-0{background:linear-gradient(135deg,#e83283,#b91d62);}
.hk-seg-1{background:linear-gradient(135deg,#41d7a7,#198754);}
.hk-seg-2{background:linear-gradient(135deg,#39cbfb,#0d6efd);}
.hk-seg-3{background:linear-gradient(135deg,#ffc107,#fd7e14);color:#151515;text-shadow:none;}
.hk-seg-4{background:linear-gradient(135deg,#845ef7,#5f3dc4);}
.hk-seg-5{background:linear-gradient(135deg,#20c997,#087f5b);}
.hk-seg-6{background:linear-gradient(135deg,#ff6b6b,#c92a2a);}
.hk-seg-7{background:linear-gradient(135deg,#adb5bd,#495057);}

.hk-mix-content-list{
	display:grid;
	gap:8px;
}

.hk-mix-content-row{
	display:grid;
	grid-template-columns:56px minmax(0,1fr) auto;
	align-items:center;
	gap:10px;
	padding:9px;
	border-radius:14px;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.065);
}

.hk-mix-content-percent{
	width:48px;
	height:48px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.08);
	font-weight:900;
	font-size:18px;
	color:#fff;
}

.hk-mix-content-percent span{
	font-size:10px;
	opacity:.6;
	margin-left:1px;
	margin-top:5px;
}

.hk-mix-content-name{
	font-size:14px;
	font-weight:800;
	color:#fff;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.hk-mix-content-meta{
	display:flex;
	flex-wrap:wrap;
	gap:5px 10px;
	margin-top:3px;
	font-size:11px;
	color:rgba(255,255,255,.52);
}

.hk-mix-content-tech{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:5px;
	max-width:320px;
}

.hk-tech-pill{
	font-size:10px;
	color:rgba(255,255,255,.72);
	background:rgba(255,255,255,.055);
	border:1px solid rgba(255,255,255,.075);
	border-radius:999px;
	padding:4px 7px;
	white-space:nowrap;
}

.hk-tech-layer{
	color:#41d7a7;
	background:rgba(65,215,167,.09);
	border-color:rgba(65,215,167,.18);
}

.hk-mix-params-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:8px;
	margin-top:12px;
}

.hk-param{
	background:rgba(0,0,0,.16);
	border:1px solid rgba(255,255,255,.06);
	border-radius:13px;
	padding:8px;
}

.hk-param-label{
	font-size:11px;
	color:rgba(255,255,255,.55);
	margin-bottom:5px;
}

.hk-param-bar{
	height:6px;
	border-radius:99px;
	background:rgba(255,255,255,.07);
	overflow:hidden;
}

.hk-param-bar span{
	display:block;
	height:100%;
	border-radius:99px;
	background:linear-gradient(90deg,#e83283,#41d7a7);
}

.hk-param-value{
	font-size:11px;
	color:#fff;
	font-weight:700;
	margin-top:5px;
}

.hk-mix-heat-note{
	margin-top:10px;
	padding:9px 10px;
	border-radius:13px;
	background:rgba(255,193,7,.08);
	border:1px solid rgba(255,193,7,.14);
	color:rgba(255,255,255,.72);
	font-size:12px;
	line-height:1.35;
}

@media (max-width: 768px){
	.hk-mix-pro-head{
		flex-direction:column;
	}

	.hk-mix-main-score{
		width:100%;
		min-width:0;
		display:flex;
		justify-content:space-between;
		align-items:center;
	}

	.hk-mix-content-row{
		grid-template-columns:48px minmax(0,1fr);
	}

	.hk-mix-content-tech{
		grid-column:1 / -1;
		justify-content:flex-start;
		max-width:none;
	}

	.hk-mix-params-grid{
		grid-template-columns:repeat(2,1fr);
	}
}


.hk-generated-head{
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	gap:14px;
	padding:16px;
	border-radius:20px;
	background:
		radial-gradient(circle at 12% 20%, rgba(232,50,131,.24), transparent 30%),
		radial-gradient(circle at 92% 80%, rgba(65,215,167,.18), transparent 34%),
		linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
	border:1px solid rgba(255,255,255,.09);
	box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.hk-generated-glow{
	position:absolute;
	inset:-1px;
	pointer-events:none;
	background:linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
	opacity:.45;
}

.hk-generated-left{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	gap:13px;
	min-width:0;
	flex:1;
}

.hk-generated-icon{
	width:54px;
	height:54px;
	min-width:54px;
	border-radius:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg, rgba(232,50,131,.24), rgba(65,215,167,.18));
	border:1px solid rgba(255,255,255,.12);
	color:#fff;
	font-size:22px;
	box-shadow:inset 0 0 18px rgba(255,255,255,.05);
}

.hk-generated-kicker{
	font-size:11px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:rgba(255,255,255,.48);
	margin-bottom:3px;
}

.hk-generated-title{
	font-size:22px;
	font-weight:900;
	color:#fff;
	line-height:1.1;
}

.hk-generated-desc{
	max-width:720px;
	margin-top:5px;
	font-size:13px;
	line-height:1.35;
	color:rgba(255,255,255,.58);
}

.hk-generated-desc b{
	color:#fff;
	font-weight:800;
}

.hk-generated-stats{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:repeat(2, minmax(135px, 1fr)) 92px;
	gap:8px;
	align-items:stretch;
}

.hk-generated-stat{
	display:flex;
	align-items:center;
	gap:8px;
	padding:9px 10px;
	border-radius:15px;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.075);
	min-width:0;
}

.hk-generated-stat-icon{
	width:28px;
	height:28px;
	min-width:28px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,.06);
	font-size:13px;
}

.hk-generated-stat-label{
	font-size:10px;
	color:rgba(255,255,255,.42);
	line-height:1.1;
}

.hk-generated-stat-value{
	font-size:12px;
	font-weight:800;
	color:#fff;
	line-height:1.2;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-generated-count{
	grid-row:1 / span 2;
	grid-column:3;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border-radius:16px;
	background:linear-gradient(135deg, rgba(65,215,167,.18), rgba(57,203,251,.12));
	border:1px solid rgba(65,215,167,.22);
	min-width:86px;
}

.hk-generated-count-num{
	font-size:28px;
	font-weight:950;
	line-height:1;
	color:#41d7a7;
}

.hk-generated-count-text{
	margin-top:3px;
	font-size:10px;
	color:rgba(255,255,255,.58);
}

@media (max-width: 992px){
	.hk-generated-head{
		flex-direction:column;
	}

	.hk-generated-stats{
		grid-template-columns:repeat(2, 1fr);
	}

	.hk-generated-count{
		grid-row:auto;
		grid-column:auto;
		min-height:58px;
	}
}

@media (max-width: 576px){
	.hk-generated-head{
		padding:13px;
		border-radius:17px;
	}

	.hk-generated-left{
		align-items:flex-start;
	}

	.hk-generated-icon{
		width:46px;
		height:46px;
		min-width:46px;
		border-radius:15px;
		font-size:18px;
	}

	.hk-generated-title{
		font-size:18px;
	}

	.hk-generated-desc{
		font-size:12px;
	}

	.hk-generated-stats{
		grid-template-columns:1fr;
	}

	.hk-generated-count{
		flex-direction:row;
		gap:8px;
		justify-content:center;
		min-height:48px;
	}

	.hk-generated-count-num{
		font-size:22px;
	}
}

.hk-mix-tags,
.hk-tags-line{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	margin-top:7px;
}

.hk-mix-tag,
.hk-tag{
	display:inline-flex;
	align-items:center;
	max-width:150px;
	padding:3px 7px;
	border-radius:999px;
	font-size:10px;
	line-height:1.1;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-mix-tag{
	color:rgba(255,255,255,.74);
	background:rgba(232,50,131,.11);
	border:1px solid rgba(232,50,131,.22);
}

.hk-tag{
	color:rgba(255,255,255,.58);
	background:rgba(255,255,255,.055);
	border:1px solid rgba(255,255,255,.075);
}

.hk-tag:hover,
.hk-mix-tag:hover{
	color:#fff;
	border-color:rgba(65,215,167,.3);
	background:rgba(65,215,167,.1);
}

.hk-flavor-suggest-main{
	display:block;
	font-size:13px;
	font-weight:800;
	color:#fff;
	line-height:1.25;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-flavor-suggest-meta{
	display:block;
	margin-top:2px;
	font-size:11px;
	color:rgba(255,255,255,.48);
	line-height:1.2;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}


.hk-generator-panel{
	position:relative;
	overflow:hidden;
	padding:16px;
	border-radius:22px;
	background:
		radial-gradient(circle at 10% 0%, rgba(232,50,131,.18), transparent 34%),
		radial-gradient(circle at 90% 100%, rgba(65,215,167,.13), transparent 34%),
		linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
	border:1px solid rgba(255,255,255,.09);
	box-shadow:0 18px 45px rgba(0,0,0,.25);
}

.hk-generator-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:16px;
}

.hk-generator-kicker{
	font-size:11px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:rgba(255,255,255,.46);
	margin-bottom:4px;
}

.hk-generator-title{
	font-size:22px;
	line-height:1.1;
	font-weight:950;
	color:#fff;
}

.hk-generator-subtitle{
	margin-top:5px;
	font-size:13px;
	color:rgba(255,255,255,.56);
	max-width:760px;
}

.hk-note-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:8px;
}

.hk-note-card{
	display:flex;
	flex-direction:column;
	gap:3px;
	min-height:62px;
	padding:10px 11px;
	border-radius:15px;
	cursor:pointer;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.08);
	transition:.16s ease;
}

.hk-note-name{
	font-size:13px;
	font-weight:850;
	color:#fff;
	line-height:1.15;
}

.hk-note-text{
	font-size:11px;
	color:rgba(255,255,255,.48);
	line-height:1.2;
}

.btn-check:checked + .hk-note-card{
	background:linear-gradient(135deg, rgba(232,50,131,.18), rgba(65,215,167,.12));
	border-color:rgba(65,215,167,.38);
	box-shadow:0 0 0 1px rgba(65,215,167,.08), 0 8px 24px rgba(65,215,167,.08);
}

.hk-radio-group{
	display:grid;
	gap:6px;
}

.hk-radio-group-5{
	grid-template-columns:repeat(5,1fr);
}

.hk-radio-pill{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-height:42px;
	padding:8px 9px;
	border-radius:14px;
	cursor:pointer;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.08);
	color:rgba(255,255,255,.68);
	font-size:12px;
	font-weight:750;
	transition:.16s ease;
	text-align:center;
}

.hk-radio-pill i{
	font-size:12px;
	opacity:.8;
}

.btn-check:checked + .hk-radio-pill{
	color:#fff;
	background:linear-gradient(135deg, rgba(65,215,167,.18), rgba(57,203,251,.1));
	border-color:rgba(65,215,167,.35);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.hk-source-tabs{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:7px;
}

.hk-source-tab{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-height:40px;
	padding:8px 10px;
	border-radius:14px;
	cursor:pointer;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.08);
	color:rgba(255,255,255,.66);
	font-size:12px;
	font-weight:800;
}

.btn-check:checked + .hk-source-tab{
	color:#fff;
	background:rgba(232,50,131,.14);
	border-color:rgba(232,50,131,.32);
}

.hk-brand-box{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	padding:9px;
	border-radius:15px;
	background:rgba(0,0,0,.14);
	border:1px solid rgba(255,255,255,.065);
	max-height:116px;
	overflow:auto;
}

.hk-brand-pill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:6px 9px;
	border-radius:999px;
	cursor:pointer;
	background:rgba(255,255,255,.055);
	border:1px solid rgba(255,255,255,.075);
	color:rgba(255,255,255,.62);
	font-size:11px;
	font-weight:750;
}

.btn-check:checked + .hk-brand-pill{
	color:#fff;
	background:rgba(65,215,167,.14);
	border-color:rgba(65,215,167,.32);
}

.hk-exclude-box{
	display:flex;
	flex-wrap:wrap;
	gap:7px;
	padding:9px;
	border-radius:15px;
	background:rgba(0,0,0,.14);
	border:1px solid rgba(255,255,255,.065);
}

.hk-exclude-pill{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:7px 9px;
	border-radius:999px;
	cursor:pointer;
	background:rgba(255,255,255,.055);
	border:1px solid rgba(255,255,255,.075);
	color:rgba(255,255,255,.62);
	font-size:11px;
	font-weight:750;
}

.btn-check:checked + .hk-exclude-pill{
	color:#fff;
	background:rgba(253,126,20,.15);
	border-color:rgba(253,126,20,.32);
}

.hk-generator-bottom{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding-top:12px;
	border-top:1px solid rgba(255,255,255,.07);
}

.hk-generator-hint{
	font-size:12px;
	color:rgba(255,255,255,.48);
	line-height:1.3;
}

.hk-variants-select{
	width:150px;
}

.hk-generate-btn,
.hk-generate-btn-bottom{
	white-space:nowrap;
	font-weight:850;
}

@media (max-width: 992px){
	.hk-generator-top,
	.hk-generator-bottom{
		flex-direction:column;
		align-items:stretch;
	}

	.hk-note-grid{
		grid-template-columns:repeat(2,1fr);
	}

	.hk-radio-group-5{
		grid-template-columns:repeat(3,1fr);
	}

	.hk-variants-select{
		width:100%;
	}
}

@media (max-width: 576px){
	.hk-generator-panel{
		padding:13px;
		border-radius:18px;
	}

	.hk-note-grid{
		grid-template-columns:1fr;
	}

	.hk-radio-group-5{
		grid-template-columns:repeat(2,1fr);
	}

	.hk-radio-pill{
		min-height:38px;
		font-size:11px;
	}

	.hk-generator-title{
		font-size:19px;
	}
}

.hk-result-head{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
	gap:12px;
	padding:14px;
	border-radius:20px;
	background:
		radial-gradient(circle at 0% 0%, rgba(232,50,131,.18), transparent 34%),
		radial-gradient(circle at 100% 100%, rgba(65,215,167,.14), transparent 34%),
		linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
	border:1px solid rgba(255,255,255,.09);
	box-shadow:0 16px 38px rgba(0,0,0,.24);
}

.hk-result-main{
	display:flex;
	align-items:center;
	gap:12px;
	min-width:0;
}

.hk-result-icon{
	width:50px;
	height:50px;
	min-width:50px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:17px;
	background:rgba(65,215,167,.12);
	border:1px solid rgba(65,215,167,.22);
	color:#41d7a7;
	font-size:21px;
}

.hk-result-kicker{
	font-size:11px;
	font-weight:850;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:rgba(255,255,255,.42);
	margin-bottom:3px;
}

.hk-result-title{
	font-size:22px;
	font-weight:950;
	color:#fff;
	line-height:1.1;
}

.hk-result-subtitle{
	margin-top:4px;
	font-size:12px;
	color:rgba(255,255,255,.56);
}

.hk-result-summary{
	display:grid;
	grid-template-columns:repeat(3, minmax(92px, 1fr));
	gap:8px;
}

.hk-result-summary-item{
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-width:0;
	padding:9px 10px;
	border-radius:15px;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.07);
}

.hk-result-summary-item span{
	font-size:13px;
	font-weight:900;
	color:#fff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-result-summary-item small{
	margin-top:2px;
	font-size:10px;
	color:rgba(255,255,255,.42);
}

.hk-mix-results-compact{
	display:grid;
	grid-template-columns:1fr;
	gap:12px;
}

.hk-mix-clean-card{
	padding:14px;
	border-radius:20px;
	background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
	border:1px solid rgba(255,255,255,.085);
	box-shadow:0 14px 34px rgba(0,0,0,.22);
}

.hk-mix-clean-top{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
}

.hk-mix-clean-num{
	font-size:11px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:rgba(255,255,255,.42);
	margin-bottom:4px;
}

.hk-mix-clean-title{
	font-size:19px;
	font-weight:950;
	color:#fff;
	line-height:1.12;
}

.hk-mix-clean-profile{
	margin-top:5px;
	font-size:12px;
	color:rgba(255,255,255,.54);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-mix-clean-strength{
	width:74px;
	min-width:74px;
	padding:8px 6px;
	text-align:center;
	border-radius:16px;
	background:rgba(65,215,167,.1);
	border:1px solid rgba(65,215,167,.22);
}

.hk-mix-clean-strength strong{
	display:block;
	font-size:24px;
	line-height:1;
	color:#41d7a7;
}

.hk-mix-clean-strength span{
	display:block;
	margin-top:3px;
	font-size:10px;
	color:rgba(255,255,255,.52);
}

.hk-mix-props-focus{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	gap:8px;
	margin-top:12px;
}

.hk-prop-focus{
	padding:9px;
	border-radius:14px;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.065);
}

.hk-prop-focus-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:6px;
	margin-bottom:6px;
}

.hk-prop-focus-top span{
	font-size:11px;
	color:rgba(255,255,255,.52);
}

.hk-prop-focus-top b{
	font-size:11px;
	color:#fff;
}

.hk-prop-focus-bar{
	height:6px;
	border-radius:999px;
	background:rgba(255,255,255,.07);
	overflow:hidden;
}

.hk-prop-focus-bar i{
	display:block;
	height:100%;
	border-radius:999px;
	background:linear-gradient(90deg, #e83283, #41d7a7);
}

.hk-prop-focus-caption{
	margin-top:5px;
	font-size:10px;
	color:rgba(255,255,255,.43);
}

.hk-mix-clean-middle{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:8px;
	margin-top:10px;
}

.hk-mix-clean-info{
	display:flex;
	align-items:center;
	gap:7px;
	min-width:0;
	padding:8px 10px;
	border-radius:14px;
	background:rgba(0,0,0,.16);
	border:1px solid rgba(255,255,255,.06);
	font-size:12px;
}

.hk-mix-clean-info span{
	color:rgba(255,255,255,.52);
}

.hk-mix-clean-info b{
	color:#fff;
}

.hk-mix-clean-info em{
	margin-left:auto;
	font-style:normal;
	color:rgba(255,255,255,.42);
	font-size:11px;
}

.hk-mix-clean-composition{
	display:grid;
	gap:7px;
	margin-top:10px;
}

.hk-mix-clean-row{
	display:grid;
	grid-template-columns:52px minmax(0,1fr) auto;
	align-items:center;
	gap:9px;
	padding:8px;
	border-radius:14px;
	background:rgba(255,255,255,.032);
	border:1px solid rgba(255,255,255,.055);
}

.hk-mix-clean-percent{
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:36px;
	border-radius:12px;
	background:rgba(255,255,255,.06);
	color:#fff;
	font-size:14px;
	font-weight:950;
}

.hk-mix-clean-name{
	font-size:13px;
	font-weight:850;
	color:#fff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-mix-clean-meta{
	margin-top:2px;
	font-size:11px;
	color:rgba(255,255,255,.45);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.hk-mix-clean-layer{
	display:flex;
	align-items:center;
	gap:5px;
	padding:5px 8px;
	border-radius:999px;
	background:rgba(65,215,167,.08);
	border:1px solid rgba(65,215,167,.16);
	color:rgba(255,255,255,.68);
	font-size:10px;
	white-space:nowrap;
}

@media (max-width: 992px){
	.hk-result-head{
		flex-direction:column;
	}

	.hk-result-summary{
		grid-template-columns:repeat(3, 1fr);
	}

	.hk-mix-props-focus{
		grid-template-columns:repeat(3, 1fr);
	}
}

@media (max-width: 576px){
	.hk-result-summary{
		grid-template-columns:1fr;
	}

	.hk-mix-clean-top{
		flex-direction:column;
	}

	.hk-mix-clean-strength{
		width:100%;
		min-width:0;
		display:flex;
		align-items:center;
		justify-content:space-between;
	}

	.hk-mix-props-focus{
		grid-template-columns:repeat(2, 1fr);
	}

	.hk-mix-clean-middle{
		grid-template-columns:1fr;
	}

	.hk-mix-clean-row{
		grid-template-columns:46px minmax(0,1fr);
	}

	.hk-mix-clean-layer{
		grid-column:1 / -1;
		justify-content:center;
	}
}

.hk-mix-hero{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:14px;
}

.hk-mix-hero-kicker{
	display:inline-flex;
	align-items:center;
	font-size:11px;
	font-weight:850;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:rgba(255,255,255,.45);
	margin-bottom:6px;
}

.hk-mix-hero-title{
	margin:0;
	font-size:28px;
	line-height:1.05;
	font-weight:950;
	color:#fff;
}

.hk-mix-hero-text{
	margin-top:6px;
	font-size:13px;
	color:rgba(255,255,255,.56);
}

.hk-mix-form{
	position:relative;
}

.hk-field-label{
	display:block;
	margin-bottom:6px;
	font-size:11px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.05em;
	color:rgba(255,255,255,.46);
}

.hk-search-main .input-group-lg > .form-control,
.hk-search-main .input-group-lg > .input-group-text{
	min-height:52px;
}

.hk-search-main .form-control{
	font-size:15px;
	font-weight:650;
}

.hk-quick-grid{
	display:grid;
	grid-template-columns:minmax(240px, 1.4fr) minmax(260px, 1fr) minmax(230px, .9fr) 105px 135px;
	gap:10px;
	align-items:end;
}

.hk-segment{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:4px;
	padding:4px;
	min-height:38px;
	border-radius:14px;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.07);
}

.hk-segment label{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:30px;
	border-radius:10px;
	cursor:pointer;
	font-size:11px;
	font-weight:850;
	color:rgba(255,255,255,.58);
	transition:.15s ease;
}

.hk-segment .btn-check:checked + label{
	background:linear-gradient(135deg, rgba(232,50,131,.32), rgba(65,215,167,.2));
	color:#fff;
	box-shadow:0 6px 16px rgba(0,0,0,.18);
}

.hk-main-action{
	min-height:38px;
	font-weight:900;
	border-radius:13px;
}

.hk-advanced{
	border-top:1px solid rgba(255,255,255,.06);
	padding-top:10px;
}

.hk-advanced-toggle{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:9px 11px;
	border:0;
	border-radius:14px;
	background:rgba(255,255,255,.035);
	color:rgba(255,255,255,.68);
	font-size:12px;
	font-weight:850;
}

.hk-advanced-box{
	padding:12px;
	border-radius:16px;
	background:rgba(0,0,0,.14);
	border:1px solid rgba(255,255,255,.055);
}

.hk-source-tabs{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:6px;
}

.hk-source-tab{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-height:36px;
	padding:7px 9px;
	border-radius:12px;
	cursor:pointer;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.06);
	color:rgba(255,255,255,.58);
	font-size:11px;
	font-weight:850;
}

.btn-check:checked + .hk-source-tab{
	color:#fff;
	background:rgba(232,50,131,.16);
	border-color:rgba(232,50,131,.3);
}

.hk-brand-box,
.hk-exclude-box{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	padding:8px;
	border-radius:14px;
	background:rgba(255,255,255,.025);
	border:1px solid rgba(255,255,255,.045);
}

.hk-brand-box{
	max-height:106px;
	overflow:auto;
}

.hk-brand-pill,
.hk-exclude-pill{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 8px;
	border-radius:999px;
	cursor:pointer;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.055);
	color:rgba(255,255,255,.56);
	font-size:11px;
	font-weight:750;
}

.btn-check:checked + .hk-brand-pill{
	color:#fff;
	background:rgba(65,215,167,.14);
	border-color:rgba(65,215,167,.28);
}

.btn-check:checked + .hk-exclude-pill{
	color:#fff;
	background:rgba(253,126,20,.14);
	border-color:rgba(253,126,20,.28);
}

@media (max-width: 1200px){
	.hk-quick-grid{
		grid-template-columns:1fr 1fr;
	}

	.hk-main-action{
		min-height:42px;
	}
}

@media (max-width: 768px){
	.hk-mix-hero{
		flex-direction:column;
	}

	.hk-quick-grid{
		grid-template-columns:1fr;
	}

	.hk-mix-hero-title{
		font-size:23px;
	}
}


.hk-data-note{
	padding:10px 11px;
	border-radius:14px;
	background:rgba(255,255,255,.035);
	border:1px solid rgba(255,255,255,.06);
	color:rgba(255,255,255,.58);
	font-size:12px;
	line-height:1.35;
}

.hk-data-note-title{
	margin-bottom:4px;
	color:#fff;
	font-weight:800;
	font-size:12px;
}

.hk-actuality-box{
	display:grid;
	gap:10px;
}

.hk-actuality-score{
	padding:12px;
	border-radius:15px;
	background:rgba(255,255,255,.035);
	border:1px solid rgba(255,255,255,.06);
}

.hk-actuality-score div{
	font-size:20px;
	font-weight:950;
	line-height:1.1;
}

.hk-actuality-score span{
	display:block;
	margin-top:4px;
	font-size:11px;
	color:rgba(255,255,255,.48);
}

.hk-actuality-list{
	display:grid;
	gap:7px;
}

.hk-actuality-list div{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	color:rgba(255,255,255,.62);
}

.hk-actuality-list i{
	width:14px;
	text-align:center;
}

.hk-mini-param-explain{
	min-height:82px;
	align-items:flex-start;
}

.hk-mini-param-explain small{
	display:block;
	margin-top:4px;
	font-size:10px;
	line-height:1.25;
	color:rgba(255,255,255,.42);
}

.hk-quick-grid-assoc{
	display:grid;
	grid-template-columns:minmax(260px, 1fr) minmax(230px, 1fr) 160px;
	gap:10px;
	align-items:end;
}

.hk-assoc-chip{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:8px 11px;
	border-radius:999px;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.07);
	color:rgba(255,255,255,.68);
	font-size:12px;
	font-weight:800;
	text-decoration:none;
}

.hk-assoc-chip:hover{
	color:#fff;
	background:rgba(65,215,167,.11);
	border-color:rgba(65,215,167,.25);
	text-decoration:none;
}

@media (max-width: 992px){
	.hk-quick-grid-assoc{
		grid-template-columns:1fr;
	}
}

.hk-quick-grid-assoc{
	display:grid;
	grid-template-columns:minmax(260px, 1fr) minmax(230px, 1fr) 160px;
	gap:10px;
	align-items:end;
}

.hk-assoc-chip{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:8px 11px;
	border-radius:999px;
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.07);
	color:rgba(255,255,255,.68);
	font-size:12px;
	font-weight:800;
	text-decoration:none;
}

.hk-assoc-chip:hover{
	color:#fff;
	background:rgba(65,215,167,.11);
	border-color:rgba(65,215,167,.25);
	text-decoration:none;
}

.hk-flavor-link{
	color:#fff;
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.hk-flavor-link:hover{
	color:#41d7a7;
	text-decoration:none;
}

.hk-flavor-link i{
	font-size:10px;
	opacity:.45;
	transition:.15s ease;
}

.hk-flavor-link:hover i{
	opacity:.9;
}

@media (max-width: 992px){
	.hk-quick-grid-assoc{
		grid-template-columns:1fr;
	}
}

.hk-assoc-loader{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	background:
		radial-gradient(circle at 20% 20%, rgba(232,50,131,.22), transparent 34%),
		radial-gradient(circle at 80% 80%, rgba(65,215,167,.18), transparent 34%),
		rgba(10,12,15,.82);
	backdrop-filter:blur(10px);
}

.hk-assoc-loader-card{
	width:min(420px, 100%);
	padding:24px;
	border-radius:24px;
	text-align:center;
	background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
	border:1px solid rgba(255,255,255,.12);
	box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.hk-assoc-loader-orb{
	width:72px;
	height:72px;
	margin:0 auto 14px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:24px;
	color:#fff;
	font-size:28px;
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 38%),
		linear-gradient(135deg, #e83283, #41d7a7);
	box-shadow:0 0 35px rgba(65,215,167,.18);
	animation:hkAssocPulse 1.4s ease-in-out infinite;
}

.hk-assoc-loader-title{
	font-size:20px;
	font-weight:950;
	color:#fff;
	line-height:1.1;
}

.hk-assoc-loader-text{
	margin-top:7px;
	font-size:13px;
	line-height:1.35;
	color:rgba(255,255,255,.58);
}

.hk-assoc-loader-steps{
	display:grid;
	gap:7px;
	margin-top:16px;
	text-align:left;
}

.hk-assoc-loader-steps div{
	display:flex;
	align-items:center;
	gap:8px;
	padding:9px 10px;
	border-radius:14px;
	background:rgba(0,0,0,.18);
	border:1px solid rgba(255,255,255,.06);
	color:rgba(255,255,255,.68);
	font-size:12px;
	font-weight:750;
}

.hk-assoc-loader-steps i{
	width:18px;
	color:#41d7a7;
	text-align:center;
}

.hk-assoc-loader-dots{
	display:flex;
	justify-content:center;
	gap:6px;
	margin-top:16px;
}

.hk-assoc-loader-dots span{
	width:7px;
	height:7px;
	border-radius:50%;
	background:#41d7a7;
	opacity:.35;
	animation:hkAssocDot 1s infinite ease-in-out;
}

.hk-assoc-loader-dots span:nth-child(2){
	animation-delay:.15s;
}

.hk-assoc-loader-dots span:nth-child(3){
	animation-delay:.3s;
}

@keyframes hkAssocPulse{
	0%,100%{
		transform:scale(1);
		box-shadow:0 0 28px rgba(65,215,167,.16);
	}
	50%{
		transform:scale(1.055);
		box-shadow:0 0 44px rgba(232,50,131,.26);
	}
}

@keyframes hkAssocDot{
	0%,100%{
		opacity:.25;
		transform:translateY(0);
	}
	50%{
		opacity:1;
		transform:translateY(-4px);
	}
}


.hp-hero{
	position:relative;
	overflow:hidden;
	display:grid;
	grid-template-columns:minmax(0, 1.25fr) minmax(320px, .75fr);
	gap:24px;
	align-items:center;
	padding:32px;
	border-radius:28px;
	background:
		radial-gradient(circle at 8% 12%, rgba(232,50,131,.26), transparent 34%),
		radial-gradient(circle at 90% 85%, rgba(65,215,167,.18), transparent 34%),
		linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
	border:1px solid rgba(255,255,255,.10);
	box-shadow:0 24px 70px rgba(0,0,0,.32);
}

.hp-hero-bg{
	position:absolute;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(120deg, transparent, rgba(255,255,255,.055), transparent);
	opacity:.6;
}

.hp-hero-content,
.hp-hero-side{
	position:relative;
	z-index:1;
}

.hp-hero-kicker{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-bottom:12px;
	padding:7px 10px;
	border-radius:999px;
	background:rgba(65,215,167,.10);
	border:1px solid rgba(65,215,167,.22);
	color:#41d7a7;
	font-size:11px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.08em;
}

.hp-hero-title{
	max-width:720px;
	margin:0;
	color:#fff;
	font-size:42px;
	line-height:1.02;
	font-weight:950;
	letter-spacing:-.03em;
}

.hp-hero-text{
	max-width:720px;
	margin-top:14px;
	color:rgba(255,255,255,.62);
	font-size:15px;
	line-height:1.55;
}

.hp-hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:22px;
}

.hp-hero-actions .btn{
	border-radius:15px;
	font-weight:850;
}

.hp-hero-side{
	display:grid;
	gap:10px;
}

.hp-orbit-card{
	display:flex;
	align-items:center;
	gap:11px;
	padding:13px;
	border-radius:18px;
	background:rgba(0,0,0,.20);
	border:1px solid rgba(255,255,255,.08);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.hp-orbit-card-main{
	background:linear-gradient(135deg, rgba(232,50,131,.18), rgba(65,215,167,.10));
	border-color:rgba(65,215,167,.20);
}

.hp-orbit-icon{
	width:42px;
	height:42px;
	min-width:42px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:15px;
	background:rgba(255,255,255,.07);
	color:#41d7a7;
	font-size:17px;
}

.hp-orbit-card b{
	display:block;
	color:#fff;
	font-size:13px;
	line-height:1.15;
}

.hp-orbit-card span{
	display:block;
	margin-top:3px;
	color:rgba(255,255,255,.45);
	font-size:11px;
	line-height:1.2;
}

.hp-section-head{
	display:flex;
	align-items:end;
	justify-content:space-between;
	gap:12px;
}

.hp-section-kicker{
	font-size:11px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:rgba(255,255,255,.42);
	margin-bottom:4px;
}

.hp-section-title{
	font-size:22px;
	font-weight:950;
	color:#fff;
	line-height:1.1;
}

.hp-main-card{
	position:relative;
	overflow:hidden;
	display:block;
	height:100%;
	min-height:220px;
	padding:18px;
	border-radius:22px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.08);
	text-decoration:none;
	color:#fff;
	box-shadow:0 14px 38px rgba(0,0,0,.20);
	transition:.18s ease;
}

.hp-main-card:before{
	content:"";
	position:absolute;
	inset:auto -20% -35% -20%;
	height:120px;
	background:radial-gradient(circle, rgba(255,255,255,.11), transparent 62%);
	opacity:.55;
	transition:.18s ease;
}

.hp-main-card:hover{
	transform:translateY(-3px);
	color:#fff;
	border-color:rgba(65,215,167,.25);
	box-shadow:0 20px 50px rgba(0,0,0,.28);
}

.hp-main-card:hover:before{
	opacity:.9;
	transform:scale(1.08);
}

.hp-card-green{
	background:
		radial-gradient(circle at 10% 0%, rgba(65,215,167,.18), transparent 34%),
		rgba(255,255,255,.04);
}

.hp-card-pink{
	background:
		radial-gradient(circle at 10% 0%, rgba(232,50,131,.22), transparent 34%),
		rgba(255,255,255,.04);
}

.hp-card-blue{
	background:
		radial-gradient(circle at 10% 0%, rgba(57,203,251,.18), transparent 34%),
		rgba(255,255,255,.04);
}

.hp-main-card-top{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:22px;
}

.hp-main-card-icon{
	width:52px;
	height:52px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:18px;
	background:rgba(255,255,255,.075);
	border:1px solid rgba(255,255,255,.10);
	color:#41d7a7;
	font-size:22px;
}

.hp-card-pink .hp-main-card-icon{
	color:#e83283;
}

.hp-card-blue .hp-main-card-icon{
	color:#39cbfb;
}

.hp-main-card-arrow{
	width:32px;
	height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:rgba(255,255,255,.055);
	color:rgba(255,255,255,.45);
	transition:.18s ease;
}

.hp-main-card:hover .hp-main-card-arrow{
	background:rgba(65,215,167,.15);
	color:#41d7a7;
	transform:translateX(2px);
}

.hp-main-card-title{
	position:relative;
	z-index:1;
	font-size:22px;
	font-weight:950;
	line-height:1.1;
	color:#fff;
}

.hp-main-card-desc{
	position:relative;
	z-index:1;
	margin-top:5px;
	font-size:12px;
	font-weight:850;
	color:#41d7a7;
	text-transform:uppercase;
	letter-spacing:.05em;
}

.hp-card-pink .hp-main-card-desc{
	color:#e83283;
}

.hp-card-blue .hp-main-card-desc{
	color:#39cbfb;
}

.hp-main-card-text{
	position:relative;
	z-index:1;
	margin-top:12px;
	font-size:13px;
	line-height:1.45;
	color:rgba(255,255,255,.56);
}

.hp-info-strip{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:10px;
	padding:12px;
	border-radius:22px;
	background:rgba(255,255,255,.035);
	border:1px solid rgba(255,255,255,.07);
}

.hp-info-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px;
	border-radius:16px;
	background:rgba(0,0,0,.14);
}

.hp-info-num{
	width:38px;
	height:38px;
	min-width:38px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:14px;
	background:rgba(65,215,167,.10);
	color:#41d7a7;
	font-size:12px;
	font-weight:950;
}

.hp-info-item b{
	display:block;
	color:#fff;
	font-size:13px;
	line-height:1.2;
}

.hp-info-item span{
	display:block;
	margin-top:2px;
	color:rgba(255,255,255,.45);
	font-size:11px;
	line-height:1.2;
}

@media (max-width: 992px){
	.hp-hero{
		grid-template-columns:1fr;
		padding:24px;
	}

	.hp-hero-title{
		font-size:34px;
	}

	.hp-info-strip{
		grid-template-columns:1fr;
	}
}

@media (max-width: 576px){
	.hp-hero{
		padding:18px;
		border-radius:22px;
	}

	.hp-hero-title{
		font-size:28px;
	}

	.hp-hero-text{
		font-size:13px;
	}

	.hp-hero-actions .btn{
		width:100%;
	}

	.hp-main-card{
		min-height:190px;
	}
}

.hk-mix-missing-row{
	border-color:rgba(253,126,20,.18);
	background:rgba(253,126,20,.055);
}

.hk-missing-title{
	color:#ffc107;
	font-weight:850;
}

.hk-mix-missing-badge{
	background:rgba(253,126,20,.12);
	border-color:rgba(253,126,20,.26);
	color:#ffc107;
}

.hk-stack-missing{
	background:repeating-linear-gradient(
		45deg,
		rgba(253,126,20,.28),
		rgba(253,126,20,.28) 7px,
		rgba(253,126,20,.16) 7px,
		rgba(253,126,20,.16) 14px
	) !important;
	border-right:1px solid rgba(0,0,0,.18);
}

.hk-stack-missing .hk-stack-name,
.hk-stack-missing .hk-stack-percent{
	color:#fff3cd;
}

.hk-mix-missing-row{
	border-color:rgba(253,126,20,.18);
	background:rgba(253,126,20,.055);
}

.hk-missing-title{
	color:#ffc107;
	font-weight:850;
}

.hk-mix-missing-badge{
	background:rgba(253,126,20,.12);
	border-color:rgba(253,126,20,.26);
	color:#ffc107;
}

.hk-mix-missing-row{
	opacity:.9;
	border-style:dashed;
}

.hk-mix-missing-row .hk-mix-clean-percent{
	color:#ffc107;
}

.hk-ai-loader-overlay{
	position:fixed;
	inset:0;
	z-index:9999;
	display:none;
	align-items:center;
	justify-content:center;
	padding:18px;
	background:rgba(8,10,14,.78);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
}

.hk-ai-loader-overlay.show{
	display:flex;
}

.hk-ai-loader-card{
	width:min(420px,100%);
	border:1px solid rgba(255,255,255,.14);
	border-radius:24px;
	background:
		radial-gradient(circle at 20% 0%, rgba(65,215,167,.18), transparent 34%),
		radial-gradient(circle at 90% 10%, rgba(57,203,251,.14), transparent 32%),
		rgba(20,23,28,.96);
	box-shadow:0 24px 80px rgba(0,0,0,.45);
	padding:22px;
	text-align:center;
	color:#fff;
}

.hk-ai-loader-orbit{
	width:78px;
	height:78px;
	margin:0 auto 16px;
	border-radius:50%;
	position:relative;
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.12);
	display:flex;
	align-items:center;
	justify-content:center;
}

.hk-ai-loader-orbit::before{
	content:"";
	position:absolute;
	inset:-3px;
	border-radius:50%;
	border:3px solid transparent;
	border-top-color:#41d7a7;
	border-right-color:#39cbfb;
	animation:hkAiSpin .9s linear infinite;
}

.hk-ai-loader-orbit i{
	font-size:28px;
	color:#41d7a7;
	filter:drop-shadow(0 0 16px rgba(65,215,167,.55));
}

.hk-ai-loader-title{
	font-size:18px;
	font-weight:800;
	letter-spacing:-.02em;
	margin-bottom:6px;
}

.hk-ai-loader-text{
	font-size:13px;
	color:rgba(255,255,255,.68);
	line-height:1.45;
}

.hk-ai-loader-progress{
	height:5px;
	border-radius:999px;
	overflow:hidden;
	background:rgba(255,255,255,.09);
	margin-top:16px;
}

.hk-ai-loader-progress i{
	display:block;
	height:100%;
	width:42%;
	border-radius:999px;
	background:linear-gradient(90deg,#41d7a7,#39cbfb);
	animation:hkAiProgress 1.15s ease-in-out infinite;
}

.hk-ai-loader-steps{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:6px;
	margin-top:14px;
}

.hk-ai-loader-steps span{
	font-size:11px;
	padding:4px 7px;
	border-radius:999px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.09);
	color:rgba(255,255,255,.72);
}

.hk-main-action.is-loading{
	pointer-events:none;
	opacity:.8;
}

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

@keyframes hkAiProgress{
	0%{transform:translateX(-120%);}
	55%{transform:translateX(80%);}
	100%{transform:translateX(240%);}
}

.hk-mobile-dock .hk-dock-item.hk-dock-active{
	color:#41d7a7;
}

.hk-mobile-dock .hk-dock-item.hk-dock-active i{
	color:#41d7a7;
}

.hk-mobile-dock .hk-dock-item.hk-dock-active span{
	color:#41d7a7;
}

.hk-mobile-dock .hk-dock-item.hk-dock-main.hk-dock-active{
	background:linear-gradient(135deg,#41d7a7,#39cbfb);
	color:#111;
}

.hk-mobile-dock .hk-dock-item.hk-dock-main.hk-dock-active i,
.hk-mobile-dock .hk-dock-item.hk-dock-main.hk-dock-active span{
	color:#111;
}

@media (max-width: 575.98px){

	.hk-result-head{
		display:block !important;
		padding:12px !important;
		border-radius:18px !important;
		overflow:hidden;
	}

	.hk-result-main{
		display:flex;
		align-items:flex-start;
		gap:10px;
		min-width:0;
		width:100%;
	}

	.hk-result-icon{
		width:38px;
		height:38px;
		min-width:38px;
		flex:0 0 38px;
		border-radius:14px;
	}

	.hk-result-title{
		font-size:18px;
		line-height:1.15;
		word-break:break-word;
		overflow-wrap:anywhere;
	}

	.hk-result-subtitle{
		font-size:12px;
		line-height:1.35;
		word-break:break-word;
		overflow-wrap:anywhere;
	}

	.hk-result-summary{
		display:grid !important;
		grid-template-columns:repeat(3, minmax(0, 1fr));
		gap:6px;
		margin-top:10px;
		width:100%;
	}

	.hk-result-summary-item{
		min-width:0 !important;
		padding:7px 5px !important;
		border-radius:12px !important;
		text-align:center;
	}

	.hk-result-summary-item span{
		display:block;
		font-size:14px;
		line-height:1.1;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}

	.hk-result-summary-item small{
		display:block;
		font-size:10px;
		line-height:1.1;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
}

@media (max-width: 575.98px){

	.hk-mix-results-compact{
		display:block !important;
		width:100%;
		min-width:0;
	}

	.hk-mix-clean-card,
	.hk-mix-card,
	.hk-data-note,
	.hk-empty-state{
		width:100%;
		max-width:100%;
		min-width:0;
		overflow:hidden;
	}

	.hk-mix-clean-top,
	.hk-mix-card-top{
		display:flex;
		align-items:flex-start;
		gap:10px;
		min-width:0;
	}

	.hk-mix-clean-title,
	.hk-mix-card-title{
		font-size:17px;
		line-height:1.15;
		overflow-wrap:anywhere;
		word-break:break-word;
	}

	.hk-mix-clean-profile,
	.hk-mix-card-subtitle,
	.hk-mix-card-text{
		overflow-wrap:anywhere;
		word-break:break-word;
	}

	.hk-mix-clean-strength{
		flex:0 0 auto;
		max-width:72px;
		text-align:right;
	}
}

@media (max-width: 575.98px){

	.hk-mix-bar,
	.hk-mix-progress,
	.hk-flavor-progress{
		width:100%;
		max-width:100%;
		overflow:hidden;
	}

	.hk-mix-part,
	.hk-progress-part{
		min-width:0;
		overflow:hidden;
	}

	.hk-mix-part span,
	.hk-progress-part span{
		display:block;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		font-size:10px;
	}
}