.sct-app {
	max-width: 700px;
	margin: 20px auto;
	padding: 25px;
	background: #111;
	color: #fff;
	border-radius: 15px;
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}
.sct-app * { box-sizing: border-box; }
.sct-app h2 { text-align:center; margin:0 0 20px; }
.sct-label { display:block; margin-bottom:6px; font-weight:bold; }
.sct-name {
	width:100%;
	padding:12px;
	font-size:18px;
	border:1px solid #555;
	border-radius:6px;
	margin-bottom:20px;
}
.sct-light {
	width:110px;
	height:110px;
	margin:20px auto;
	border-radius:50%;
	background:red;
	box-shadow:0 0 30px red;
}
.sct-signal {
	text-align:center;
	font-size:24px;
	font-weight:bold;
	letter-spacing:2px;
	margin-bottom:20px;
}
.sct-clock {
	text-align:center;
	font-family:monospace;
	font-size:55px;
	font-weight:bold;
	margin:20px 0;
}
.sct-buttons {
	display:flex;
	justify-content:center;
	gap:10px;
	flex-wrap:wrap;
	margin-bottom:25px;
}
.sct-buttons button,
.sct-actions button {
	padding:14px 20px;
	border:0;
	border-radius:7px;
	cursor:pointer;
	color:#fff;
	font-weight:bold;
	font-size:16px;
}
.sct-start { background:#20c968; }
.sct-stop { background:#e53935; }
.sct-reset { background:#555; }
.sct-laps { display:flex; gap:10px; margin-bottom:20px; }
.sct-lap {
	flex:1;
	background:#222;
	padding:15px;
	text-align:center;
	border-radius:8px;
}
.sct-lap strong { display:block; }
.sct-lap span {
	display:block;
	font-family:monospace;
	font-size:28px;
	margin-top:8px;
	font-weight:bold;
}
.sct-lap small { color:#999; }
.sct-result {
	background:#222;
	padding:15px;
	text-align:center;
	border-radius:8px;
	font-size:22px;
	font-weight:bold;
	margin-bottom:30px;
}
.sct-records-wrap {
	border-top:1px solid #444;
	padding-top:20px;
}
.sct-record-title {
	display:flex;
	justify-content:space-between;
	margin-bottom:10px;
}
.sct-counter { color:#999; }
.sct-head,
.sct-record {
	display:grid;
	grid-template-columns:1fr 55px 55px 65px 30px;
	gap:5px;
	align-items:center;
}
.sct-head {
	padding:7px 6px;
	color:#888;
	font-size:10px;
	text-transform:uppercase;
}
.sct-record {
	background:#222;
	padding:10px 6px;
	margin-bottom:5px;
	border-radius:5px;
}
.sct-record-name {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-weight:bold;
}
.sct-record-value {
	font-family:monospace;
	text-align:right;
}
.sct-delete {
	background:#555;
	color:#fff;
	border:0;
	border-radius:4px;
	cursor:pointer;
	font-size:18px;
	padding:3px;
}
.sct-delete:hover { background:#e53935; }
.sct-empty {
	padding:20px;
	text-align:center;
	color:#777;
}
.sct-actions {
	display:flex;
	gap:10px;
	margin-top:15px;
}
.sct-actions button { flex:1; padding:11px; }
.sct-export { background:#2980b9; }
.sct-clear { background:#555; }

@media (max-width:600px) {
	.sct-app { padding:18px; }
	.sct-clock { font-size:43px; }
	.sct-light { width:95px; height:95px; }
	.sct-lap { padding:12px 5px; }
	.sct-lap span { font-size:23px; }
	.sct-head, .sct-record {
		grid-template-columns:1fr 48px 48px 60px 25px;
	}
	.sct-record { font-size:13px; }
	.sct-head { font-size:9px; }
}