.tnd-lw-open-btn {
	width: 100%;
}
.tnd-lw-shortcode-btn {
	background: #14143c;
	color: #fff;
	border: none;
	padding: 14px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.tnd-lw-fallback-btn {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 9990;
	background: #14143c;
	color: #fff;
	border: none;
	padding: 14px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 15px;
	width: auto;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.tnd-lw-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 999999;
	flex-direction: column;
}
.tnd-lw-overlay.tnd-lw-open {
	display: flex;
}
.tnd-lw-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 480px;
	margin: 0 auto;
	width: 100%;
}

.tnd-lw-topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
}
.tnd-lw-back, .tnd-lw-close {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: #1c1c3a;
}
.tnd-lw-close { margin-left: auto; }
.tnd-lw-tabs {
	display: flex;
	gap: 14px;
	font-size: 12px;
	font-weight: 600;
	color: #bbb;
}
.tnd-lw-tab.tnd-lw-tab-active { color: #14143c; }
.tnd-lw-tab.tnd-lw-tab-done { color: #0a8f6f; }
.tnd-lw-tab.tnd-lw-tab-skip { opacity: 0.35; }

.tnd-lw-body {
	flex: 1;
	overflow-y: auto;
	padding: 18px 16px 90px;
}
.tnd-lw-step { display: none; }
.tnd-lw-step.tnd-lw-step-active { display: block; }
.tnd-lw-step h3 {
	font-size: 15px;
	color: #1c1c3a;
	margin-bottom: 14px;
}

/* Step 1 — power types */
.tnd-lw-pt-card {
	display: flex;
	flex-direction: column;
	gap: 3px;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 10px;
	cursor: pointer;
	position: relative;
}
.tnd-lw-pt-card:hover { border-color: #14143c; }
.tnd-lw-pt-card strong { font-size: 14px; color: #1c1c3a; }
.tnd-lw-pt-card span { font-size: 12px; color: #888; }
.tnd-lw-pt-badge {
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: 10px;
	font-weight: 700;
	background: #eef0ff;
	color: #3a3ac9;
	padding: 2px 8px;
	border-radius: 10px;
}

/* Step 2 — lenses */
.tnd-lw-lens-card {
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 12px;
	cursor: pointer;
}
.tnd-lw-lens-card:hover { border-color: #14143c; }
.tnd-lw-lens-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}
.tnd-lw-lens-badge {
	font-size: 10px;
	font-weight: 700;
	background: #14143c;
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
}
.tnd-lw-lens-name { font-size: 14px; font-weight: 700; color: #1c1c3a; margin: 4px 0; }
.tnd-lw-lens-features { font-size: 12px; color: #666; margin: 0 0 6px 16px; }
.tnd-lw-lens-features li { margin-bottom: 2px; }
.tnd-lw-lens-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #888;
}
.tnd-lw-lens-price { font-size: 15px; font-weight: 700; color: #1c1c3a; }

/* Step 3 — power */
.tnd-lw-power-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
}
.tnd-lw-power-card {
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 14px;
	cursor: pointer;
}
.tnd-lw-power-card:hover, .tnd-lw-power-card.tnd-lw-selected { border-color: #14143c; background: #fafaff; }
.tnd-lw-power-card strong { display: block; font-size: 14px; color: #1c1c3a; }
.tnd-lw-power-card span { font-size: 12px; color: #888; }

.tnd-lw-eye-row {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}
.tnd-lw-eye-row > div { flex: 1; }
.tnd-lw-eye-row label { display: block; font-size: 11px; color: #888; margin-bottom: 4px; }
.tnd-lw-eye-row input {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 13px;
}
.tnd-lw-confirm-btn {
	width: 100%;
	background: #14143c;
	color: #fff;
	border: none;
	padding: 12px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	margin-top: 6px;
}
.tnd-lw-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#tnd-lw-file-input {
	width: 100%;
	padding: 10px;
	border: 1px dashed #ccc;
	border-radius: 8px;
	margin-bottom: 8px;
}
.tnd-lw-upload-status { font-size: 12px; color: #0a8f6f; min-height: 16px; }

/* Footer */
.tnd-lw-footerbar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: #fff;
	border-top: 1px solid #eee;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 480px;
	margin: 0 auto;
}
.tnd-lw-total-label { font-size: 11px; color: #888; }
.tnd-lw-total-amount { font-size: 16px; font-weight: 700; color: #1c1c3a; margin-right: auto; }
.tnd-lw-finish-btn {
	background: #14143c;
	color: #fff;
	border: none;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer;
}