.km { color: #1f2937; }
.km-head, .km-stage, .km-panel, .km-gate {
	background: #fff;
	border: 1px solid #e8edf2;
	border-radius: 18px;
	box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
}
.km-head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; padding: 16px 18px; margin-bottom: 14px; }
.km-who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.km-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #eef2f6; }
.km-avatar img { width: 100%; height: 100%; object-fit: cover; }
.km-name { font-weight: 700; font-size: 18px; color: #111827; text-decoration: none; }
.km-room-title { color: #6b7280; font-size: 13px; margin-top: 2px; }
.km-sub { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.km-lvl, .km-clan, .km-chip {
	display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 999px;
	background: #f3f4f6; color: #374151; font-size: 13px; text-decoration: none; border: 0;
}
.km-lvl { background: #dcfce7; color: #166534; font-weight: 700; }
.km-clan { background: #ede9fe; color: #5b21b6; font-weight: 700; }
.km-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.km-chip { cursor: pointer; }
.km-chip.is-on { background: #fee2e2; color: #b91c1c; }
.km-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px;
	border: 0; border-radius: 10px; background: #22c55e; color: #fff; font-weight: 700; text-decoration: none; cursor: pointer;
}
.km-btn:hover { background: #16a34a; color: #fff; }
.km-btn:disabled { opacity: .55; cursor: default; }
.km-btn--ghost { background: #fff; color: #166534; border: 1px solid #86efac; }
.km-btn--ghost:hover { background: #f0fdf4; }
.km-btn--sm { min-height: 32px; width: 100%; margin-top: 8px; }
.km-vis { height: 36px; border-radius: 10px; border: 1px solid #e5e7eb; padding: 0 8px; background: #fff; }
.km-guests { display: flex; align-items: center; gap: 6px; }
.km-guests__label, .km-muted, .km-rank { color: #6b7280; font-size: 13px; }
.km-guest { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #e5e7eb; }
.km-guest img { width: 100%; height: 100%; object-fit: cover; }
.km-stage { position: relative; padding: 10px; margin-bottom: 14px; }
.km-view { overflow: auto; max-height: 72vh; border-radius: 14px; background: #ece7df; touch-action: pan-x pan-y; }
.km-world {
	position: relative; width: calc(100% * var(--zoom, 1)); aspect-ratio: 2172 / 724;
	background: #d8d2c8 center / cover no-repeat; min-width: 100%; overflow: hidden;
}
.km-item { position: absolute; touch-action: none; }
.km-item.is-on { outline: 2px solid #22c55e; outline-offset: 2px; }
.km-item.is-bad { outline: 2px solid #ef4444; }
.km-media { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.km-label {
	position: absolute; left: 8%; right: 8%; bottom: 6%; text-align: center; color: #fff;
	font-weight: 800; font-size: clamp(10px, 1.1vw, 16px); text-shadow: 0 1px 2px rgba(0,0,0,.65); pointer-events: none;
}
.km-tools { position: absolute; left: 0; top: -34px; display: flex; gap: 4px; z-index: 5; }
.km-tools__btn {
	border: 0; border-radius: 8px; background: #111827; color: #fff; font-size: 12px; min-height: 26px; padding: 0 8px; cursor: pointer;
}
.km-tools__btn--bad { background: #b91c1c; }
.km-handle { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #22c55e; cursor: nwse-resize; z-index: 6; }
.km-zoom { position: absolute; right: 18px; top: 18px; z-index: 3; display: flex; gap: 6px; align-items: center; background: rgba(255,255,255,.92); border-radius: 10px; padding: 4px; }
.km-zoom__btn { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #f3f4f6; cursor: pointer; }
.km-hint, .km-note { margin: 8px 4px 0; color: #6b7280; font-size: 13px; }
.km-panel { padding: 14px; }
.km-tabs, .km-cats, .km-filters, .km-modal__row { display: flex; flex-wrap: wrap; gap: 8px; }
.km-tabs { margin-bottom: 12px; }
.km-tab, .km-cat {
	border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; min-height: 34px; padding: 0 12px; cursor: pointer; color: #374151;
}
.km-tab.is-on, .km-cat.is-on { background: #22c55e; border-color: #22c55e; color: #fff; }
.km-filters { margin: 12px 0; align-items: center; }
.km-search { flex: 1 1 180px; height: 36px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0 10px; }
.km-check { display: flex; align-items: center; gap: 6px; color: #374151; font-size: 14px; }
.km-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.km-card { border: 1px solid #eef2f6; border-radius: 14px; padding: 10px; background: #fff; }
.km-card__pic { height: 120px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 10px; overflow: hidden; }
.km-card__pic img, .km-card__pic video { max-width: 100%; max-height: 100%; object-fit: contain; }
.km-card__name { margin-top: 8px; font-weight: 700; font-size: 14px; }
.km-card__sub { color: #6b7280; font-size: 12px; min-height: 16px; }
.km-empty { grid-column: 1 / -1; color: #6b7280; }
.km-gate { padding: 48px 20px; text-align: center; }
.km-gate__title { margin: 0 0 8px; }
.km-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; z-index: 80; padding: 16px; }
.km-modal__card { background: #fff; border-radius: 18px; padding: 22px; max-width: 460px; width: 100%; }
.km-modal__card h2 { margin: 0 0 8px; }
.km-modal__row { margin-top: 16px; }
.km-pop {
	position: fixed; right: 16px; bottom: 16px; z-index: 70; width: min(320px, calc(100vw - 24px));
	background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.km-pop__img { width: 100%; max-height: 180px; object-fit: contain; }
.km-pop__title { font-weight: 800; margin: 8px 0 4px; }
.km-pop__msg { margin-top: 6px; }
.km-pop__x { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.km-toast {
	position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(12px);
	background: #111827; color: #fff; border-radius: 12px; padding: 10px 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 90;
}
.km-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 720px) {
	.km-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.km-tools { top: auto; bottom: 0; }
}