:root {
	--bg: #0f1220;
	--surface: #1a1e34;
	--surface-2: #232842;
	--text: #e7e9f3;
	--muted: #9aa0bd;
	--primary: #6d7bff;
	--primary-ink: #ffffff;
	--border: #2c3252;
	--ok: #43c59e;
	--warn: #e0b34a;
	--danger: #e5646e;
	--radius: 12px;
	--maxw: 880px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: radial-gradient(1200px 600px at 50% -10%, #1b2140 0%, var(--bg) 60%);
	color: var(--text);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	line-height: 1.55;
}

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

.topbar {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 1.2rem; color: var(--text); }
.tagline { color: var(--muted); font-size: .85rem; }

.container {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 2rem 1.5rem;
	flex: 1;
}

.footer {
	border-top: 1px solid var(--border);
	padding: 1.25rem 1.5rem;
	color: var(--muted);
	font-size: .85rem;
	text-align: center;
}

.hero h1 { font-size: 2rem; margin: 0 0 .5rem; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }

.cta-row { display: flex; gap: .75rem; margin: 1.5rem 0 2.5rem; flex-wrap: wrap; }

.btn {
	display: inline-block;
	padding: .6rem 1.1rem;
	border-radius: var(--radius);
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	font-size: .95rem;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); }

.status-card, .card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
}
.status-card h2 { margin-top: 0; }

.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { padding: .2rem 0; }

.muted { color: var(--muted); }

/* Forms */
.form { display: flex; flex-direction: column; gap: 1rem; max-width: 420px; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .9rem; color: var(--muted); }
.field input, .field textarea {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: .6rem .7rem;
	color: var(--text);
	font-size: 1rem;
}
.field input:focus { outline: 2px solid var(--primary); border-color: transparent; }

.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.flash-error { background: rgba(229,100,110,.15); border: 1px solid var(--danger); color: #ffd7da; }
.flash-ok { background: rgba(67,197,158,.15); border: 1px solid var(--ok); color: #c9f5e7; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 600; font-size: .85rem; }

/* Status pills */
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pill-draft { background: var(--surface-2); color: var(--muted); }
.pill-sent { background: rgba(224,179,74,.18); color: var(--warn); }
.pill-completed { background: rgba(67,197,158,.18); color: var(--ok); }
.pill-pending { background: var(--surface-2); color: var(--muted); }
.pill-signed { background: rgba(67,197,158,.18); color: var(--ok); }

/* Top nav */
.topnav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.topnav .who { color: var(--muted); font-size: .85rem; }
.inline-form { display: inline; margin: 0; }

/* Buttons: sizes + danger */
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: rgba(229,100,110,.12); }

/* Auth card */
.auth-card { max-width: 460px; margin: 1rem auto; }

/* Upload */
.upload-card { margin-bottom: 1.5rem; }
.upload-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.upload-row input[type=file] {
	flex: 1; min-width: 200px; color: var(--text);
	background: var(--surface-2); border: 1px solid var(--border);
	border-radius: 8px; padding: .5rem;
}
#upload-progress {
	width: 100%; height: 6px; margin-top: .75rem; display: none;
	appearance: none; border: none; border-radius: 999px; overflow: hidden; background: var(--surface-2);
}
#upload-progress.active { display: block; }
#upload-progress::-webkit-progress-bar { background: var(--surface-2); }
#upload-progress::-webkit-progress-value { background: var(--primary); }
#upload-progress::-moz-progress-bar { background: var(--primary); }

.row-actions { display: flex; gap: .4rem; justify-content: flex-end; }

/* Document detail */
.doc-head { display: flex; align-items: center; gap: .75rem; }
.doc-head h1 { margin: 0; font-size: 1.4rem; }
dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 1.25rem 0; }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; }
.hash { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; word-break: break-all; }
.hash-short { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }

.field textarea {
	background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
	padding: .6rem .7rem; color: var(--text); font-size: 1rem; font-family: inherit; resize: vertical;
}

/* Integrity banner */
.integrity { border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0; font-size: .92rem; }
.integrity-ok { background: rgba(67,197,158,.12); border: 1px solid var(--ok); color: #c9f5e7; }
.integrity-bad { background: rgba(229,100,110,.14); border: 1px solid var(--danger); color: #ffd7da; }
.hash-compare { margin-top: .6rem; display: grid; gap: .25rem; font-size: .8rem; }
.hash-compare span { color: var(--muted); display: inline-block; min-width: 9.5rem; }
.hash-compare code { word-break: break-all; }

.tag-warn { color: var(--danger); font-size: .78rem; margin-left: .4rem; font-weight: 600; }

/* Signing page */
.sign-card { max-width: 620px; margin: 1rem auto; }
.sign-form { max-width: none; margin-top: .5rem; }
.caveat {
	margin-top: 1.5rem; padding: .9rem 1rem; border-radius: 10px;
	background: var(--surface-2); border: 1px solid var(--border);
	color: var(--muted); font-size: .85rem; line-height: 1.5;
}
.caveat strong { color: var(--text); }

/* Audit trail */
.audit { list-style: none; margin: .5rem 0 0; padding: 0; }
.audit-item {
	display: grid; grid-template-columns: 12.5rem 1fr; gap: 1rem;
	padding: .7rem 0; border-bottom: 1px solid var(--border);
}
.audit-item:last-child { border-bottom: none; }
.audit-when { color: var(--muted); font-size: .82rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.audit-msg { color: var(--text); }
.audit-actor { color: var(--muted); font-size: .82rem; margin-top: .2rem; }
.audit-security { background: rgba(229,100,110,.07); border-left: 3px solid var(--danger); padding-left: .6rem; margin-left: -.6rem; }
.actor-tag { display: inline-block; padding: 0 .4rem; border-radius: 4px; font-size: .72rem; font-weight: 600; margin-right: .4rem; text-transform: uppercase; letter-spacing: .03em; }
.actor-user { background: rgba(109,123,255,.18); color: #b8c0ff; }
.actor-signer { background: rgba(67,197,158,.18); color: var(--ok); }
.actor-system { background: var(--surface-2); color: var(--muted); }
.actor-anonymous { background: rgba(224,179,74,.18); color: var(--warn); }