html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #1e1e1e;
	font-family: Consolas, 'Courier New', monospace;
	color: #d4d4d4;
}

* {
	box-sizing: border-box;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
	background: #3a3a3a;
	border-radius: 6px;
	border: 2px solid #1e1e1e;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(121, 121, 121, 0.7);
}

::-webkit-scrollbar-thumb:hover {
	background: #505050;
}

#app {
	display: flex;
	width: 100%;
	height: 100%;
}

#left {
	position: relative;
	flex: 1;
	min-width: 0;
	background: #111;
}

#cy {
	width: 100%;
	height: 100%;
}

#toolbar {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 20;
	display: flex;
	gap: 8px;
	align-items: center;
	background: rgba(30, 30, 30, 0.96);
	border: 1px solid #2d2d30;
	padding: 8px 10px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
}

#search {
	width: 220px;
	padding: 7px 10px;
	background: #252526;
	color: #d4d4d4;
	border: 1px solid #3c3c3c;
	outline: none;
	border-radius: 8px;
	font-size: 12px;
}

#search:focus {
	border-color: #007acc;
	box-shadow: 0 0 0 1px #007acc inset;
}

button {
	padding: 7px 11px;
	background: #2d2d30;
	color: #d4d4d4;
	border: 1px solid #3c3c3c;
	border-radius: 8px;
	cursor: pointer;
	font-size: 12px;
	transition: 0.15s ease;
}

button:hover {
	background: #37373d;
	border-color: #4b4b52;
}

button:active {
	transform: translateY(1px);
}

.btn-primary {
	background: #0e639c;
	border-color: #1177bb;
	color: #fff;
}

.btn-primary:hover {
	background: #1177bb;
}

.btn-subtle {
	background: #252526;
}

label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	white-space: nowrap;
	color: #cccccc;
}

#side {
	width: 390px;
	min-width: 390px;
	max-width: 390px;
	border-left: 1px solid #2d2d30;
	background: #181818;
	display: flex;
	flex-direction: column;
}

#sideHeader {
	padding: 14px 16px;
	border-bottom: 1px solid #2d2d30;
	font-size: 13px;
	font-weight: 700;
	background: #202020;
	color: #ffffff;
	letter-spacing: 0.2px;
}

#sideBody {
	padding: 14px;
	overflow: auto;
	font-size: 12px;
	line-height: 1.42;

	scrollbar-width: thin;
	scrollbar-color: #3a3a3a #1e1e1e;
}

.panel-card {
	background: #1f1f1f;
	border: 1px solid #2d2d30;
	border-radius: 12px;
	padding: 12px;
	margin-bottom: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.panel-card .actions {
	position: sticky;
	top: 0;
	background: #1f1f1f;
	padding-bottom: 6px;
	z-index: 5;
}

.panel-title {
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 10px;
}

.meta-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 10px;
	align-items: center;
}

.meta-key {
	color: #9da1a6;
}

.meta-value {
	text-align: right;
}

.badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 11px;
	background: #2d2d30;
	border: 1px solid #3a3a3d;
	color: #dcdcdc;
}

.badge-yes {
	background: rgba(78, 201, 176, 0.15);
	border: 1px solid rgba(78, 201, 176, 0.4);
	color: #4ec9b0;
	box-shadow: 0 0 10px rgba(78, 201, 176, 0.2);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mono-box {
	font-family: Consolas, monospace;
	background: #1e1e1e;
	border: 1px solid #2d2d30;
}

.export-list {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.export-item {
	padding: 8px 10px;
	background: #202124;
	border: 1px solid #2f3136;
	border-radius: 10px;
	transition: 0.12s ease;
}

.export-item:hover {
	background: #26282c;
	border-color: #3a3d42;
}

.export-item .sym {
	color: #4fc1ff;
	font-weight: 700;
	font-size: 12px;
	margin-bottom: 4px;
	display: block;

	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.export-item.clean {
	border-left: 3px solid #4caf50;
}

.export-item.raw {
	border-left: 3px solid #ff5252;
	opacity: 0.85;
}

/* кликабельные элементы */
.copyable {
	cursor: pointer;
	border-radius: 6px;
	padding: 1px 3px;
	transition: 0.12s ease;
}

/* hover */
.copyable:hover {
	background: rgba(79, 193, 255, 0.18);
}

/* активный клик */
.copyable:active {
	transform: scale(0.97);
}

/* эффект копирования */
.copyable.copied {
	background: rgba(78, 201, 176, 0.25);
	box-shadow: 0 0 8px rgba(78, 201, 176, 0.6);
}

/* когда навели на кнопку — подсветить цель */
.export-row:hover .value,
.export-row:hover .undec-text {
	background: rgba(79, 193, 255, 0.12);
}

.export-item:hover .sym {
	background: rgba(79, 193, 255, 0.12);
}

.export-row {
	margin: 2px 0;
	color: #c8c8c8;
	font-size: 11px;
	word-break: break-word;
}

.export-row .k {
	color: #9da1a6;
	display: inline-block;
	min-width: 82px;
}

.mono-box {
	background: #111315;
	border: 1px solid #2d2d30;
	border-radius: 10px;
	padding: 10px;
	font-size: 11px;
	line-height: 1.38;
	color: #d4d4d4;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 240px;
	overflow: auto;
}

.status-line {
	color: #9da1a6;
	font-size: 11px;
}

.dimmed {
	opacity: 0.15;
}

.meta-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 8px;
	align-items: center;
}

.meta-key {
	color: #9da1a6;
	white-space: nowrap;
}

.meta-value {
	text-align: right;
	white-space: nowrap;
}

#langSwitch {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	padding: 7px 28px 7px 10px;

	background: #252526;
	color: #d4d4d4;

	border: 1px solid #3c3c3c;
	border-radius: 8px;

	font-size: 12px;
	cursor: pointer;
	outline: none;

	transition: 0.15s ease;

	/* стрелка */
	background-image: url("data:image/svg+xml;utf8,<svg fill='%23cccccc' height='10' viewBox='0 0 20 20' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 10px;
}

#langSwitch:hover {
	background: #2a2a2d;
	border-color: #4b4b52;
}

#langSwitch:focus {
	border-color: #007acc;
	box-shadow: 0 0 0 1px #007acc inset;
}

#langSwitch:active {
	transform: translateY(1px);
}

#langSwitch::-ms-expand {
	display: none;
}

#langSwitch option {
	background: #1e1e1e;
	color: #d4d4d4;
}

/* контейнер фильтров */
.exports-filter {
	display: inline-flex;
	background: #1a1a1a;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	padding: 3px;
	gap: 2px;
}

/* кнопки */
.exports-filter button {
	background: transparent;
	border: none;
	color: #aaa;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 7px;
	cursor: pointer;
	transition: all 0.15s ease;
}

/* hover */
.exports-filter button:hover {
	color: #fff;
	background: #2a2a2a;
}

/* ACTIVE */
.exports-filter button.active {
	background: #3a3a3a;
	color: #fff;
	box-shadow: 0 0 0 1px #4a4a4a inset;
}

/* фокус (для UX) */
.exports-filter button:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(100, 150, 255, 0.4);
}