/* SocialME PageSpeed — internal dashboard */

:root {
	--navy: #000f22;
	--navy-2: #0b1f38;
	--red: #f21520;
	--red-dark: #d10f19;
	--blue: #1582fb;
	--light: #fafcfe;
	--line: #e3eaf3;
	--slate: #5b6b80;
	--text: #0e1b2c;
	--ok: #12a150;
	--warn: #e08a00;
	--err: #d92d20;
	--radius: 14px;
	--shadow: 0 10px 30px rgba(0, 15, 34, 0.08);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--light);
	color: var(--text);
	font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- brand ---------- */

.dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--red);
	margin-right: 8px;
	vertical-align: 1px;
}

.brand {
	font-size: 16px;
	letter-spacing: 0.2px;
	font-weight: 500;
}

.brand b { font-weight: 800; }

.brand.big { font-size: 22px; }

/* ---------- top bar ---------- */

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 22px;
	background: var(--navy);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 20;
}

.topbar .who {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: #c7d4e4;
}

.topbar .who a { color: #fff; font-weight: 600; }

/* ---------- layout ---------- */

.wrap {
	max-width: 980px;
	margin: 0 auto;
	padding: 26px 20px 60px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.card {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 22px;
}

.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.card-head h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.1px;
}

/* ---------- run form ---------- */

.run label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--slate);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 8px;
}

.row {
	display: flex;
	gap: 10px;
}

.row input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font-size: 16px;
	color: var(--text);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.row input:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(21, 130, 251, 0.14);
}

.row input:disabled { background: #f5f8fc; color: var(--slate); }

.hint {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--slate);
}

/* ---------- buttons ---------- */

button, .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	background: var(--red);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
	text-decoration: none;
}

button:hover, .btn:hover { background: var(--red-dark); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: default; }

.btn.ghost {
	background: #fff;
	color: var(--navy);
	border: 1px solid var(--line);
}

.btn.ghost:hover { background: #f2f6fb; }

.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* ---------- live progress ---------- */

.live {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.live-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.state { font-weight: 700; }
.state[data-state="done"] { color: var(--ok); }
.state[data-state="error"] { color: var(--err); }
.state[data-state="running"] { color: var(--blue); }

.time {
	font-variant-numeric: tabular-nums;
	color: var(--slate);
	font-size: 13px;
}

.bar {
	position: relative;
	height: 8px;
	border-radius: 99px;
	background: #e9eff7;
	overflow: hidden;
}

.bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--blue), var(--red));
	transition: width 0.35s ease;
}

.bar.done span { background: var(--ok); }

.live-url {
	margin-top: 10px;
	font-size: 13px;
	color: var(--slate);
	word-break: break-all;
}

.live-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* ---------- table ---------- */

.table-wrap { overflow-x: auto; }

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--slate);
	font-weight: 700;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

td {
	padding: 13px 12px;
	border-bottom: 1px solid #eef3f9;
	vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbff; }

td.nowrap { white-space: nowrap; color: var(--slate); font-variant-numeric: tabular-nums; }

td.domain {
	font-weight: 600;
	max-width: 340px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

td.score { font-weight: 800; font-variant-numeric: tabular-nums; }
td.score.good { color: var(--ok); }
td.score.mid { color: var(--warn); }
td.score.bad { color: var(--err); }

td.actions { white-space: nowrap; }

button.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--slate);
	vertical-align: middle;
	margin-left: 6px;
	transition: background 0.15s, border-color 0.15s;
}

button.icon-btn svg { width: 20px; height: 20px; display: block; }
button.icon-btn:hover { background: #f2f6fb; border-color: #c9d6e6; }
button.icon-btn.copy.copied { background: #e6f7ee; border-color: #b7e6cc; }
button.icon-btn.del:hover { background: #fdecea; border-color: #f5c2bd; }

.sdot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: 1px;
	background: var(--blue);
}

.sdot.queued, .sdot.running { animation: pulse 1.4s ease-in-out infinite; }
.sdot.error { background: var(--err); }

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

.offscreen { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

.muted { color: #9aa9bc; }

.empty {
	margin: 18px 0 4px;
	color: var(--slate);
	text-align: center;
}

/* ---------- login ---------- */

.login-body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
	background:
		radial-gradient(1200px 600px at 20% -10%, #123a66 0%, transparent 60%),
		radial-gradient(900px 500px at 110% 110%, #4a0a10 0%, transparent 55%),
		var(--navy);
}

.login-card {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 18px;
	padding: 32px 28px 28px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.login-card .sub {
	margin: 6px 0 22px;
	color: var(--slate);
	font-size: 13.5px;
}

.login-card label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--slate);
	margin: 14px 0 6px;
}

.login-card input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 15px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.login-card input:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(21, 130, 251, 0.14);
}

.login-card button {
	width: 100%;
	margin-top: 22px;
}

.alert {
	margin: 0 0 4px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fdecea;
	color: var(--err);
	font-size: 13.5px;
	font-weight: 600;
}

/* ---------- responsive ---------- */

@media (max-width: 620px) {
	.row { flex-direction: column; }
	.row button { width: 100%; }
	.card { padding: 18px; }
	.topbar { padding: 12px 16px; }
	.wrap { padding: 18px 14px 50px; }

	/* History becomes compact cards so both scores stay visible. */
	table thead { display: none; }
	table, tbody { display: block; }

	tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"domain desktop mobile"
			"date actions actions";
		align-items: center;
		gap: 6px 14px;
		padding: 14px 0;
		border-bottom: 1px solid #eef3f9;
	}

	tbody tr:last-child { border-bottom: 0; }
	tbody tr:hover { background: transparent; }

	tbody td { display: block; border: 0; padding: 0; }

	td.domain {
		grid-area: domain;
		max-width: none;
		white-space: normal;
		font-size: 15px;
	}

	td.nowrap {
		grid-area: date;
		font-size: 12px;
	}

	td.score.desktop { grid-area: desktop; text-align: right; }
	td.score.mobile { grid-area: mobile; text-align: right; }

	td.score::before {
		content: attr(data-label);
		display: block;
		font-size: 10px;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		color: var(--slate);
		font-weight: 700;
	}

	td.actions {
		grid-area: actions;
		justify-self: end;
	}
}