<style>
  :root { --ink:#17130f; --teal:#14213b; --leaf:#e2762a; --paper:#f7f3ec; --mist:#e3dbcb; }
  * { box-sizing: border-box; }
  body { margin:0; font-family: -apple-system, "Segoe UI", sans-serif; background: var(--paper); color: var(--ink); }
  a { color: var(--teal); text-decoration: none; }
  .topbar { background: var(--teal); color: #fff; padding: .9rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
  .topbar a { color: #fff; }
  .topbar form { margin:0; }
  .topbar button { background:none; border:1px solid rgba(255,255,255,.4); color:#fff; padding:.4rem .8rem; border-radius:4px; cursor:pointer; }
  .layout { display:flex; min-height: calc(100vh - 56px); }
  .sidebar { width:230px; background:#fff; border-right:1px solid var(--mist); padding:1.25rem 1rem; }
  .sidebar h3 { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#8a8377; margin:1.1rem 0 .4rem; }
  .sidebar a { display:block; padding:.35rem .5rem; border-radius:4px; font-size:.92rem; color: var(--ink); }
  .sidebar a:hover { background: var(--paper); }
  .main { flex:1; padding:1.75rem 2rem; }
  h1 { font-size:1.4rem; margin:0 0 1.1rem; }
  table { width:100%; border-collapse: collapse; background:#fff; border:1px solid var(--mist); border-radius:6px; overflow:hidden; }
  th, td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--mist); font-size:.88rem; }
  th { background: var(--paper); font-weight:600; }
  tr:last-child td { border-bottom:none; }
  .btn { display:inline-block; background: var(--leaf); color:#fff; padding:.5rem 1rem; border-radius:4px; font-size:.85rem; border:none; cursor:pointer; }
  .btn-outline { background:none; border:1px solid var(--mist); color: var(--ink); }
  .btn-danger { background:#c0392b; }
  .actions-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
  form.field-form label { display:block; font-size:.82rem; font-weight:600; margin: 1rem 0 .3rem; }
  form.field-form input[type=text], form.field-form input[type=number], form.field-form input[type=datetime-local], form.field-form textarea, form.field-form select {
    width:100%; padding:.55rem .7rem; border:1px solid var(--mist); border-radius:4px; font-size:.9rem; font-family:inherit; background:#fff;
  }
  form.field-form textarea { min-height:120px; }
  form.field-form .checkbox-row { display:flex; align-items:center; gap:.5rem; margin-top:1rem; }
  .current-image { max-width:160px; border-radius:4px; display:block; margin-top:.4rem; border:1px solid var(--mist); }
  .error-box { background:#fbe7e2; border:1px solid #e2b3a8; color:#8a2e1f; padding:.7rem 1rem; border-radius:4px; margin-bottom:1rem; font-size:.88rem; }
  .login-wrap { max-width:360px; margin:10vh auto; background:#fff; padding:2rem; border-radius:8px; border:1px solid var(--mist); }
  table td.actions { white-space:nowrap; }
  table td.actions form { display:inline; }
</style>
