*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-size: 15px;
    line-height: 1.6;
    background: var(--surface-app);
}

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

/* ── Color picker (Admin/Categories, Admin/Theme) ── */
.color-picker-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.color-picker-wrap input[type=color] {
    width: 44px;
    height: 44px;
    padding: 3px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--c-white);
    cursor: pointer;
}
.form-group .color-picker-wrap input[type=text] {
    width: 132px;
    flex: 0 0 auto;
    font-family: monospace;
}

/* ── Button variants (legacy — admin/post-form pages) ── */
.btn-primary { background: var(--c-primary); color: var(--text-onbrand); text-decoration: none; }
.btn-primary:hover { background: var(--c-primary-hover); color: var(--text-onbrand); text-decoration: none; }
.btn-sm { height: var(--control-h-s); padding: 0 var(--s-4); font-size: var(--fs-cap-13); }
.btn-danger { background: var(--c-danger); color: var(--text-onbrand); text-decoration: none; }
.btn-danger:hover { filter: brightness(0.92); text-decoration: none; }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--border-divider); color: var(--c-gray-800); text-decoration: none; }
.btn-ghost:hover { background: var(--surface-app); text-decoration: none; }

/* ── Pagination ── */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 24px; }
.pagination li { list-style: none; }
.pagination li a, .pagination li span {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid var(--border-divider);
    background: var(--surface-card);
    color: var(--text-primary);
}
.pagination li.active span { background: var(--c-primary); color: var(--text-onbrand); border-color: var(--c-primary); }
.pagination li.disabled span { color: var(--c-gray-500); }

/* ── Flash messages ──
   Pale status tints are intentionally literal: they are status semantics, not
   brand tokens, and stay readable regardless of the active theme. */
.flash-messages { margin-bottom: 16px; }
.message {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 8px;
}
.message.success { background: #e3fcef; color: #006644; border: 1px solid #abf5d1; }
.message.error   { background: #ffebe6; color: #bf2600; border: 1px solid #ffbdad; }
.message.info    { background: #e8f0fe; color: #0052cc; border: 1px solid #b3d0ff; }
.message.warning { background: #fff4e5; color: #974f0c; border: 1px solid #ffe380; }

/* ── Forms (Posts/add, Posts/edit, Admin pages) ── */
.form-wrap {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--r-lg);
    padding: var(--s-7);
    max-width: 640px;
    box-shadow: var(--shadow-1);
}
.form-wrap h2 { font: var(--fw-bold) var(--fs-h5)/1.2 var(--font-display); color: var(--c-primary-deep); letter-spacing: -.01em; margin-bottom: var(--s-6); }

.form-group { margin-bottom: var(--s-5); }
.form-group label {
    display: block;
    font: var(--fw-bold) var(--fs-label)/1 var(--font-body);
    color: var(--c-primary-deep);
    margin-bottom: var(--s-2);
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=datetime-local],
.form-group input[type=url],
.form-group input[type=number],
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    font-size: 15px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--c-white);
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=datetime-local],
.form-group input[type=url],
.form-group input[type=number],
.form-group select { height: var(--control-h-m); padding: 0 var(--s-4); }
.form-group textarea { padding: var(--s-3) var(--s-4); min-height: 160px; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: var(--shadow-focus);
}
.form-error { color: var(--c-danger); font-size: 12px; margin-top: 4px; }
.form-actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); }

/* ── Toolbar (rich text editor) ── */
.toolbar {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border: 2px solid var(--border-divider);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background: var(--surface-app);
}
.toolbar button {
    padding: 4px 10px;
    border: 1px solid var(--border-divider);
    border-radius: 3px;
    background: var(--surface-card);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.toolbar button:hover { background: var(--c-primary-100); }
#body-editor {
    width: 100%;
    min-height: 200px;
    padding: 10px 12px;
    border: 2px solid var(--border-divider);
    border-radius: 0 0 4px 4px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    outline: none;
}
#body-editor:focus { border-color: var(--c-primary); }

/* ── Admin tables ── */
.admin-wrap { max-width: 1080px; margin: var(--s-8) auto var(--s-10); padding: 0 var(--s-7); }
.admin-wrap h2 { font: var(--fw-bold) var(--fs-h4)/1.15 var(--font-display); color: var(--c-primary-deep); letter-spacing: -.01em; margin-bottom: var(--s-4); }
.admin-wrap h2 + .psub { margin-top: calc(var(--s-4) * -1 + var(--s-1)); }
.psub { color: var(--c-gray-500); font: var(--fw-regular) 14px/1.5 var(--font-body); margin: 0 0 var(--s-6); max-width: 70ch; }

table { width: 100%; border-collapse: collapse; background: var(--c-white); border-radius: var(--r-md); border: 1px solid var(--c-gray-200); overflow: hidden; box-shadow: var(--shadow-1); }
th { text-align: left; padding: 13px 16px; font: var(--fw-bold) var(--fs-cap-12)/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--c-gray-500); border-bottom: 1px solid var(--c-gray-200); }
td { padding: 13px 16px; text-align: left; font: var(--fw-regular) var(--fs-label)/1.45 var(--font-body); color: var(--text-primary); border-bottom: 1px solid var(--c-gray-100); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--c-gray-50); }

/* ── Checkbox variants (post form pin toggle) ── */
.form-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.form-check input[type=checkbox] { width: 16px; height: 16px; }
.pin-check { gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.pin-icon-inline { font-size: 14px; }