/* kai-member.css: member area (auth modal, header user menu, notifications, /user/* pages). Loaded after kai.css. */

:root {
	--km-bg-0: #0c1116;
	--km-bg-1: #11161b;
	--km-bg-2: #181d22;
	--km-bg-3: #20272e;
	--km-card: #1e252b;
	--km-primary: #e45f3a;
	--km-green: #36cb68;
	--km-dim: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   Auth modal (#modallogin): green arc header, centered form
   ========================================================================== */
#modallogin .modal-dialog { max-width: 28rem; }
#modallogin .modal-content,
.km-modal .modal-content {
	position: relative;
	overflow: hidden;
	border: 0;
	border-radius: 1.2rem;
	background: var(--km-bg-2);
	color: #fff;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
#modallogin .modal-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 12rem;
	border-radius: 50%;
	background: var(--km-green);
	transform: translateY(-6rem);
	pointer-events: none;
}
#modallogin .modal-body,
.km-modal .modal-body { position: relative; padding: 8rem 3rem 3rem; }
.km-modal .modal-content.normal .modal-body { padding-top: 3rem; }
#modallogin .modal-body h5,
.km-modal .modal-body h5 { margin: 0 0 .4rem; color: #fff; font-size: 1.5rem; font-weight: 500; }
#modallogin .alert { margin-bottom: 0; padding: .6rem .9rem; border: 0; border-radius: .5rem; font-size: .95rem; text-align: left; }
#modallogin .alert-danger { background: rgba(228, 95, 58, .15); color: #ff9d82; }
#modallogin .alert-success { background: rgba(54, 203, 104, .15); color: #7fe3a3; }
#modallogin form { text-align: left; }
#modallogin .form-group { margin-bottom: 1.2rem; }
#modallogin .form-control,
.kai-member .profile-sbg .form-control {
	height: auto;
	padding: .7rem 1rem;
	border: 0;
	border-radius: .5rem;
	background: var(--km-bg-3);
	color: #fff;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	box-shadow: none;
}
#modallogin .form-control::placeholder,
.kai-member .profile-sbg .form-control::placeholder { color: rgba(255, 255, 255, .3); }
#modallogin .form-control:focus,
.kai-member .profile-sbg .form-control:focus { background: var(--km-bg-3); color: #fff; box-shadow: 0 0 0 .2rem rgba(228, 95, 58, .25); }
.kai-member .profile-sbg .form-control:disabled { background: var(--km-bg-2); color: var(--km-dim); }
#modallogin .modal-btn {
	padding: .45rem 1rem;
	border: 0;
	border-radius: .5rem;
	background: var(--km-primary);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
}
#modallogin .modal-btn:hover,
#modallogin .modal-btn:focus { background: #e77150; color: #fff; }
#modallogin .modal-btn:disabled { opacity: .65; }
#modallogin .modal-body > .mt-3 { color: #fff; }
#modallogin .modal-body a { color: var(--km-green); }
#modallogin .modal-body a:hover { color: #42ce71; text-decoration: none; }
#modallogin .modal-body a strong { font-weight: 500; }
#modallogin [id^="hi-captcha"] { display: flex; justify-content: center; margin-bottom: .5rem; }
.km-close {
	position: absolute;
	top: 3rem;
	right: 3rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	opacity: .55;
	font-size: 1rem;
	transform: translate(25%, -25%);
	cursor: pointer;
}
.km-close:hover { opacity: 1; }
.km-modal .modal-content.normal .km-close { top: 1.6rem; right: 1.6rem; }

/* ==========================================================================
   Header user area (logged in): bell + avatar dropdowns
   ========================================================================== */
#user-slot .acc-wrap { display: flex; align-items: center; }
.km-dd { position: relative; }
.km-dd > .km-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1050;
	display: none;
	margin-top: 1.2rem;
	border-radius: 1.2rem;
	background: var(--km-bg-2);
	color: #fff;
	text-align: left;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
	overflow: hidden;
}
.km-dd.open > .km-menu { display: block; animation: kmDrop .16s ease-out; }
@keyframes kmDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

#user-slot .nav-btn {
	position: relative;
	margin-right: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	line-height: 1;
	box-shadow: none;
}
#user-slot .nav-btn i { font-size: 1.5rem; }
#user-slot .nav-btn:hover { color: #ccc; }
#user-slot .nav-btn.new::after {
	content: "";
	position: absolute;
	top: 0;
	right: -.2rem;
	width: .35rem;
	height: .35rem;
	border-radius: 1rem;
	background: var(--km-primary);
}
#user-slot .km-ava-btn {
	display: block;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #1c2228;
	overflow: hidden;
}
#user-slot .km-ava-btn img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
#user-slot .km-ava-btn:hover img { opacity: .7; }

/* account menu */
.km-user-menu { width: 250px; padding-bottom: .2rem; }
.km-user-menu .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .8rem;
	padding: 1.4rem 1.7rem;
	background: var(--km-bg-0);
}
.km-user-menu .head > div { min-width: 0; margin-right: 1rem; overflow: hidden; }
.km-user-menu .head > div a { color: #fff; }
.km-user-menu .head > div a:hover { text-decoration: none; }
.km-user-menu .head > div div { overflow: hidden; font-size: 1.1rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.km-user-menu .head > div span { display: block; overflow: hidden; opacity: .6; text-overflow: ellipsis; white-space: nowrap; }
.km-user-menu .head > .btn {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.3rem;
	height: 2.3rem;
	padding: 0;
	border-radius: 5px;
	background: var(--km-bg-2);
	color: #fff;
}
.km-user-menu .head > .btn i { font-size: 1.2rem; opacity: .5; }
.km-user-menu .head > .btn:hover i { opacity: 1; }
.km-user-menu .dropdown-item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	background: none;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 300;
	opacity: .6;
}
.km-user-menu .dropdown-item span { display: block; width: 100%; margin: 0 .8rem; padding: .55rem 1rem; border-radius: 5px; }
.km-user-menu .dropdown-item i { width: 1.8rem; }
.km-user-menu .dropdown-item:hover,
.km-user-menu .dropdown-item:focus { background: none; color: #fff; opacity: 1; }
.km-user-menu .dropdown-item:hover span { background: rgba(255, 255, 255, .05); }

/* notifications (dropdown + page share these) */
.km-noti-menu { width: 370px; max-width: calc(100vw - 24px); padding: .2rem 0; }
.user-notification .shead { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: .8rem 1.4rem 1rem; }
.user-notification .shead .stitle { margin: 0; color: #fff; font-size: 1.2rem; font-weight: 500; text-transform: none; }
.user-notification .more-btn.mark { padding: 0; border: 0; background: none; color: #fff; font-size: 1rem; }
.user-notification .more-btn.mark:hover { color: var(--km-green); }
.noti-tab { display: flex; gap: .6rem; padding: 0 1.4rem 1.4rem; }
.noti-tab span,
.noti-tab a {
	flex: 1;
	padding: .5rem 0;
	border-radius: .6rem;
	background: var(--km-bg-1);
	color: var(--km-dim);
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: all .2s;
}
.noti-tab span:hover,
.noti-tab a:hover { color: #fff; text-decoration: none; }
.noti-tab span.active,
.noti-tab a.active { background: var(--km-green); color: var(--km-bg-0); }
.user-notification .items-wrap { max-height: 360px; overflow-y: auto; }
.user-notification.profile-sbg .items-wrap { max-height: none; }
.noti-item {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .6rem 1.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	color: #fff;
	transition: background .15s;
}
.noti-item:hover { background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; }
.noti-item.unread { background: rgba(228, 95, 58, .06); }
.noti-item img { flex-shrink: 0; width: 2.8rem; height: 2.8rem; border-radius: .4rem; object-fit: cover; }
.noti-body { flex-grow: 1; min-width: 0; font-size: .85rem; line-height: 1.35; }
.noti-time { display: flex; flex-shrink: 0; align-items: center; gap: .4rem; font-size: .75rem; opacity: .45; white-space: nowrap; }
.noti-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--km-primary); }
.noti-empty { padding: 2rem 1.4rem 2.6rem; color: var(--km-dim); text-align: center; }
.km-noti-all { display: block; padding: .7rem; border-top: 1px solid rgba(255, 255, 255, .05); color: var(--km-dim); font-size: .9rem; text-align: center; }
.km-noti-all:hover { color: #fff; text-decoration: none; }

/* floating folder menu (watch-page Bookmark button) */
.km-float-menu {
	position: absolute;
	z-index: 1060;
	min-width: 170px;
	padding: .5rem;
	border-radius: .8rem;
	background: var(--km-bg-2);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
	animation: kmDrop .16s ease-out;
}
.km-float-menu .dropdown-item,
.folder-select .km-menu .dropdown-item {
	display: block;
	padding: .45rem .9rem;
	border-radius: .4rem;
	background: none;
	color: rgba(255, 255, 255, .7);
	font-weight: 300;
}
.km-float-menu .dropdown-item:hover,
.folder-select .km-menu .dropdown-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.km-float-menu .dropdown-item.active,
.folder-select .km-menu .dropdown-item.active { color: var(--km-primary); }
div.bookmark.marked { color: var(--km-primary); }

/* toast */
#km-toast { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.km-toast-item {
	padding: .7rem 1.1rem;
	border-radius: .6rem;
	background: var(--km-bg-3);
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
	transition: opacity .3s, transform .3s;
}
.km-toast-item.is-ok i { color: var(--km-green); }
.km-toast-item.is-error i { color: var(--km-primary); }
.km-toast-item.out { opacity: 0; transform: translateY(8px); }

/* ==========================================================================
   Member pages
   ========================================================================== */
.kai-member { padding: 5.5rem 0 4rem; }
.kai-member .container { max-width: 1400px; }
.kai-member .w600 { max-width: 600px; }
.kai-member .w900 { max-width: 900px; }
.kai-member .container.profilepage { max-width: 1200px; }
.kai-member a { color: inherit; }
.km-muted { color: var(--km-dim); }

/* section nav */
.kai-member .profilew { display: flex; justify-content: center; }
.profile-ctrl {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	height: 3.5rem;
	margin: 0 auto 5rem;
	padding: 0 1rem;
	border-radius: .6rem;
	background: rgba(255, 255, 255, .05);
}
.profile-ctrl > a {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin-right: 1rem;
	padding-right: 2rem;
	border-right: 1px solid rgba(255, 255, 255, .1);
	color: #fff;
	font-weight: 500;
}
.profile-ctrl > a:hover { text-decoration: none; color: #fff; }
.profile-ctrl > a img { width: 2.4rem; height: 2.4rem; margin-right: .5rem; border-radius: 1.2rem; object-fit: cover; }
.profile-ctrl .profile-menu { display: flex; align-items: center; min-width: 0; }
.profile-ctrl .profile-menu a { display: flex; align-items: center; padding: .5rem .8rem; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.profile-ctrl .profile-menu a span { margin-left: .3rem; }
.profile-ctrl .profile-menu a:hover { color: #fff; text-decoration: none; }
.profile-ctrl .profile-menu a.active { border-radius: 5px; background: var(--km-primary); color: #fff; }
.profile-ctrl .km-badge {
	margin-left: .2rem;
	padding: 1px 6px;
	border-radius: 10px;
	background: var(--km-primary);
	color: #fff;
	font-size: .7rem;
	font-weight: 500;
}
.profile-ctrl .profile-menu a.active .km-badge { background: rgba(0, 0, 0, .25); }

/* panels */
.profile-sbg { padding: 5rem; border-radius: 1.2rem; background: var(--km-bg-1); }
.profile-sbg h5 { color: #fff; font-size: 1.2rem; font-weight: 500; }
.profile-sbg .form-group { margin-bottom: 0; }
.profile-sbg .form-text { color: var(--km-dim); font-size: .875em; }
.profile-sbg .btn-primary,
.km-guest .btn-primary,
.km-ie .btn-primary { padding: .45rem 1rem; border: 0; border-radius: .5rem; background: var(--km-primary); color: #fff; }
.profile-sbg .btn-primary:hover,
.km-ie .btn-primary:hover { background: #e77150; color: #fff; }
.profile-sbg .btn-primary strong { font-weight: 500; }
.km-toggle-pass { color: #fff !important; }
.km-toggle-pass:hover { color: var(--km-green) !important; text-decoration: none; }
.km-alert { padding: .7rem 1rem; border: 0; border-radius: .5rem; }
.km-alert.alert-danger { background: rgba(228, 95, 58, .15); color: #ff9d82; }
.km-alert.alert-success { background: rgba(54, 203, 104, .15); color: #7fe3a3; }
.km-guest { text-align: center; }
.km-guest > i { margin-bottom: 1rem; color: var(--km-primary); font-size: 2.6rem; }
.km-guest p { color: var(--km-dim); }

/* notifications page */
.profile-sbg.noti { padding: 0; overflow: hidden; }
.profile-sbg.noti .shead { padding: 1rem 1.5rem; }
.profile-sbg.noti .shead .stitle { font-size: 1.45rem; }

/* settings */
.setting-box { padding: 0 !important; overflow: hidden; }
.setting-box form { overflow: hidden; }
.setting-box .form-group { display: flex; justify-content: space-between; gap: 1.5rem; margin: 0; padding: 2rem; }
.setting-box .form-group:nth-child(2n) { background: rgba(0, 0, 0, .1); }
.setting-box .form-group > div:first-child { max-width: 60%; }
.setting-box .form-group > div:last-child { text-align: right; }
.setting-box .form-label { margin-bottom: .35rem; color: #fff; font-weight: 500; }
.setting-box .form-label.km-warn { color: var(--km-primary); }
.setting-box .small { color: var(--km-dim); font-size: .9rem; }
.setting-box .small a { color: var(--km-green); }
.setting-box .km-num { display: inline-block; width: 6rem; }
.kai-member .form-check-inline { display: inline-flex; align-items: center; margin: 0 0 .3rem 1rem; padding: 0; }
.kai-member .form-check-input {
	position: static;
	flex-shrink: 0;
	width: 1.3em;
	height: 1.3em;
	margin: 0 .5rem 0 0;
	border: 0;
	background: var(--km-bg-3) no-repeat 50% / contain;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.kai-member .form-check-input[type="checkbox"] { border-radius: .25em; }
.kai-member .form-check-input[type="radio"] { border-radius: 50%; }
.kai-member .form-check-input:checked { background-color: var(--km-green); }
.kai-member .form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }
.kai-member .form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.kai-member .form-check-input:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(228, 95, 58, .25); }
.kai-member .form-check-inline label { display: inline; width: auto; min-width: 0; margin: 0; padding: 0; color: #fff; white-space: nowrap; cursor: pointer; }
.kai-member .form-check-inline { width: auto; min-width: 0; flex: 0 0 auto; }
.kai-member .form-check-inline label::before,
.kai-member .form-check-inline label::after { display: none; }

/* lists: folder tabs, filter bar, wide cards */
#user-folder { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; margin: -4rem 0 .2rem; padding-bottom: .3rem; }
#user-folder > div { padding: 2rem; }
#user-folder a { color: #fff; font-size: 1.1rem; line-height: 1.5rem; white-space: nowrap; }
#user-folder a:hover { color: var(--km-primary); text-decoration: none; }
#user-folder a.active { color: var(--km-primary); }
.km-filters { margin-bottom: .5rem; }
.km-listbar { color: #fff; }
.km-listbar .btn { border: 0; background: none; color: #fff; box-shadow: none; }
.km-listbar .btn:hover { color: var(--km-primary); }
.km-listbar .btn:disabled { opacity: .4; }
.km-info { padding: 1rem; border: 0; border-radius: .5rem; background: #cff4fc; color: #055160; font-weight: 300; }

.aitem-wrapper.wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 1rem; }
.aitem-wrapper.wide .aitem { width: auto; float: none; padding: 0; }
.aitem-wrapper.wide .aitem .inner {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: auto;
	padding: 0;
	border: 1px solid var(--km-bg-2);
	border-radius: 1.2rem;
	background: var(--km-card);
	transition: background .2s;
}
.aitem-wrapper.wide .aitem:hover .inner { background: var(--km-bg-3); }
.aitem-wrapper.wide .aitem:hover .poster { transform: none; }
.aitem-wrapper.wide .aitem .poster { flex: 0 0 8rem; width: 8rem; border-radius: 1.2rem; overflow: hidden; }
.aitem-wrapper.wide .aitem .poster > div { padding-bottom: 143.5%; border-radius: 1.2rem; }
.aitem-wrapper.wide .aitem .detail { flex-grow: 1; min-width: 0; padding: .7rem 1.4rem; }
.aitem-wrapper.wide .aitem .detail .km-label { color: #fff; }
.aitem-wrapper.wide .aitem .detail .title {
	display: -webkit-box;
	max-height: 2.6rem;
	margin-bottom: .9rem;
	overflow: hidden;
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3rem;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.aitem-wrapper.wide .aitem .detail .title:hover { color: #ccc; text-decoration: none; }
.aitem-wrapper.wide .aitem .detail .info { gap: 1rem; }
.aitem-wrapper.wide .aitem .inner > .ctrl { position: absolute; top: 1rem; right: 1.2rem; z-index: 5; }
.aitem-wrapper.wide .aitem .inner > .ctrl .btn { padding: 0; border: 0; background: none; color: #fff; opacity: .3; transition: opacity .2s; }
.aitem-wrapper.wide .aitem .inner > .ctrl .btn:hover { opacity: 1; }
.km-ago { display: block; margin-top: .55rem; color: rgba(255, 255, 255, .4); font-size: .75rem; }
.km-progress { height: 3px; margin-top: .6rem; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.km-progress > div { height: 100%; background: var(--km-primary); }
.folder-select { display: inline-block; margin-bottom: .6rem; }
.folder-select > .km-dd-toggle { padding: 0 .6rem; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .05); color: #fff; font-size: 1rem; line-height: 1.8; }
.folder-select > .km-dd-toggle:hover,
.folder-select.open > .km-dd-toggle { background: var(--km-primary); }
.folder-select > .km-menu { left: 0; right: auto; min-width: 160px; margin-top: .4rem; padding: .4rem; border-radius: .7rem; }
.km-empty { padding: 4rem 1rem; color: var(--km-dim); text-align: center; }
.km-empty i { display: block; margin-bottom: 1rem; font-size: 2.4rem; opacity: .35; }
.km-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 2rem; }
.km-pager a { min-width: 2.4rem; padding: .4rem .6rem; border-radius: .5rem; background: var(--km-bg-2); color: #fff; text-align: center; }
.km-pager a:hover { background: var(--km-bg-3); text-decoration: none; }
.km-pager a.active { background: var(--km-primary); }

/* import / export */
.km-ie { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.km-ie-box { padding: 2rem 1.5rem; border-radius: 1rem; background: rgba(255, 255, 255, .03); text-align: center; }
.km-ie-box > i { margin-bottom: .8rem; font-size: 2.4rem; opacity: .35; }
.km-ie-box h6 { color: #fff; font-size: 1.1rem; font-weight: 500; }
.km-ie-box p { color: var(--km-dim); font-size: .95rem; }

/* avatar modal (px values = the original's 14px-root rem sizes) */
#km-avatar-modal .modal-dialog { max-width: 560px; }
#km-avatar-modal .modal-content { border-radius: 16.8px; text-align: left; }
#km-avatar-modal .modal-content.normal .modal-body { padding: 42px; }
#km-avatar-modal .modal-body h5 { margin: 0 0 5.6px; font-size: 21px; line-height: 25.2px; }
#km-avatar-modal .km-close,
#km-avatar-modal .modal-content.normal .km-close { top: 35px; right: 35px; width: 28px; height: 28px; border-radius: 16.8px; font-size: 14px; opacity: .5; transform: none; }
#km-avatar-modal .km-close:hover { opacity: 1; }
#km-avatar-modal .mt-4 { margin-top: 21px !important; }
.ava-collection { display: flex; flex-wrap: wrap; }
.ava-collection .btn { margin: 0 7px 7px 0; padding: 2.8px 7px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .05); color: #fff; font-size: 14px; font-weight: 300; line-height: 21px; box-shadow: none; }
.ava-collection .btn:hover { background: rgba(255, 255, 255, .1); }
.ava-collection .btn.active { background: var(--km-primary); }
.ava-select { max-height: 300px; margin: 14px 0; overflow: auto; }
.ava-select .ava-btn { margin: 0 7px 14px 0; padding: 0; border: 3px solid transparent; border-radius: 50%; background: transparent; opacity: .7; transition: all .3s; }
.ava-select .ava-btn img { display: block; width: 52px; height: 52px; border-radius: 50%; }
.ava-select .ava-btn:hover,
.ava-select .ava-btn.selected { opacity: 1; }
.ava-select .ava-btn.selected { border-color: var(--km-primary); }
#km-avatar-modal #ava-save-btn { margin-top: 14px !important; padding: 7px 21px; border-width: 0; border-radius: 7px; font-size: 14px; font-weight: 300; line-height: 21px; }
#km-avatar-modal #ava-save-btn:disabled { opacity: .65; color: #000; cursor: not-allowed; }

/* public profile */
.userprofile { position: relative; z-index: 0; display: flex; align-items: center; width: 100%; margin-bottom: 2rem; padding: 1rem; border-radius: 1.2rem; overflow: hidden; }
.userprofile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #2aa453 35%, rgba(48, 184, 93, 0) 70%); }
.userprofile .userprofile-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 30%; z-index: -1; background: center 25% / cover; }
.userprofile .userprofile-bg.no-backdrop { left: 0; background: #2aa453; }
.userprofile > img { flex: 0 0 auto; width: 5rem; height: 5rem; margin-right: .8rem; border-radius: 50%; object-fit: cover; outline: 2px solid rgba(17, 22, 27, .1); }
.userprofile .profille-info { min-width: 0; padding-right: 5rem; }
.userprofile .username { color: #fff; font-size: 1.6rem; font-weight: 500; }
.userprofile .status,
.userprofile .time { color: rgba(255, 255, 255, .7); }
.userprofile .status a { color: #fff; font-weight: 400; }
.userprofile .time { font-size: .9rem; }
.userprofile .time a { color: #fff; }
.profile-col { display: flex; gap: 2rem; align-items: flex-start; }
.profile-col .scontent { flex: 1 1 auto; min-width: 0; }
.profile-col .sidebar { flex: 0 0 400px; width: 400px; max-width: 100%; }
.profile-col .shead { display: flex; align-items: center; justify-content: space-between; }
.km-private { font-size: .78rem; opacity: .5; }
.km-activities { margin: 0; padding: 0; list-style: none; }
.km-activities li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; padding: .8rem 1rem; border-radius: .6rem; color: rgba(255, 255, 255, .7); }
.km-activities li:nth-child(odd) { background: rgba(0, 0, 0, .12); }
.km-activities li i { color: var(--km-primary); }
.km-activities li a { color: #fff; }
.km-activities li span { margin-left: auto; color: rgba(255, 255, 255, .4); font-size: .8rem; }
.profilepage .aitem-col .aitem {
	position: relative;
	display: flex;
	align-items: center;
	padding: 1.5rem;
	border-radius: .6rem;
	background: no-repeat 100% / 40%;
	overflow: hidden;
}
.profilepage .aitem-col .aitem + .aitem { margin-top: .5rem; }
.profilepage .aitem-col .aitem::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, #161a1f 0%, #161a1f 65%, rgba(22, 26, 31, 0) 90%); }
.profilepage .aitem-col .aitem:hover::before { background: linear-gradient(110deg, #181d22 0%, #181d22 65%, rgba(24, 29, 34, 0) 90%); }
.profilepage .aitem-col .aitem .detail { position: relative; z-index: 1; width: 100%; min-width: 0; }
.profilepage .aitem-col .aitem .title { overflow: hidden; color: #fff; font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.profilepage .aitem-col .aitem .info { margin-top: .5rem; gap: 1rem; }
.profilepage .aitem-col .aitem:hover { text-decoration: none; }
.profilepage .blank { padding: 1.5rem 1rem; border-radius: 1.2rem; background: var(--km-bg-1); color: var(--km-dim); text-align: center; }
.profilepage .blank i { font-size: 2rem; }

/* ==========================================================================
   Home: Continue Watching row
   ========================================================================== */
#ts-continue-watching.km-cw .shead { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
@media (max-width: 420px) {
	#ts-continue-watching.km-cw .shead { flex-wrap: wrap; row-gap: .4rem; } /* title + more/arrows would overflow 320px */
}
.shead .stitle.onoff-toggle { display: inline-flex; align-items: flex-start; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.shead .stitle.onoff-toggle::after {
	content: "on";
	margin: -.3rem 0 0 .25rem;
	padding: 0 .3rem;
	border-radius: 4px;
	background: var(--km-primary);
	color: rgba(0, 0, 0, .7);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.4;
	text-transform: lowercase;
	transition: background-color .2s;
}
.shead .stitle.onoff-toggle:hover { opacity: .75; }
.shead .stitle.onoff-toggle.off { opacity: .7; }
.shead .stitle.onoff-toggle.off::after { content: "off"; background: #fff; }
#ts-continue-watching .shead-r { display: flex; align-items: center; gap: 1rem; }
#ts-continue-watching .shead-r[hidden] { display: none; }
#ts-continue-watching .more-btn { color: #fff; font-size: 1.5rem; line-height: 1; }
.km-cw-nav { display: flex; gap: .3rem; }
.km-cw-nav .btn { padding: 0; border: 0; background: none; color: #fff; font-size: 1.5rem; line-height: 1; box-shadow: none; }
.km-cw-nav .btn:disabled { opacity: .3; }
/* Continue Watching is the same .film_list-wrap.aitem-wrapper.regular block as the Latest Updates grid, so the
   card (.aitem), its -11.2px margin and the row gap come straight from kai.css. It is only turned into a single
   horizontal row: every card is exactly one Latest Updates column wide. kai-member.js measures a Latest Updates
   card and publishes its width as --cw-col (re-measured on resize), so the two can never drift apart, whatever
   column rule kai.css / kai-home.css uses at a given viewport. Short rows left-align (fixed-width tracks). */
#ts-cw-pool.km-cw-row {
	--cw-col: 190px;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none !important; /* beats the listing-grid column rules in kai.css */
	grid-template-rows: auto;
	grid-auto-columns: var(--cw-col);
	margin-top: -6px !important;
	padding-top: 6px; /* room for the hover lift */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
#ts-cw-pool.km-cw-row::-webkit-scrollbar { display: none; }
#ts-cw-pool .km-cw-item { scroll-snap-align: start; }
#ts-cw-pool .km-cw-item .ctrl { position: absolute; top: 21px; right: 21px; z-index: 6; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#ts-cw-pool .km-cw-item:hover .ctrl,
#ts-cw-pool .km-cw-item:focus-within .ctrl { opacity: 1; pointer-events: auto; }
#ts-cw-pool .km-cw-item:hover .ctrl { transform: translateY(-5px); }
@media (hover: none) { #ts-cw-pool .km-cw-item .ctrl { opacity: 1; pointer-events: auto; } }
#ts-cw-pool .km-watching-del {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26.6px;
	height: 26.6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--km-primary);
	color: #fff;
	transition: transform .2s;
}
#ts-cw-pool .km-watching-del i { font-size: 14px; }
#ts-cw-pool .km-watching-del:hover { transform: scale(1.1); }
#ts-cw-pool .km-cw-item .info > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ts-cw-pool .km-cw-item .km-progress { height: 2px; margin-top: 14px; border-radius: 7px; background: rgba(228, 95, 58, .1); }
#ts-cw-pool .km-cw-item .km-progress > div { border-radius: 7px; background: var(--km-primary); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1059.9px) {
	.aitem-wrapper.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
	.kai-member { padding-top: 4rem; }
	.profile-col { flex-direction: column; }
	.profile-col .sidebar { flex-basis: auto; width: 100%; }
}
@media (max-width: 1100px) {
	.profile-ctrl .profile-menu a:not(.active) span { display: none; }
	.profile-ctrl .profile-menu a i { font-size: 1.3rem; }
}
@media (max-width: 850px) {
	.profile-ctrl .profile-menu a span { display: none; }
}
@media (max-width: 700px) {
	.aitem-wrapper.wide { grid-template-columns: minmax(0, 1fr); }
	.km-ie { grid-template-columns: 1fr; }
}
@media (max-width: 639.9px) {
	.profile-sbg { padding: 2rem; }
	#user-folder { justify-content: flex-start; margin-top: -3rem; overflow-x: auto; scrollbar-width: none; }
	#user-folder::-webkit-scrollbar { display: none; }
	#user-folder > div { padding: 1rem; }
	#modallogin .modal-body { padding: 8rem 1.8rem 2rem; }
	.km-close { top: 2rem; right: 2rem; }
	.userprofile .profille-info { padding-right: 0; }
}
@media (max-width: 575.98px) {
	.profile-ctrl { margin-bottom: 3.5rem; }
	.setting-box .form-group { flex-direction: column; gap: 0; padding: 1.5rem; }
	.setting-box .form-group > div:first-child { max-width: none; }
	.setting-box .form-group > div:last-child { margin-top: 1rem; text-align: left; }
	.kai-member .form-check-inline { margin: 0 1rem .4rem 0; }
	#user-slot .nav-btn { margin-right: 1.25rem; }
	.km-noti-menu { position: fixed !important; top: 64px !important; right: 12px !important; left: 12px !important; width: auto; max-width: none; }
	.km-user-menu { position: fixed !important; top: 64px !important; right: 12px !important; }
}
@media (max-width: 470px) {
	.profile-ctrl { padding: 0 .5rem; }
	.profile-ctrl > a { margin-right: .3rem; padding-right: .4rem; border: 0; }
	.profile-ctrl > a .km-ctrl-name { display: none; }
	.profile-ctrl .profile-menu a { padding: .3rem .55rem; }
	.aitem-wrapper.wide .aitem .poster { flex-basis: 6.5rem; width: 6.5rem; }
	.aitem-wrapper.wide .aitem .detail { padding: .7rem 1rem; }
	.userprofile .userprofile-bg { display: none; }
	.userprofile::after { background: rgba(255, 255, 255, .05); }
}