.cwc-widget {
	--cwc-bg: #10151c;
	--cwc-panel: #1a212b;
	--cwc-panel-alt: #222b38;
	--cwc-accent: #2dd4bf;
	--cwc-text: #f2f5f7;
	--cwc-text-muted: #7e8a99;
	--cwc-border: #2a3441;
	--cwc-danger: #ef4444;
	--cwc-ok: #22c55e;
	--cwc-warn: #f59e0b;

	background: var(--cwc-panel);
	color: var(--cwc-text);
	border-radius: 18px;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	max-width: 480px;
	box-sizing: border-box;
}

.cwc-widget * {
	box-sizing: border-box;
}

.cwc-notice {
	color: var(--cwc-text-muted);
}

/* Pairing widget */
.cwc-pairing .cwc-heading {
	margin: 0 0 12px;
	font-size: 20px;
}

.cwc-steps {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--cwc-text-muted);
	font-size: 13px;
}

.cwc-steps li {
	margin-bottom: 6px;
}

.cwc-trust-link {
	color: var(--cwc-accent);
	word-break: break-all;
}

.cwc-pairing-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cwc-pairing-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var(--cwc-text-muted);
}

.cwc-pairing-form input {
	background: var(--cwc-panel-alt);
	border: 1px solid var(--cwc-border);
	color: var(--cwc-text);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 16px;
}

.cwc-pairing-form button {
	background: var(--cwc-accent);
	color: var(--cwc-bg);
	border: none;
	border-radius: 8px;
	padding: 10px 16px;
	font-weight: 600;
	cursor: pointer;
}

.cwc-pairing-status {
	font-size: 13px;
	color: var(--cwc-text-muted);
}

/* Status widget */
.cwc-status-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	gap: 10px;
}

.cwc-program-name {
	font-size: 18px;
	font-weight: 600;
}

.cwc-state-badge {
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--cwc-panel-alt);
	color: var(--cwc-text-muted);
	white-space: nowrap;
}

.cwc-state-running {
	background: rgba(34, 197, 94, 0.15);
	color: var(--cwc-ok);
}

.cwc-state-stopped {
	background: rgba(245, 158, 11, 0.15);
	color: var(--cwc-warn);
}

.cwc-state-estop {
	background: rgba(239, 68, 68, 0.15);
	color: var(--cwc-danger);
}

.cwc-step-line {
	font-size: 13px;
	color: var(--cwc-text-muted);
	margin-bottom: 10px;
}

.cwc-progress-track {
	background: var(--cwc-panel-alt);
	border-radius: 8px;
	height: 16px;
	overflow: hidden;
	margin-bottom: 14px;
}

.cwc-progress-fill {
	background: var(--cwc-accent);
	height: 100%;
	transition: width 0.4s ease;
}

.cwc-error-banner {
	background: rgba(239, 68, 68, 0.15);
	border: 1px solid var(--cwc-danger);
	color: var(--cwc-text);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 14px;
}

.cwc-tanks {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.cwc-tank {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
}

.cwc-tank-label {
	font-size: 11px;
	color: var(--cwc-text-muted);
}

.cwc-tank-track {
	width: 24px;
	height: 90px;
	background: var(--cwc-panel-alt);
	border-radius: 6px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.cwc-tank-fill {
	width: 100%;
	height: 0%;
	border-radius: 6px;
	transition: height 0.4s ease;
}

.cwc-tank-ok {
	background: var(--cwc-accent);
}

.cwc-tank-warn {
	background: var(--cwc-warn);
}

.cwc-tank-danger {
	background: var(--cwc-danger);
}

.cwc-tank-value {
	font-size: 11px;
	color: var(--cwc-text);
}

.cwc-connection-error {
	margin-top: 14px;
	font-size: 12px;
	color: var(--cwc-warn);
}

.cwc-connection-error a {
	color: var(--cwc-accent);
}

/* Shared */
.cwc-heading {
	margin: 0 0 12px;
	font-size: 20px;
}

.cwc-btn {
	border: none;
	border-radius: 8px;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	color: var(--cwc-text);
	background: var(--cwc-panel-alt);
}

.cwc-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

.cwc-btn-ok {
	background: var(--cwc-ok);
	color: var(--cwc-bg);
}

.cwc-btn-warn {
	background: var(--cwc-warn);
	color: var(--cwc-bg);
}

.cwc-btn-neutral {
	background: var(--cwc-panel-alt);
	border: 1px solid var(--cwc-border);
}

.cwc-btn-estop {
	background: var(--cwc-danger);
	color: var(--cwc-text);
	width: 100%;
}

.cwc-icon-btn {
	background: var(--cwc-panel-alt);
	border: 1px solid var(--cwc-border);
	color: var(--cwc-text-muted);
	border-radius: 8px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	line-height: 1;
}

/* Control widget */
.cwc-control-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 12px;
}

.cwc-control-status {
	margin-top: 10px;
	font-size: 13px;
	color: var(--cwc-text-muted);
}

/* Service widget */
.cwc-service-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.cwc-service-header .cwc-btn-estop {
	width: auto;
}

.cwc-valves {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 18px;
}

.cwc-valve {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--cwc-panel-alt);
	border-radius: 10px;
	padding: 10px;
	font-size: 12px;
	color: var(--cwc-text-muted);
}

.cwc-valve input {
	width: 20px;
	height: 20px;
	accent-color: var(--cwc-accent);
}

.cwc-actuators {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cwc-actuator {
	background: var(--cwc-panel-alt);
	border-radius: 10px;
	padding: 12px;
}

.cwc-actuator-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-size: 13px;
}

.cwc-actuator-row input {
	width: 20px;
	height: 20px;
	accent-color: var(--cwc-accent);
}

.cwc-actuator input[type="range"] {
	width: 100%;
	accent-color: var(--cwc-accent);
}

/* Programs widget */
.cwc-programs {
	max-width: 640px;
}

.cwc-programs-columns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.cwc-programs-column {
	flex: 1;
	min-width: 220px;
	background: var(--cwc-panel-alt);
	border-radius: 12px;
	padding: 12px;
}

.cwc-programs-column-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.cwc-programs-column-header h4 {
	margin: 0;
	font-size: 14px;
	color: var(--cwc-text-muted);
}

.cwc-programs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cwc-program-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	background: var(--cwc-panel);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 12px;
}

.cwc-program-name {
	overflow-wrap: anywhere;
}

.cwc-program-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.cwc-programs-empty {
	color: var(--cwc-text-muted);
	font-size: 12px;
	list-style: none;
}

.cwc-programs-status {
	margin-top: 12px;
	font-size: 13px;
	color: var(--cwc-text-muted);
}

/* Blockly program editor widget */
.cwc-blockly-widget {
	max-width: 900px;
}

.cwc-blockly-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.cwc-blockly-name {
	background: var(--cwc-panel-alt);
	border: 1px solid var(--cwc-border);
	color: var(--cwc-text);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	flex: 1 1 160px;
	min-width: 140px;
}

.cwc-blockly-load-select {
	background: var(--cwc-panel-alt);
	border: 1px solid var(--cwc-border);
	color: var(--cwc-text);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	flex: 1 1 160px;
	min-width: 140px;
}

.cwc-blockly-workspace {
	width: 100%;
	position: relative;
	background: var(--cwc-bg);
	border: 1px solid var(--cwc-border);
	border-radius: 12px;
	overflow: hidden;
}

.cwc-blockly-status {
	margin-top: 10px;
	font-size: 13px;
	color: var(--cwc-text-muted);
	min-height: 1.2em;
}

.cwc-blockly-hint {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--cwc-text-muted);
}