:root {
    --bg: #f7f7f8;
    --card: #ffffff;
    --border: #e2e2e6;
    --text: #1a1a1e;
    --muted: #6b6b73;
    --accent: #2952e3;
    --danger: #c62828;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
  }
  header {
    padding: 20px 24px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  header h1 { font-size: 18px; margin: 0; }
  #logout-btn { display: none; }
  main { max-width: 820px; margin: 0 auto; padding: 24px; }
  #login-screen { max-width: 360px; margin: 80px auto; text-align: center; }
  #login-screen input { width: 100%; padding: 10px; margin: 12px 0; font-size: 15px; }
  section.group {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
  }
  section.group { scroll-margin-top: 64px; }
  section.group h2 { margin-top: 0; font-size: 16px; }
  section.group p.hint { color: var(--muted); font-size: 13px; margin-top: -8px; }
  label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
  label .field-hint { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
  /* A checkbox beside its label; greyed out as a whole (box, label and hint)
     when it can't be used, but still readable. */
  .checkbox-field { margin: 14px 0 4px; }
  .checkbox-field .checkbox-label { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
  .checkbox-field input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
  .checkbox-field .field-hint { display: block; margin: 3px 0 0 24px; font-weight: 400; color: var(--muted); font-size: 12px; }
  .checkbox-field.is-disabled { opacity: .5; }
  .checkbox-field.is-disabled .checkbox-label { cursor: not-allowed; }
  input[type="text"], input[type="number"], input[type="url"], input[type="password"], textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
  }
  textarea { min-height: 70px; resize: vertical; }
  button {
    cursor: pointer;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
  }
  button.primary { background: var(--accent); color: #fff; }
  button.secondary { background: #eee; color: var(--text); }
  button.danger { background: var(--danger); color: #fff; }
  button:disabled { opacity: 0.5; cursor: default; }

  /* Breathing room above every section-level action button (Save, Add,
     Remove) so none of them sit flush against the field or list above. */
  section.group > button,
  section.group > .entry-actions,
  .entry > button,
  .ext-section-editor > button { margin-top: 16px; }

  /* Tab navigation: one row of pills that keeps each editing area focused.
     scrolls sideways on narrow screens instead of wrapping. */
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  #section-nav {
    position: -webkit-sticky; /* older iPhone Safari */
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 8px;
    margin: 0 -24px 20px;
    padding: 10px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  #section-nav::-webkit-scrollbar { display: none; }
  #section-nav button {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  #section-nav button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .admin-tab[hidden] { display: none; }
  .admin-tab > .group { margin-top: 0; }
  /* The formatting toolbar stays pinned just under the tab bar while you scroll
     through a long post, so italics and bold are never a scroll away. It is
     bounded by .rich-field, so it stops following once the editor is off screen. */
  .rich-toolbar { display:flex; gap:6px; margin:0 0 6px; padding:8px 0 6px; flex-wrap:wrap;
    position:-webkit-sticky; position:sticky; top:56px; z-index:15; background:#fbfbfc; }
  .rich-toolbar button { min-width:36px; padding:6px 9px; }
  .rich-editor { min-height:220px; border:1px solid var(--line); border-radius:6px; padding:12px; background:#fff; line-height:1.55; }
  .rich-editor:focus { outline:2px solid var(--accent); outline-offset:1px; }
  .curation-note { margin:20px 0 14px; padding:18px; background:#f7f7f8; border:1px solid var(--border); border-radius:12px; }
  .curation-note textarea { min-height:94px; resize:vertical; }
  .curation-list, .blog-index-list { border:1px solid var(--border); border-radius:12px; overflow:hidden; }
  .curation-row, .blog-index-row { display:flex; align-items:center; gap:16px; padding:14px 18px; border-bottom:1px solid var(--border); }
  .curation-row:last-child, .blog-index-row:last-child { border-bottom:0; }
  .curation-row strong { flex:1; }
  .curation-toggle { display:inline-flex; align-items:center; gap:7px; margin:0; white-space:nowrap; font-weight:600; }
  .blog-index-head, .blog-editor-actions { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:20px; }
  .blog-add { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
  .blog-index-row > div:first-child { min-width:0; flex:1; display:grid; gap:3px; }
  .blog-dates { margin: -6px 0 14px; }
  .blog-meta { color:var(--muted); font-size:13px; text-transform:capitalize; }
  .blog-type-choice { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:20px; }
  .blog-type-choice button { text-align:left; padding:18px; min-height:92px; }
  .blog-type-choice small { display:block; opacity:.78; margin-top:7px; font-size:14px; line-height:1.42; font-weight:400; }
  .blog-feature-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:16px 0; }
  .blog-feature-controls label { display:grid; gap:6px; font-weight:600; }
  .blog-feature-controls select { width:100%; padding:10px; border:1px solid var(--border); border-radius:6px; background:#fff; }
  .status-pill { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-size:12px; font-weight:700; background:#eee; color:#555; }
  .status-pill.published { background:#dff7e7; color:#166534; }
  .icon-button { min-width:42px; padding:8px 10px; line-height:1; }
  .icon-button iconify-icon { font-size:20px; width:1em; height:1em; display:block; }
  @media (max-width:640px) { .curation-row, .blog-index-row, .blog-index-head, .blog-editor-actions { align-items:flex-start; flex-direction:column; gap:10px; }.blog-add { justify-content:flex-start; }.entry-actions { flex-wrap:wrap; } }

  .entry {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
    background: #fbfbfc;
  }
  .entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .entry-actions { display: flex; gap: 6px; }
  .row { display: flex; gap: 10px; }
  .row > div { flex: 1; }

  .list-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    align-items: flex-start;
  }
  .list-row input, .list-row textarea { flex: 1; }
  .list-row .list-move { background: #eee; color: var(--text); flex-shrink: 0; padding: 8px 9px; }
  .list-remove {
    background: #eee;
    color: var(--danger);
    flex-shrink: 0;
    padding: 8px 10px;
  }
  .list-add { margin-top: 2px; }

  /* Stats tiles: a number box and a label box side by side per tile. */
  .stat-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: flex-start; }
  .stat-row input:first-child { flex: 0 0 110px; width: 110px; }
  .stat-row input:nth-child(2) { flex: 1; }

  .ext-section-editor {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
  }

  /* Image field: thumbnail (click for the lightbox), Upload/Replace and Remove
     buttons, and a status line. The address itself is kept in a hidden input. */
  .image-field-controls { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
  .image-field-status { color: var(--muted); font-size: 12px; }
  .color-field { display: flex; align-items: center; gap: 10px; }
  .color-field input[type="color"] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--border, #ccc); background: none; cursor: pointer; flex: 0 0 auto; }
  .color-field input[type="text"] { width: 120px; flex: 0 0 auto; font-family: monospace; }
  /* Thumbnail beside the upload button; click opens the lightbox. */
  .image-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    cursor: zoom-in;
  }
  .image-thumb:hover { border-color: var(--accent, #3b82f6); }
  .image-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
  #image-lightbox {
    max-width: 92vw;
    max-height: 92vh;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    cursor: zoom-out;
  }
  #image-lightbox::backdrop { background: rgba(20,20,24,.7); }
  #image-lightbox img { display: block; max-width: 86vw; max-height: 78vh; margin: 0 auto; object-fit: contain; }
  #image-lightbox p { margin-top: 10px; color: var(--muted); font-size: 12px; }

  /* Icon rows (Core strengths, Education): live icon preview, the Iconify
     icon name, the text field(s), then reorder/remove buttons. */
  .icon-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
  .icon-row .icon-preview {
    cursor: pointer;
    padding: 0;
    color: var(--text);
    flex: 0 0 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
  }
  .icon-row input[data-part="icon"] { flex: 0 0 210px; width: 210px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
  .icon-row input:not([data-part="icon"]) { flex: 1; }
  .icon-row .list-move { background: #eee; color: var(--text); flex-shrink: 0; padding: 8px 9px; }
  @media (max-width: 640px) {
    .icon-row { flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
    .icon-row input[data-part="icon"] { flex: 1 1 150px; width: auto; }
    .icon-row input:not([data-part="icon"]) { flex: 1 1 100%; }
  }

  /* Icon picker: a searchable pop-up over the editor (native <dialog>). */
  #icon-picker {
    width: min(660px, 94vw);
    max-height: 82vh;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
  }
  #icon-picker::backdrop { background: rgba(20,20,24,.45); }
  .picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .picker-controls { display: flex; gap: 8px; margin-bottom: 12px; }
  .picker-controls input { flex: 1; }
  .picker-controls select { padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
  #picker-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 6px;
    max-height: 52vh;
    overflow-y: auto;
    min-height: 120px;
  }
  #picker-results button {
    height: 54px;
    font-size: 26px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #picker-results button:hover,
  #picker-results button:focus-visible { border-color: var(--accent); background: #eef2fd; outline: none; }
  #picker-results button.current { border-color: var(--accent); border-width: 2px; }
  #picker-status { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

  /* Unsaved changes: a badge and orange edge on each changed entry, and a bar
     that follows you down the page with a Save all button (admin-unsaved.js). */
  .entry--unsaved { border-color: #f0a04b; box-shadow: inset 4px 0 0 #f0a04b; }
  .unsaved-badge { margin: 0 auto 0 10px; font-size: 12px; font-weight: 700; color: #b45f06; white-space: nowrap; }
  .unsaved-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; background: #fff4e0; color: #7a4a06; font-size: 13px; }
  .blog-editor-actions .unsaved-badge { margin: 0 auto 0 4px; }
  .blog-index-row .unsaved-badge { margin: 0 0 0 8px; }
  #unsaved-bar {
    position: fixed; left: 20px; bottom: 20px; z-index: 50; max-width: calc(100vw - 40px);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 8px; background: #1a1a1e; color: #fff; font-size: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
  }
  #unsaved-bar[hidden] { display: none; }
  #unsaved-bar .unsaved-dot { color: #f0a04b; }
  #unsaved-bar .unsaved-bar-actions { display: flex; gap: 8px; margin-left: auto; }
  body.has-unsaved #status-msg { bottom: 84px; }
  #status-msg {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 16px;
    border-radius: 6px;
    background: #1a1a1e;
    color: #fff;
    font-size: 13px;
    display: none;
  }