@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

/*
 * Every rule below is scoped through #lv-app (ID-level specificity) and the
 * core visual properties carry !important. Theme frameworks (Elementor/Jeg
 * kits especially) ship global `button`, `select`, `input` styling that
 * otherwise wins the cascade against a plain class selector — this is what
 * was causing the plugin's buttons/dropdowns to inherit the theme's indigo
 * button skin instead of this plugin's own look.
 */

#lv-app {
	--lv-bg: #10151b;
	--lv-bg-raised: #171e26;
	--lv-line: #262f3a;
	--lv-paper: #f6f3ea;
	--lv-text: #e7ecef;
	--lv-text-dim: #8b96a3;
	--lv-accent: #34d399;
	--lv-accent-dim: #1f7a5c;
	--lv-warn: #d99a4e;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	background: var(--lv-bg) !important;
	color: var(--lv-text) !important;
	border-radius: 14px !important;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
	max-width: 100%;
	line-height: normal;
}

#lv-app *, #lv-app *::before, #lv-app *::after {
	box-sizing: border-box !important;
	text-transform: none !important;
	letter-spacing: normal;
}

#lv-app .lv-member-bar {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 14px 24px !important;
	background: linear-gradient(90deg, rgba(52, 211, 153, 0.07), rgba(52, 211, 153, 0)) !important;
	border-bottom: 1px solid var(--lv-line) !important;
}

#lv-app .lv-member-avatar-wrap {
	position: relative;
	flex-shrink: 0;
	line-height: 0;
}

#lv-app .lv-member-avatar {
	border-radius: 50% !important;
	display: block !important;
	border: 2px solid var(--lv-line) !important;
}

#lv-app .lv-member-dot {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--lv-text-dim);
	border: 2px solid var(--lv-bg-raised);
}

#lv-app .lv-member-dot-online {
	background: var(--lv-accent);
	box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25);
}

#lv-app .lv-member-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#lv-app .lv-member-name {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--lv-text) !important;
}

#lv-app .lv-member-meta {
	font-size: 12.5px !important;
	color: var(--lv-text-dim) !important;
	font-weight: 400 !important;
}

#lv-app .lv-member-sep {
	margin: 0 6px;
	opacity: 0.6;
}

#lv-app .lv-toolbar {
	background: var(--lv-bg-raised) !important;
	padding: 22px 24px !important;
	display: flex !important;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--lv-line) !important;
	margin: 0 !important;
}

#lv-app .lv-picker {
	display: flex !important;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

#lv-app .lv-select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	padding: 11px 32px 11px 16px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	line-height: normal !important;
	border-radius: 8px !important;
	border: 1px solid var(--lv-line) !important;
	background-color: var(--lv-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b96a3'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%238b96a3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 11px 11px !important;
	color: var(--lv-text) !important;
	box-shadow: none !important;
	height: auto !important;
	width: auto;
	max-width: 100%;
}

.lv-app-error {
	padding: 16px 20px;
	border-radius: 8px;
	background: rgba(217, 154, 78, 0.12);
	color: #a8632a;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	border: 1px solid rgba(217, 154, 78, 0.4);
}

#lv-app .lv-crumb {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 11px 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	border: 1px solid var(--lv-accent-dim) !important;
	background: rgba(52, 211, 153, 0.08) !important;
	color: var(--lv-accent) !important;
}

#lv-app .lv-crumb::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lv-accent);
	flex-shrink: 0;
}

#lv-app .lv-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 11px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	line-height: normal !important;
	border-radius: 8px !important;
	border: 1px solid var(--lv-line) !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--lv-text) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
	text-decoration: none !important;
	height: auto !important;
	width: auto !important;
}

#lv-app .lv-btn:hover:not(:disabled) { border-color: var(--lv-accent-dim) !important; background: rgba(52,211,153,0.08) !important; color: var(--lv-text) !important; }
#lv-app .lv-btn:disabled { opacity: 0.4 !important; cursor: not-allowed; }
#lv-app .lv-btn.active { background: var(--lv-accent) !important; color: #06231a !important; border-color: var(--lv-accent) !important; }

#lv-app .lv-btn-primary {
	background: var(--lv-accent) !important;
	color: #06231a !important;
	border-color: var(--lv-accent) !important;
}
#lv-app .lv-btn-primary:hover:not(:disabled) { background: #3fe3a8 !important; color: #06231a !important; }
#lv-app .lv-btn-primary:disabled { background: var(--lv-line) !important; color: var(--lv-text-dim) !important; border-color: var(--lv-line) !important; }

#lv-app .lv-icon-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border-radius: 8px !important;
	border: 1px solid var(--lv-line) !important;
	background: var(--lv-bg) !important;
	background-image: none !important;
	color: var(--lv-text) !important;
	box-shadow: none !important;
	cursor: pointer;
	font-size: 16px !important;
	line-height: 1 !important;
}
#lv-app .lv-icon-btn:hover:not(:disabled) { border-color: var(--lv-accent-dim) !important; }
#lv-app .lv-icon-btn:disabled { opacity: 0.35 !important; cursor: not-allowed; }

#lv-app .lv-viewer-header {
	background: var(--lv-bg-raised) !important;
	padding: 14px 20px !important;
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	border-bottom: 1px solid var(--lv-line) !important;
	margin: 0 !important;
}

#lv-app .lv-nav-group, #lv-app .lv-tool-group { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; }

#lv-app .lv-page-info { font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important; color: var(--lv-text-dim) !important; }

#lv-app .lv-page-jump {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 52px !important;
	padding: 6px 4px !important;
	text-align: center;
	background: var(--lv-bg) !important;
	border: 1px solid var(--lv-line) !important;
	border-radius: 6px !important;
	color: var(--lv-text) !important;
	font-family: inherit !important;
	box-shadow: none !important;
	height: auto !important;
}

#lv-app .lv-save-status { font-size: 12px !important; color: var(--lv-text-dim) !important; min-width: 90px; }
#lv-app .lv-save-status.lv-saved::before { content: '●'; color: var(--lv-accent); margin-right: 5px; }
#lv-app .lv-save-status.lv-saving::before { content: '●'; color: var(--lv-warn); margin-right: 5px; }

#lv-app .lv-canvas-wrap {
	background: var(--lv-bg) !important;
	padding: 24px !important;
	min-height: 500px;
	display: flex !important;
	justify-content: center;
}

#lv-app .lv-loading {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px !important;
	color: var(--lv-text-dim) !important;
	width: 100%;
}

/* Higher-specificity !important so this actually wins over the base
   `display: flex !important` above — a plain inline style="display:none"
   from JS was losing to that rule, which is why the loading placeholder
   used to stay on screen next to an already-rendered page. */
#lv-app .lv-loading.lv-is-hidden {
	display: none !important;
}

#lv-app .lv-page-stage.lv-is-hidden {
	display: none !important;
}

#lv-app .lv-ecg { width: 220px; height: 46px; margin-bottom: 18px; }
#lv-app .lv-ecg svg { width: 100%; height: 100%; }
#lv-app .lv-ecg polyline {
	fill: none;
	stroke: var(--lv-accent);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 440;
	stroke-dashoffset: 440;
	animation: lv-draw 1.4s ease-in-out infinite;
}
@keyframes lv-draw {
	0% { stroke-dashoffset: 440; }
	60% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -440; }
}

#lv-app .lv-page-stage { position: relative; display: inline-block; }

#lv-app #lv-canvas {
	display: block !important;
	background: var(--lv-paper) !important;
	max-width: 100%;
	border-radius: 4px !important;
	box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
	margin: 0 !important;
}

#lv-app .lv-annotation-layer {
	position: absolute;
	inset: 0;
	cursor: default;
}

#lv-app .lv-annotation-layer.lv-annotate-mode { cursor: text; }

#lv-app .lv-note {
	position: absolute;
	min-width: 60px;
	min-height: 24px;
	padding: 4px 6px !important;
	background: rgba(16,21,27,0.06) !important;
	border: 1px dashed var(--lv-accent-dim) !important;
	border-radius: 4px !important;
	color: #14301f !important;
	font-family: 'Inter', sans-serif !important;
	font-size: inherit;
	outline: none;
	white-space: pre-wrap;
	box-shadow: none !important;
}

#lv-app .lv-note:focus { border-style: solid !important; background: rgba(52,211,153,0.12) !important; }

#lv-app .lv-note-delete {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: #c0392b !important;
	color: #fff !important;
	font-size: 11px !important;
	line-height: 18px !important;
	text-align: center;
	cursor: pointer;
	display: none;
	padding: 0 !important;
}
#lv-app .lv-note:hover .lv-note-delete, #lv-app .lv-note:focus + .lv-note-delete { display: block; }

#lv-app .lv-warning {
	background: linear-gradient(135deg, #b8562f, #8f3a1f) !important;
	color: #fdf2ec !important;
	padding: 16px 20px !important;
	text-align: center;
	font-size: 13px !important;
	letter-spacing: 0.2px;
	margin: 0 !important;
}

#lv-app .lv-locked {
	background: var(--lv-bg-raised, #171e26) !important;
	color: #e7ecef !important;
	padding: 30px !important;
	border-radius: 10px !important;
	text-align: center;
}
#lv-app .lv-locked a { color: #34d399 !important; }

/* Fullscreen mode — sizing itself is handled in JS (renderPage recalculates
   and re-renders the page to fill the available space at a crisp
   resolution); these rules just center it and remove the rounded corners
   that look wrong edge-to-edge. */
#lv-app:fullscreen { border-radius: 0 !important; }
#lv-app:fullscreen .lv-canvas-wrap {
	min-height: calc(100vh - 170px) !important;
	align-items: flex-start !important;
	overflow-y: auto !important;
	padding-bottom: 24px !important;
}

@media print { #lv-app { display: none !important; } }

@media (max-width: 640px) {
	#lv-app .lv-toolbar, #lv-app .lv-viewer-header { padding: 14px !important; }
	#lv-app .lv-tool-group span.lv-save-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	#lv-app .lv-ecg polyline { animation: none; stroke-dashoffset: 0; }
}