:root {
color-scheme: light dark;
--bg: #ffffff;
--fg: #1a1a1a;
--muted: #6b6b6b;
--border: #e2e2e2;
--accent: #0abab5;
--accent-fg: #ffffff;
--btn-bg: #f4f4f4;
--ok: #2a8a55;
--err: #c23b3b;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f1113;
--fg: #ececee;
--muted: #9a9a9e;
--border: #2a2c30;
--accent: #0abab5;
--accent-fg: #04211f;
--btn-bg: #1c1e22;
--ok: #5cbd83;
--err: #f08a8a;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: var(--bg);
color: var(--fg);
font:
15px/1.5 system-ui,
-apple-system,
'Segoe UI',
sans-serif;
}
.wrap {
width: 100%;
max-width: 460px;
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.75rem 1.75rem 1.5rem;
}
h1 {
margin: 0 0 0.5rem;
font-size: 1.35rem;
}
.lead {
margin: 0 0 1rem;
color: var(--fg);
}
.src {
margin: 0 0 1rem;
font-size: 0.85rem;
color: var(--muted);
}
.mono {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
word-break: break-all;
color: var(--fg);
}
.status {
min-height: 1.4rem;
margin: 0.25rem 0 1rem;
font-size: 0.9rem;
color: var(--muted);
}
.status-ok {
color: var(--ok);
}
.status-error {
color: var(--err);
}
.actions {
display: flex;
gap: 0.75rem;
align-items: center;
}
.btn {
display: inline-block;
font: inherit;
font-weight: 500;
padding: 0.55rem 1.1rem;
border-radius: 8px;
border: 1px solid var(--border);
cursor: pointer;
text-decoration: none;
color: var(--fg);
background: var(--btn-bg);
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-fg);
}
.btn-primary:disabled {
opacity: 0.55;
cursor: default;
}
.btn-secondary {
color: var(--muted);
}
.note {
margin: 1.25rem 0 0;
font-size: 0.8rem;
color: var(--muted);
}