:root {
	--sf-navy: #26324c;
	--sf-orange: #ff801f;
	--sf-orange-pressed: #e8701a;
	--sf-ink: #20283a;
	--sf-surface: #f4f6f9;
	--sf-border: #e6eaf0;
	--sf-input-border: #c9d0db;
	--sf-white: #ffffff;
	--sf-muted: #5a6478;
	--sf-muted-2: #8a93a6;
	--sf-good: #1c9b5e;
	--sf-good-bg: #e4f5ec;
	--sf-good-ink: #0f7a44;
	--sf-critical: #d0413b;
	--sf-critical-bg: #fbe6e4;
	--sf-critical-ink: #a12626;
	--sf-warn-bg: #fdf1da;
	--sf-warn-ink: #8a5a04;
	--sf-neutral-bg: #eceef2;
	--sf-neutral-ink: #5a6478;
	--sf-r-btn: 6px;
	--sf-r-card: 12px;
	--sf-r-input: 8px;
	--sf-r-pill: 999px;
	--sf-font-head: 'Manrope', Arial, Helvetica, sans-serif;
	--sf-font-body: 'Source Sans 3', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	background: var(--sf-surface);
	color: var(--sf-ink);
	font-family: var(--sf-font-body);
}

a { color: var(--sf-orange); }

h1, h2, h3 { font-family: var(--sf-font-head); margin: 0; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--sf-font-head);
	font-weight: 700;
	font-size: 14px;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--sf-r-btn);
	border: none;
	cursor: pointer;
	text-decoration: none;
}
.btn-primary { background: var(--sf-orange); color: var(--sf-white); box-shadow: 0 10px 22px rgba(255, 128, 31, 0.3); }
.btn-primary:hover { background: var(--sf-orange-pressed); }
.btn-ghost { background: var(--sf-white); color: var(--sf-muted); border: 1px solid var(--sf-input-border); }
.btn-ghost:hover { border-color: var(--sf-muted-2); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-danger-text { background: none; border: none; color: var(--sf-critical-ink); font-family: var(--sf-font-head); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--sf-ink); font-family: var(--sf-font-head); }
.field input, .field select {
	height: 44px;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--sf-input-border);
	border-radius: var(--sf-r-input);
	font-size: 15px;
	color: var(--sf-ink);
	background: var(--sf-white);
	font-family: var(--sf-font-body);
}
.field input:focus, .field select:focus { outline: 2px solid var(--sf-orange); outline-offset: 1px; }

.card { background: var(--sf-white); border: 1px solid var(--sf-border); border-radius: var(--sf-r-card); box-shadow: 0 1px 2px rgba(38, 50, 76, 0.06); }

.topbar {
	height: 72px;
	background: var(--sf-navy);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
}
.topbar img { height: 52px; width: auto; display: block; }
.topbar .who { display: flex; align-items: center; gap: 16px; }
.topbar .who span { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); }
.topbar .avatar {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--sf-orange); color: var(--sf-white);
	font-family: var(--sf-font-head); font-weight: 700; font-size: 13px;
	display: flex; align-items: center; justify-content: center;
}
.topbar form { margin: 0; }
.topbar .signout {
	background: none; border: none; font-family: var(--sf-font-body);
	font-size: 13px; color: rgba(255, 255, 255, 0.6); cursor: pointer;
	border-left: 1px solid rgba(255, 255, 255, 0.2); padding-left: 16px;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 40px; display: flex; flex-direction: column; gap: 28px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { padding: 20px 22px; }
.stat .label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted-2); }
.stat .value { margin: 6px 0 0; font-family: var(--sf-font-head); font-weight: 800; font-size: 30px; }

.controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fbtns { display: flex; gap: 8px; }
.fbtn {
	font-family: var(--sf-font-head); font-weight: 600; font-size: 13px;
	height: 36px; padding: 0 16px; border-radius: var(--sf-r-pill);
	border: 1px solid var(--sf-border); background: var(--sf-white); color: var(--sf-muted);
	cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.fbtn.is-active { background: var(--sf-navy); border-color: var(--sf-navy); color: var(--sf-white); }
.search-sort { display: flex; gap: 10px; align-items: center; }
.search-sort input[type="search"] {
	height: 36px; width: 240px; padding: 0 14px; border: 1px solid var(--sf-input-border);
	border-radius: var(--sf-r-pill); font-size: 13.5px; font-family: var(--sf-font-body);
}
.search-sort select { height: 36px; padding: 0 12px; border: 1px solid var(--sf-input-border); border-radius: var(--sf-r-input); font-size: 13.5px; font-family: var(--sf-font-body); }

table.sites { width: 100%; border-collapse: collapse; }
table.sites th {
	text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--sf-muted-2); padding: 14px 24px; background: var(--sf-surface); border-bottom: 1px solid var(--sf-border);
}
table.sites td { padding: 16px 24px; border-bottom: 1px solid var(--sf-border); font-size: 14px; vertical-align: middle; }
table.sites tr:last-child td { border-bottom: none; }
table.sites tr:hover td { background: #fafbfc; }
table.sites .name { font-weight: 600; }
table.sites .domain { font-family: monospace; color: var(--sf-muted); font-size: 13.5px; }
table.sites .empty { text-align: center; color: var(--sf-muted-2); padding: 40px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sf-font-head); font-weight: 700; font-size: 11.5px; padding: 4px 10px; border-radius: var(--sf-r-pill); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.active { background: var(--sf-good-bg); color: var(--sf-good-ink); }
.pill.suspended { background: var(--sf-critical-bg); color: var(--sf-critical-ink); }
.pill.unconnected { background: var(--sf-warn-bg); color: var(--sf-warn-ink); }
.pill.gone { background: var(--sf-neutral-bg); color: var(--sf-neutral-ink); }
.sync-warn { color: var(--sf-critical-ink); font-size: 12px; }

.callout {
	background: var(--sf-warn-bg);
	border: 1px solid #f0d189;
	border-radius: var(--sf-r-input);
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.callout p { margin: 0; font-size: 13.5px; color: var(--sf-warn-ink); }
.callout a { color: var(--sf-warn-ink); text-decoration: underline; }

.auth-shell { display: flex; width: 100%; min-height: 100vh; font-family: var(--sf-font-body); }
.auth-left { width: 40%; box-sizing: border-box; background: var(--sf-navy); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-left img { height: 64px; width: auto; align-self: flex-start; display: block; }
.auth-left .pitch { display: flex; flex-direction: column; gap: 18px; max-width: 400px; }
.auth-left .rule { width: 40px; height: 3px; background: var(--sf-orange); border-radius: 2px; }
.auth-left h1 { font-weight: 700; font-size: 34px; line-height: 1.25; color: var(--sf-white); }
.auth-left p.lede { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); }
.auth-left .footnote { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.auth-right { width: 60%; display: flex; align-items: center; justify-content: center; background: var(--sf-surface); }
.auth-form { width: 380px; display: flex; flex-direction: column; gap: 28px; }
.eyebrow { margin: 0; font-family: var(--sf-font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-orange); }
.auth-form h2 { font-weight: 700; font-size: 26px; }
.auth-form p.sub { margin: 0; font-size: 14px; color: var(--sf-muted); }
.form-error { background: var(--sf-critical-bg); color: var(--sf-critical-ink); border-radius: var(--sf-r-input); padding: 12px 14px; font-size: 13.5px; }
.code-row { display: flex; gap: 10px; }
.code-row input { width: 48px; height: 52px; text-align: center; font-size: 20px; font-weight: 600; padding: 0; }
.form-footnote { margin: 0; font-size: 12.5px; color: var(--sf-muted-2); text-align: center; }
.verify-links { display: flex; justify-content: space-between; font-size: 13px; }
.verify-links button { background: none; border: none; padding: 0; color: var(--sf-muted); font-family: var(--sf-font-body); font-size: 13px; cursor: pointer; text-decoration: underline; }

.page-head { display: flex; align-items: baseline; justify-content: space-between; }
.page-head p { margin: 4px 0 0; font-size: 14.5px; color: var(--sf-muted); }
.page-head .actions { display: flex; gap: 10px; }

.form-card { max-width: 480px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.form-card form { display: flex; flex-direction: column; gap: 16px; }
.form-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.hint { margin: 0; font-size: 12.5px; color: var(--sf-muted-2); }

.error-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px; text-align: center; }