:root {
--bg: #f4f6f8;
--panel: #ffffff;
--text: #17212b;
--muted: #5a6a79;
--border: #d7dee5;
--primary: #0c7a54;
--danger: #b42318;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: "Segoe UI", Tahoma, sans-serif;
}
a {
color: var(--primary);
text-decoration: none;
}
.page {
max-width: 980px;
margin: 0 auto;
padding: 16px;
}
.topnav {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 16px;
}
.stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.inline {
display: flex;
gap: 12px;
align-items: center;
}
.between {
justify-content: space-between;
}
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
}
label {
display: flex;
flex-direction: column;
gap: 6px;
}
input,
textarea,
button {
font: inherit;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
}
button {
background: var(--primary);
color: #fff;
border-color: var(--primary);
cursor: pointer;
}
button:hover {
opacity: 0.92;
}
code,
pre {
font-family: Consolas, "Courier New", monospace;
}
pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
background: #f8fbfd;
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px;
}
.event {
border-top: 1px solid var(--border);
padding-top: 8px;
}
.event:first-child {
border-top: 0;
padding-top: 0;
}
.muted {
color: var(--muted);
}
.error {
color: var(--danger);
}
.toast {
position: fixed;
right: 16px;
bottom: 16px;
padding: 10px 12px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--panel);
}
.toast.ok {
border-color: var(--primary);
}
.toast.error {
border-color: var(--danger);
color: var(--danger);
}
@media (max-width: 720px) {
.inline {
flex-direction: column;
align-items: stretch;
}
}