:root{
  --a-olive-deep:#37451F; --a-olive:#59703C; --a-gold:#C7A44A; --a-gold-soft:#E4D4A7;
  --a-ivory:#FBF7EE; --a-ivory-warm:#F3ECDC; --a-ink:#24301A; --a-danger:#B34A3C;
}
*{ box-sizing:border-box; }
body{
  margin:0; font-family:'Jost', system-ui, sans-serif; background:var(--a-ivory-warm); color:var(--a-ink);
}
h1,h2,h3{ font-family:'Cormorant Garamond', serif; color:var(--a-olive-deep); margin:0 0 4px; }

#admin-gate{
  position:fixed; inset:0; background:var(--a-olive-deep); color:var(--a-ivory);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; z-index:200;
}
#admin-gate input{ padding:12px 16px; border-radius:10px; border:1px solid var(--a-gold-soft); font-size:15px; width:220px; text-align:center; }
#admin-gate button{ padding:12px 28px; border-radius:40px; background:var(--a-gold); color:var(--a-olive-deep); font-weight:600; border:none; cursor:pointer; }
#admin-gate.hidden{ display:none; }

.admin-header{
  position:sticky; top:0; z-index:20; background:var(--a-olive-deep); color:var(--a-ivory);
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  box-shadow:0 6px 20px -12px rgba(0,0,0,.4);
}
.admin-header .brand{ font-family:'Cormorant Garamond', serif; font-size:20px; color:var(--a-gold-soft); }
.admin-header .brand a{ color:var(--a-gold-soft); text-decoration:none; font-size:12px; opacity:.8; margin-left:10px; }
.header-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.btn{
  padding:10px 18px; border-radius:30px; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--a-gold-soft); background:transparent; color:var(--a-ivory); cursor:pointer; transition:all .2s;
}
.btn:hover{ background:rgba(228,212,167,.12); }
.btn-primary{ background:var(--a-gold); color:var(--a-olive-deep); border-color:var(--a-gold); font-weight:600; }
.btn-primary:hover{ background:#d9b95c; }
.btn-danger{ border-color:var(--a-danger); color:#f3c6bd; }
.btn-danger:hover{ background:rgba(179,74,60,.15); }
.btn-small{ padding:6px 12px; font-size:11px; }

#save-indicator{ font-size:11px; color:var(--a-gold-soft); opacity:0; transition:opacity .3s; align-self:center; }
#save-indicator.show{ opacity:1; }

.admin-layout{ display:flex; gap:0; align-items:flex-start; }
.admin-form-panel{ flex:1; min-width:0; padding:24px 20px 120px; max-width:720px; margin:0 auto; }
.admin-preview-panel{
  position:sticky; top:64px; width:380px; flex-shrink:0; height:calc(100vh - 64px);
  display:flex; align-items:center; justify-content:center; background:#22301a; padding:20px;
}
.phone-frame{
  width:300px; height:610px; border-radius:38px; border:8px solid #12180b; background:#000;
  overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); position:relative;
}
.phone-frame iframe{ width:100%; height:100%; border:none; }
.preview-label{ position:absolute; top:-30px; left:0; right:0; text-align:center; color:var(--a-gold-soft); font-size:11px; letter-spacing:.15em; text-transform:uppercase; }

.section-card{
  background:#fff; border:1px solid rgba(199,164,74,.25); border-radius:18px; padding:22px 20px;
  margin-bottom:18px; box-shadow:0 10px 30px -22px rgba(55,69,31,.5);
}
.section-card summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.section-card summary::-webkit-details-marker{ display:none; }
.section-card summary .chev{ transition:transform .25s; color:var(--a-gold); font-size:14px; }
.section-card[open] summary .chev{ transform:rotate(90deg); }
.section-card .section-sub{ font-size:12px; color:var(--a-olive); opacity:.75; margin-top:2px; }
.section-body{ margin-top:18px; display:flex; flex-direction:column; gap:16px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--a-olive); }
.field input[type=text], .field input[type=number], .field input[type=tel], .field input[type=url],
.field input[type=datetime-local], .field textarea, .field select{
  padding:11px 13px; border-radius:10px; border:1px solid #dcd6c2; font-size:14px; font-family:inherit;
  background:var(--a-ivory); color:var(--a-ink);
}
.field textarea{ resize:vertical; min-height:64px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-hint{ font-size:11px; color:#8a8266; }

.color-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.color-field{ display:flex; align-items:center; gap:10px; border:1px solid #eee2c2; border-radius:12px; padding:8px 10px; }
.color-field input[type=color]{ width:38px; height:38px; border:none; border-radius:8px; padding:0; background:none; cursor:pointer; }
.color-field .cf-label{ font-size:12px; color:var(--a-ink); }
.color-field .cf-var{ font-size:10px; color:#a89f7a; display:block; }

.image-field{ display:flex; gap:14px; align-items:center; }
.image-field .thumb{ width:64px; height:64px; border-radius:10px; object-fit:cover; border:1px solid #dcd6c2; background:#eee; flex-shrink:0; }
.image-field .thumb.round{ border-radius:50%; }
.image-field .img-actions{ display:flex; flex-direction:column; gap:6px; }
.image-field input[type=file]{ font-size:12px; }

.array-list{ display:flex; flex-direction:column; gap:14px; }
.array-item{ border:1px solid #ece4c8; border-radius:14px; padding:14px; background:#fffdf6; position:relative; }
.array-item .array-item-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.array-item .array-item-head span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--a-gold); }
.remove-btn{ color:var(--a-danger); font-size:11px; cursor:pointer; border:1px solid rgba(179,74,60,.4); border-radius:20px; padding:4px 10px; background:none; }
.add-btn{ align-self:flex-start; }

.gallery-editor-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gallery-editor-item{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1; border:1px solid #dcd6c2; }
.gallery-editor-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-editor-item .g-remove{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(179,74,60,.9);
  color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none;
}
.gallery-add-tile{
  aspect-ratio:1; border-radius:10px; border:1px dashed var(--a-olive); display:flex; align-items:center; justify-content:center;
  color:var(--a-olive); font-size:24px; cursor:pointer; position:relative;
}
.gallery-add-tile input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.footer-note{ text-align:center; font-size:11px; color:#8a8266; margin-top:30px; line-height:1.7; }

@media (max-width: 980px){
  .admin-layout{ flex-direction:column-reverse; }
  .admin-preview-panel{ position:static; width:100%; height:auto; padding:24px 0 6px; }
  .admin-form-panel{ max-width:100%; padding:20px 16px 120px; }
}