/* Plain, legible admin styling. Deliberately NOT the luxury site design —
   this is an internal tool. Keep it boring and readable. */
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, sans-serif; color: #1c1c1c; background: #f4f4f3; }
a { color: #1a5; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
  background: #1c1c1c; color: #f4f4f3; }
.topbar .brand { font-size: 1.05rem; letter-spacing: .02em; }
.topbar .brand em { color: #c9a84c; font-style: normal; }
.topbar .pub { margin-left: auto; }
.btn-publish { background: #1a7; color: #fff; border: 0; padding: .45rem .9rem;
  border-radius: 6px; font: inherit; cursor: pointer; }
.topbar .logout button { background: none; border: 1px solid #555; color: #ccc;
  padding: .4rem .7rem; border-radius: 6px; cursor: pointer; font: inherit; }

.layout { display: flex; min-height: calc(100vh - 49px); }
.side { width: 210px; background: #fff; border-right: 1px solid #ddd;
  padding: .8rem 0; display: flex; flex-direction: column; }
.side a { padding: .5rem 1.1rem; color: #333; }
.side a:hover { background: #eee; text-decoration: none; }
.content { flex: 1; padding: 1.5rem 2rem; max-width: 980px; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid #eee; }
.row-field { margin: 0 0 1rem; }
.row-field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.row-field .help { font-weight: 400; color: #777; font-size: .85em; }
input[type=text], textarea, select { width: 100%; padding: .5rem;
  border: 1px solid #ccc; border-radius: 5px; font: inherit; }
textarea { min-height: 5rem; }
.btn { background: #1a7; color: #fff; border: 0; padding: .5rem 1rem;
  border-radius: 6px; cursor: pointer; font: inherit; }
.btn-secondary { background: #ddd; color: #222; }
.btn-danger { background: #c33; color: #fff; }
.flash { padding: .6rem .9rem; border-radius: 6px; margin: 0 0 1rem; }
.flash.error { background: #fde; color: #900; }
.flash.success { background: #efd; color: #161; }
.flash.warning { background: #ffe9c7; color: #7a4; }
.muted { color: #888; }
.builder-module { border: 1px solid #ccc; border-radius: 7px; padding: .8rem;
  margin: 0 0 .7rem; background: #fff; }
.builder-module h3 { margin: 0 0 .5rem; font-size: .95rem; }
/* (The old per-editor preview pane was removed — the Studio's left pane is
   the single live preview now.) */
.iconpick-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.iconpick-opt { width: 42px; height: 42px; display: flex; align-items: center;
  justify-content: center; border: 1px solid #ccc; border-radius: 6px;
  background: #fff; cursor: pointer; padding: 0; }
.iconpick-opt svg { width: 22px; height: 22px; stroke: #333; fill: none;
  stroke-width: 1.6; }
.iconpick-opt.sel { border-color: #1a7;
  box-shadow: 0 0 0 2px rgba(26,161,121,.35); }
.iconpick-adv { margin-top: .4rem; }
.iconpick-adv textarea { width: 100%; font-family: ui-monospace, monospace; }

/* image_list editor: one row per photo (thumb · alt · reorder/remove) */
.il-rows { display: flex; flex-direction: column; gap: .5rem; }
.il-row { display: flex; align-items: center; gap: .6rem;
  border: 1px solid #ddd; border-radius: 7px; padding: .45rem .55rem;
  background: #fff; }
.il-thumb { width: 72px; height: 54px; object-fit: cover;
  border-radius: 4px; border: 1px solid #ccc; background: #eee; flex: none; }
.il-row .il-alt { flex: 1; }
.il-btns { display: flex; gap: .25rem; flex: none; }
.il-btns .btn { padding: .3rem .55rem; }
.il-add { display: flex; align-items: center; gap: .6rem; }

/* Media Library picker used by video fields. */
.media-picker .mp-actions { display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin-top: .4rem; }
.media-picker .mp-library-link { font-size: .85rem; }
.mp-modal[hidden] { display: none; }
.mp-modal { position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.55); overflow: auto; padding: 2rem 1rem; }
.mp-dialog { background: #f4f4f3; max-width: 760px; margin: 0 auto;
  border-radius: 8px; padding: 1rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.35); }
.mp-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.mp-head strong { white-space: nowrap; }
.mp-head input { max-width: 14rem; margin-left: auto; }
.mp-close { background: none; border: 0; color: #555; cursor: pointer;
  font: inherit; font-size: 1.4rem; line-height: 1; }
.mp-list { display: flex; flex-direction: column; gap: .45rem; max-height: 62vh;
  overflow: auto; }
.mp-item { display: flex; align-items: center; gap: .65rem; width: 100%;
  text-align: left; background: #fff; border: 1px solid #ddd; border-radius: 7px;
  padding: .45rem; cursor: pointer; }
.mp-item:hover { border-color: #c9a84c; }
.mp-item img, .mp-kind { width: 88px; height: 58px; object-fit: cover;
  border-radius: 4px; background: #eee; flex: none; display: flex;
  align-items: center; justify-content: center; color: #777; }
.mp-copy { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.mp-copy small { color: #777; word-break: break-all; }