/* Chrome khusus admin — sengaja beda dari tampilan publik (topbar + tab +
   tabel padat) supaya tidak terasa "satu template dipakai ulang". */
body { background: var(--surface-2); }

.admin-topbar {
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.4rem;
}
:root[data-theme="dark"] .admin-topbar { background: #0D0F13; }
.admin-topbar .osn-wordmark { color: var(--bg); }
.admin-topbar .osn-wordmark .mark-accent { color: var(--accent); }
.admin-topbar .repo-pill { font-family: var(--font-mono); font-size: 0.75rem; background: rgba(255,255,255,0.08); padding: 0.3rem 0.7rem; border-radius: 999px; color: #C9C4B4; }

.admin-shell { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.4rem 4rem; }

.admin-tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.4rem; overflow-x: auto; }
.admin-tab { padding: 0.7rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.admin-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); font-size: 0.86rem; vertical-align: top; }
.admin-table tr:hover td { background: var(--surface-2); cursor: pointer; }

.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 0.35rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.editor-drawer { position: fixed; inset: 0; background: rgba(20,18,14,0.5); display: flex; justify-content: flex-end; z-index: 70; }
.editor-panel { width: min(680px, 100%); background: var(--surface); height: 100%; overflow-y: auto; padding: 1.6rem; box-shadow: var(--shadow-md); }

.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius-md); padding: 2.4rem; text-align: center; color: var(--ink-muted); cursor: pointer; }
.dropzone.drag { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.toast { position: fixed; bottom: 1.4rem; right: 1.4rem; background: var(--ink); color: var(--bg); padding: 0.8rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.85rem; box-shadow: var(--shadow-md); z-index: 90; display: flex; align-items: center; gap: 0.5rem; }
.toast.error { background: var(--danger); }