<html>

<head>
	<title>{{ title|default("IndieAuth Compliance Suite") }}</title>
	<meta name="color-scheme" content="light dark">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
	<style>
		.status-success {
			border: 1px solid var(--pico-ins-color);
			border-left: 4px solid var(--pico-ins-color);
			background: var(--pico-card-background-color);
			padding: 1rem;
			margin: 1rem 0;
			border-radius: var(--pico-border-radius);
		}
		
		.status-success-header {
			color: var(--pico-ins-color);
			font-weight: bold;
			margin-bottom: 0.5rem;
		}
		
		.status-error {
			border: 1px solid var(--pico-del-color);
			border-left: 4px solid var(--pico-del-color);
			background: var(--pico-card-background-color);
			padding: 1rem;
			margin: 1rem 0;
			border-radius: var(--pico-border-radius);
		}
		
		.status-error-header {
			color: var(--pico-del-color);
			font-weight: bold;
			margin-bottom: 0.5rem;
		}
		
		.status-box-content {
			font-size: 0.9em;
			font-family: var(--pico-font-family-monospace);
			line-height: 1.4;
		}
		
		.status-muted {
			font-size: 0.8em;
			color: var(--pico-muted-color);
			margin-top: 0.5rem;
		}
		
		.scope-badge {
			display: inline-block;
			background: var(--pico-primary-background);
			color: var(--pico-primary-inverse);
			padding: 2px 6px;
			border-radius: 3px;
			font-size: 0.8em;
			margin: 1px;
			font-family: var(--pico-font-family);
		}
		
		.demo-users {
			background: var(--pico-card-sectioning-background-color);
			border: 1px solid var(--pico-muted-border-color);
			border-radius: 0.5rem;
			padding: 1rem;
			margin: 1rem 0;
		}
		
		.demo-users h3 {
			margin-top: 0;
			color: var(--pico-h3-color);
		}
		
		.demo-users ul {
			margin-bottom: 0;
		}
		
		.demo-users li {
			margin: 0.25rem 0;
		}
		
		.status-info {
			background: var(--pico-card-sectioning-background-color);
			border: 1px solid var(--pico-muted-border-color);
			border-left: 4px solid var(--pico-primary-border);
			border-radius: var(--pico-border-radius);
			padding: 1rem;
			margin: 1rem 0;
		}
		
		.status-info-header {
			color: var(--pico-primary);
			font-weight: bold;
			margin-bottom: 0.75rem;
		}
		
		.demo-credential {
			padding: 0.75rem;
			border-bottom: 1px solid var(--pico-muted-border-color);
		}
		
		.demo-credential:last-child {
			border-bottom: none;
		}
		
		.credential-row {
			margin: 0.25rem 0;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}
		
		.credential-row code {
			background: var(--pico-code-background);
			padding: 0.2rem 0.4rem;
			border-radius: var(--pico-border-radius);
		}
		
		.copy-btn {
			padding: 0.15rem 0.5rem;
			font-size: 0.8rem;
			cursor: pointer;
			background: var(--pico-secondary-background);
			color: var(--pico-secondary-inverse);
			border: 1px solid var(--pico-secondary-border);
			border-radius: var(--pico-border-radius);
		}
		
		.copy-btn:hover {
			background: var(--pico-secondary-hover-background);
		}
	</style>
</head>

<body>
	<main class="container">{% block body %}{% endblock %}</main>
</body>

</html>
