.csb-bar *, .csb-bar *::before, .csb-bar *::after { box-sizing: border-box; margin: 0; padding: 0; }

.csb-bar {
	position: fixed;
	left: 0; right: 0;
	z-index: 999999;
	width: 100%;
	min-height: var(--csb-bar-height, 70px);
	background: var(--csb-bar-bg, #1a1a2e);
	color: var(--csb-bar-text, #fff);
	box-shadow: var(--csb-bar-shadow, 0 -4px 20px rgba(0,0,0,.25));
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: none;
}
.csb-bar--bottom { bottom: 0; }
.csb-bar--top    { top: 0; }
.csb-bar--visible { display: flex; align-items: center; }

.csb-bar--bottom.csb-bar--anim-slide.csb-bar--entering { animation: csbSlideUp   .35s cubic-bezier(.22,.61,.36,1) forwards; }
.csb-bar--bottom.csb-bar--anim-slide.csb-bar--leaving  { animation: csbSlideDown .28s ease-in forwards; }
.csb-bar--top.csb-bar--anim-slide.csb-bar--entering    { animation: csbSlideDown2 .35s cubic-bezier(.22,.61,.36,1) forwards; }
.csb-bar--top.csb-bar--anim-slide.csb-bar--leaving     { animation: csbSlideUp2  .28s ease-in forwards; }
.csb-bar--anim-fade.csb-bar--entering { animation: csbFade    .35s ease forwards; }
.csb-bar--anim-fade.csb-bar--leaving  { animation: csbFadeOut .28s ease forwards; }

@keyframes csbSlideUp    { from { transform: translateY(100%); opacity:0; } to { transform: none; opacity:1; } }
@keyframes csbSlideDown  { from { transform: none; opacity:1; } to { transform: translateY(100%); opacity:0; } }
@keyframes csbSlideDown2 { from { transform: translateY(-100%); opacity:0; } to { transform: none; opacity:1; } }
@keyframes csbSlideUp2   { from { transform: none; opacity:1; } to { transform: translateY(-100%); opacity:0; } }
@keyframes csbFade       { from { opacity:0; } to { opacity:1; } }
@keyframes csbFadeOut    { from { opacity:1; } to { opacity:0; } }

.csb-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 52px 0 0;
	min-height: var(--csb-bar-height, 70px);
	gap: 0;
	box-sizing: border-box;
}

.csb-bar__identity {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: var(--csb-identity-padding, 0px);
}

.csb-bar__logo { flex-shrink: 0; }

.csb-bar__logo-circle {
	width:  var(--csb-logo-circle-size, 54px);
	height: var(--csb-logo-circle-size, 54px);
	min-width: 24px;
	min-height: 24px;
	border-radius: 50%;
	background: var(--csb-logo-circle-bg, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

.csb-bar__logo-circle img {
	display: block;
	width:  var(--csb-logo-size, 78%);
	height: var(--csb-logo-size, 78%);
	object-fit: contain;
}

.csb-bar__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.csb-bar__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--csb-bar-text, #fff);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.csb-bar__rating {
	display: flex;
	align-items: center;
	gap: 6px;
}

.csb-bar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--csb-badge-bg, #22c55e);
	color: var(--csb-badge-text, #fff);
	font-size: 12px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 4px;
	line-height: 1.4;
	letter-spacing: .02em;
}

.csb-bar__rating-label {
	font-size: 12px;
	opacity: .7;
	white-space: nowrap;
}

.csb-bar__spacer {
	flex: 0 0 var(--csb-inner-gap, 750px);
	min-width: 0;
}

.csb-bar__action {
	flex-shrink: 0;
	padding: var(--csb-action-padding, 0px);
}

.csb-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--csb-btn-bg, #22c55e);
	color: var(--csb-btn-color, #fff) !important;
	font-size: var(--csb-btn-font-size, 15px);
	font-weight: 700;
	padding: var(--csb-btn-padding, 12px 28px);
	border-radius: var(--csb-btn-radius, 8px);
	text-decoration: none !important;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition: background .2s, color .2s, transform .15s, box-shadow .2s;
	box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.csb-bar__btn:hover, .csb-bar__btn:focus {
	background: var(--csb-btn-hover-bg, #16a34a) !important;
	color: var(--csb-btn-hover-color, #fff) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(0,0,0,.22);
	text-decoration: none !important;
	outline: none;
}
.csb-bar__btn:active { transform: none; }

.csb-bar__close {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--csb-close-color, #aaa);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 5px 7px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .2s, background .2s;
}
.csb-bar__close:hover { color: #fff; background: rgba(255,255,255,.15); }

@media (max-width: 768px) {
	.csb-bar__inner { padding: 0 44px 0 0; }
	.csb-bar__spacer { display: none; }
	.csb-bar__action { margin-left: auto; }
	.csb-bar__name  { font-size: 13px; }
	.csb-bar__rating-label { display: none; }
}

@media (max-width: 380px) {
	.csb-bar__logo { display: none; }
}