/* ============================================================
   Content Editor — light studio theme
   ============================================================ */

:root{
  --paper:     #faf9f6;
  --panel:     #ffffff;
  --ink:       #1b1a17;
  --ink-dim:   #6b6860;
  --line:      #e6e3db;
  --brass:     #b8863f;
  --brass-bg:  #f6ecd9;
  --sage:      #6f8570;
  --danger:    #b23b3b;
  --radius:    10px;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ---------------- Header ---------------- */
.admin-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(250,249,246,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.admin-header-inner{
  max-width:960px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.admin-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:15px;
  letter-spacing:-.01em;
}
.admin-brand-mark{ color:var(--brass); font-size:14px; }
.admin-header-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 16px;
  border-radius:7px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-small{
  padding:7px 12px;
  font-size:12px;
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  cursor:pointer;
  display:inline-block;
}
.btn-small:hover{ border-color:var(--ink); }

.link-btn{
  background:none;
  border:none;
  color:var(--ink-dim);
  font-size:12px;
  text-decoration:underline;
  cursor:pointer;
  padding:0;
}
.link-btn:hover{ color:var(--danger); }

/* ---------------- Main / panels ---------------- */
.admin-main{
  max-width:960px;
  margin:0 auto;
  padding:32px 24px 80px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.panel-head{
  padding:20px 24px 16px;
  border-bottom:1px solid var(--line);
}
.panel-head h2{ font-size:16px; font-weight:600; letter-spacing:-.01em; margin-bottom:4px; }
.panel-head p{ font-size:13px; color:var(--ink-dim); line-height:1.5; }
.panel-body{ padding:20px 24px 24px; }

/* ---------------- Form fields ---------------- */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 20px;
}
.span-2{ grid-column:span 2; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ font-size:12px; font-weight:500; color:var(--ink-dim); }
.field input[type="text"]{
  font-family:var(--font-body);
  font-size:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.field input[type="text"]:focus{ border-color:var(--brass); background:#fff; }

.field textarea{
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  outline:none;
  resize:vertical;
  transition:border-color .15s ease, background .15s ease;
}
.field textarea:focus{ border-color:var(--brass); background:#fff; }

.checkbox-field{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.checkbox-field input[type="checkbox"]{
  width:17px;
  height:17px;
  accent-color:var(--brass);
  cursor:pointer;
}

/* ---------------- Concepts ---------------- */
.concept-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px;
  margin-bottom:18px;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.concept-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.concept-card-header h3{ font-size:15px; font-weight:600; }
.concept-header-actions{ display:flex; align-items:center; gap:8px; }

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .15s ease, background .15s ease, opacity .15s ease;
}
.icon-btn:hover:not(:disabled){ border-color:var(--ink); background:#fff; }
.icon-btn:disabled{ opacity:.3; cursor:default; }

/* ---------------- Page order (per-concept slide reordering) ---------------- */
.order-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.order-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper);
}
.order-row-label{ font-size:13px; font-weight:500; }
.order-row-label.is-disabled-hint{ color:var(--ink-dim); font-style:italic; }
.order-row-btns{ display:flex; gap:6px; flex-shrink:0; }
.order-row-btns .icon-btn{ width:26px; height:26px; font-size:12px; }
.concept-subsection{ display:flex; flex-direction:column; gap:12px; }
.subsection-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brass);
}
.subsection-hint{ font-size:12px; color:var(--ink-dim); margin-top:-8px; }

/* ---------------- Upload slots ---------------- */
.upload-row{ margin-bottom:4px; }
.upload-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.upload-grid.two-col{ grid-template-columns:repeat(2, 1fr); }

.upload-slot{
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--paper);
}
.upload-preview{
  aspect-ratio:1;
  border-radius:6px;
  background:repeating-conic-gradient(#efece3 0% 25%, #f7f5ef 0% 50%) 50% / 14px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px dashed var(--line);
  position:relative;
}
.upload-preview.wide{ aspect-ratio:16/6; }
.upload-preview.swatch-dark{ background:#1c1c1a; background-image:none; }
.upload-preview.swatch-light{ background:#f1efe8; background-image:none; }
.upload-preview.swatch-accent{ background:linear-gradient(135deg, var(--brass), var(--sage)); background-image:none; }
.upload-preview img{ max-width:80%; max-height:80%; object-fit:contain; }
.upload-preview .injected-svg{ width:70%; height:70%; }
.upload-preview .injected-svg svg{ width:100%; height:100%; color:#888; }
.upload-preview.swatch-dark .injected-svg svg{ color:#eee; }
.upload-preview .empty-hint{
  font-size:10px;
  color:var(--ink-dim);
  text-align:center;
  padding:0 8px;
  font-family:var(--font-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.upload-info{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.upload-label{ font-size:12px; font-weight:600; }
.tag-input{
  margin-top:4px;
  width:100%;
  font-family:var(--font-mono);
  font-size:11px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
}

/* ---------------- Palette editor ---------------- */
.palette-editor{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}
.palette-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
}
.palette-row input[type="color"]{
  width:38px;
  height:38px;
  border:none;
  border-radius:6px;
  padding:0;
  cursor:pointer;
  background:none;
  flex-shrink:0;
}
.palette-row input[type="text"].pname{
  flex:1;
  font-size:13px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
}
.palette-row input[type="text"].phex{
  width:110px;
  font-family:var(--font-mono);
  font-size:12px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  text-transform:uppercase;
}
.palette-row .link-btn{ flex-shrink:0; }

/* ---------------- Typography editor ---------------- */
.type-editor-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.type-editor-card{
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.type-editor-card .role-title{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--brass);
}
.type-source-toggle{ display:flex; gap:8px; }
.toggle-btn{
  flex:1;
  padding:8px 10px;
  font-size:12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  text-align:center;
}
.toggle-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.type-row-inline{ display:flex; gap:10px; flex-wrap:wrap; }
.type-row-inline > *{ flex:1; min-width:160px; }

.field-hint{
  font-size:12px;
  line-height:1.5;
  color:var(--ink-2, #6b6b66);
  margin:2px 0 10px;
}

select, .type-row-inline input[type="text"]{
  font-family:var(--font-body);
  font-size:13px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:var(--ink);
  outline:none;
}
select:focus, .type-row-inline input[type="text"]:focus{ border-color:var(--brass); }

.type-preview{
  padding:16px;
  border-radius:6px;
  background:#fff;
  border:1px solid var(--line);
  font-size:26px;
  line-height:1.2;
  min-height:40px;
  word-break:break-word;
}

.font-file-row{ display:flex; align-items:center; gap:10px; }
.font-file-name{ font-size:12px; color:var(--ink-dim); font-family:var(--font-mono); }

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  border-radius:8px;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:100;
  max-width:80vw;
  text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:var(--danger); }

/* ---------------- Footer ---------------- */
.admin-footer{
  padding:16px 4px 0;
  font-size:12px;
  color:var(--ink-dim);
  line-height:1.6;
}
.admin-footer code{
  font-family:var(--font-mono);
  background:var(--brass-bg);
  padding:2px 6px;
  border-radius:4px;
  color:#8a5f22;
}

/* ---------------- Admin access gate ---------------- */
.admin-gate{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--paper);
}
.admin-gate-form{
  width:100%;
  max-width:340px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.admin-gate-eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass);
}
.admin-gate-title{
  font-size:22px;
  font-weight:600;
  letter-spacing:-.01em;
  margin-bottom:4px;
}
.admin-gate-input{
  width:100%;
  font-family:var(--font-body);
  font-size:14px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  outline:none;
  text-align:center;
}
.admin-gate-input:focus{ border-color:var(--brass); }
.admin-gate-error{
  min-height:16px;
  font-size:12px;
  color:var(--danger);
}

/* ---------------- Access / password panel ---------------- */
.access-field-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
}
.access-field-row + .access-field-row{ margin-top:14px; }
.access-field-row-inline{ display:flex; gap:10px; flex-wrap:wrap; }
.access-field-row-inline input[type="password"]{
  flex:1;
  min-width:180px;
  font-family:var(--font-body);
  font-size:14px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
}
.access-status{ font-size:12px; color:var(--ink-dim); }

/* ---------------- Responsive ---------------- */
@media (max-width: 720px){
  .grid-2{ grid-template-columns:1fr; }
  .span-2{ grid-column:span 1; }
  .upload-grid{ grid-template-columns:repeat(2, 1fr); }
  .admin-header-inner{ flex-direction:column; align-items:stretch; }
  .admin-header-actions{ justify-content:stretch; }
  .admin-header-actions .btn{ flex:1; }
}