/* Loaded alongside site.css on account pages for the editor and post list. */
.account-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.75rem; margin-bottom: 1.25rem; border-radius: 10px; background: var(--soft); }
.account-hero h1 { margin: 0.25rem 0; font-size: 2.15rem; }
.account-hero p:last-child { margin: 0; color: var(--muted); }
.account-hero-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.button { white-space: nowrap; }
.account-panel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.account-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 0.8rem; }
.account-panel-heading h2 { margin: 0; font-size: 1.1rem; }
.account-panel-heading span { color: var(--muted); font-size: 0.85rem; }
.post-table { width: 100%; border-collapse: collapse; }
.post-table th, .post-table td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--line); }
.post-actions { display: flex; align-items: center; gap: 0.7rem; }
.post-actions form { margin: 0; }
.post-actions a, .text-danger { color: var(--accent); text-decoration: none; font: inherit; background: transparent; padding: 0; }
.account-logout { margin-top: 1.5rem; }
.role-label { display: inline-block; margin-left: 0.5rem; color: var(--accent); font-size: 0.75rem; font-weight: normal; }
.admin-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.admin-content-grid > :last-child { grid-column: 1 / -1; }
.admin-create-category form { display: grid; gap: 0.65rem; padding: 0 1rem 1rem; }
.admin-create-category label { display: grid; gap: 0.25rem; }
.admin-create-category input, .admin-create-category textarea { font: inherit; padding: 0.45rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.admin-content-list { list-style: none; margin: 0; padding: 0; }
.admin-content-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1rem; border-top: 1px solid var(--line); }
.admin-content-list small { color: var(--muted); }

.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.editor-form { display: flex; flex-direction: column; gap: 0.75rem; }
.editor-form textarea { font-family: ui-monospace, monospace; font-size: 0.95rem; }
.editor-form input[type="text"], .editor-form input:not([type="file"]) {
  padding: 0.5rem; border: 1px solid var(--line); border-radius: 4px; font: inherit;
}
.editor-actions { display: flex; gap: 0.5rem; }
button.danger { background: #7a1f1f; }
.cover-preview { max-width: 100%; border-radius: 4px; }
.preview-pane { border: 1px solid var(--line); border-radius: 6px; padding: 1rem; max-height: 80vh; overflow-y: auto; }

@media (max-width: 800px) {
  .account-hero { align-items: flex-start; flex-direction: column; }
  .account-panel { overflow-x: auto; }
  .admin-content-grid { grid-template-columns: 1fr; }
  .admin-content-grid > :last-child { grid-column: auto; }
  .editor-grid { grid-template-columns: 1fr; }
  main { max-width: 100%; }
}

html[data-theme="environment"] .account-hero,
html[data-theme="environment"] .account-panel,
html[data-theme="environment"] .preview-pane { border-radius: 0; }
html[data-theme="environment"] .account-hero { border-left: 3px solid var(--accent); background: linear-gradient(120deg, var(--soft), var(--surface)); }
html[data-theme="environment"] .account-panel,
html[data-theme="environment"] .preview-pane { background: var(--surface); }
html[data-theme="environment"] .editor-form input[type="text"],
html[data-theme="environment"] .editor-form input:not([type="file"]),
html[data-theme="environment"] .editor-form textarea { color: var(--ink); background: var(--surface); border-radius: 0; }
html[data-theme="environment"] .cover-preview { border-radius: 0; box-shadow: 8px 8px 0 rgba(127, 202, 99, 0.16); }

html[data-theme="ocean"] .account-hero { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: linear-gradient(120deg, #0e2b43, var(--surface)); }
html[data-theme="ocean"] .account-panel,
html[data-theme="ocean"] .preview-pane { border-color: var(--line); background: var(--surface); }
html[data-theme="ocean"] .account-panel-heading { border-bottom: 1px solid var(--line); }
html[data-theme="ocean"] .post-table a,
html[data-theme="ocean"] .post-actions a,
html[data-theme="ocean"] .text-danger { color: var(--accent); }
html[data-theme="ocean"] .editor-form input[type="text"],
html[data-theme="ocean"] .editor-form input:not([type="file"]),
html[data-theme="ocean"] .editor-form textarea { color: var(--ink); background: #071523; border-color: var(--line); }
html[data-theme="ocean"] .cover-preview { border: 1px solid var(--line); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25); }