:root {
    --bg: #f6f7f9;
    --card: #ffffff;
    --line: #e2e5ea;
    --text: #1c1f23;
    --muted: #6b7280;
    --accent: #2563eb;
    --danger: #b42318;
    --ok: #067647;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

nav {
    display: flex;
    gap: 1.5rem;
    padding: 0 1.5rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

nav a {
    padding: 1rem 0;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

nav a.active { color: var(--text); border-bottom-color: var(--accent); }
nav a.right { margin-left: auto; }

main { max-width: 1000px; margin: 2rem auto; padding: 0 1.5rem; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.75rem;
}

.card.narrow { width: 340px; }

h1 { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 600; }

label { display: block; margin-bottom: 1.1rem; font-weight: 500; }
label.inline { display: inline-block; margin-right: 1.25rem; font-weight: 400; }

input[type=text], input[type=password], input[type=datetime-local], textarea, input[type=file] {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.6rem 0.7rem;
    font: inherit;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

textarea { resize: vertical; }

fieldset {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
}

legend { padding: 0 0.4rem; font-weight: 500; }

button {
    padding: 0.6rem 1.2rem;
    font: inherit;
    font-weight: 500;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

button.link {
    padding: 0;
    color: var(--accent);
    background: none;
    font-weight: 400;
    text-decoration: underline;
}

.inline-form { display: inline; margin-right: 0.7rem; }

table {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    border-collapse: collapse;
    overflow: hidden;
}

th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }

.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
.caption { max-width: 340px; }
.nowrap { white-space: nowrap; }

.pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.8rem;
    border-radius: 999px;
    background: #eef1f5;
    color: #374151;
}

.pill.on, .status-published { background: #e7f6ee; color: var(--ok); }
.pill.off, .status-failed { background: #fdeceb; color: var(--danger); }
.status-publishing { background: #fef4e6; color: #92400e; }

.hint { display: block; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.small { font-size: 0.8rem; }

.error { margin: 0 0 1rem; padding: 0.6rem 0.8rem; color: var(--danger); background: #fdeceb; border-radius: 6px; }
.ok { margin: 0 0 1rem; padding: 0.6rem 0.8rem; color: var(--ok); background: #e7f6ee; border-radius: 6px; }

.toggles { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.toggles .hint { margin: 0; }