/* Admin styling — echoes the site's dark/gold palette so the owner recognises
   it, but stays a plain, dense, form-first tool rather than a showpiece. */
:root{
  --bg:#111311; --panel:#191c19; --panel2:#1f231f; --line:rgba(255,255,255,.13);
  --text:#EDEAE4; --muted:rgba(237,234,228,.6);
  --gold:#AE9A6C; --gold-light:#CFC095;
  --ok:#7FB069; --err:#D9736A;
  --r:8px;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
/* Any rule below that sets `display` outranks the UA stylesheet's
   [hidden]{display:none}, which would leave hidden panels rendering. The login
   gate and the whole editor are toggled by that attribute, so this rule is what
   actually keeps the editor off screen until sign-in. */
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5}
button,input,textarea,select{font:inherit;color:inherit}

/* ---------- sign in ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:44px 40px;text-align:center;max-width:360px}
.loginbox img{border-radius:50%}
.loginbox h1{font-size:1.3rem;margin:16px 0 6px;letter-spacing:.02em}
.loginbox p{color:var(--muted);margin:0 0 24px}

/* ---------- chrome ---------- */
.app{display:flex;flex-direction:column;height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
.brand img{border-radius:50%}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem;margin-left:4px}
.linkbtn{background:none;border:0;color:var(--gold-light);cursor:pointer;text-decoration:underline;padding:0}

.btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:8px 14px;border-radius:var(--r);cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover:not(:disabled){border-color:var(--gold);background:#262b26}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#14170f;font-weight:700}
.btn.primary:hover:not(:disabled){background:var(--gold-light);border-color:var(--gold-light)}
.btn.ghost{background:transparent}
.btn.small{padding:5px 10px;font-size:.85rem}
a.btn{text-decoration:none;display:inline-block}

.status{margin:0;padding:9px 18px;font-size:.88rem;border-bottom:1px solid var(--line);background:var(--panel2)}
.status.ok{color:var(--ok)}
.status.error{color:var(--err)}

/* ---------- two-pane body ---------- */
.body{display:grid;grid-template-columns:250px 1fr;flex:1;min-height:0}
.sections{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:10px 0}
.navbtn{display:block;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;
  padding:9px 16px;color:var(--muted);cursor:pointer}
.navbtn:hover{color:var(--text);background:rgba(255,255,255,.03)}
.navbtn.on{color:var(--gold-light);border-left-color:var(--gold);background:rgba(174,154,108,.09);font-weight:600}

.pane{overflow-y:auto;padding:24px 28px 80px;max-width:760px}
.panehead h2{margin:0 0 4px;font-size:1.18rem;letter-spacing:.01em}
.panehead p{margin:0 0 22px;color:var(--muted)}

/* ---------- fields ---------- */
.field{margin-bottom:20px}
.field.row{margin-bottom:12px}
.flabel{display:block;margin-bottom:6px;font-weight:600;font-size:.88rem}
.flabel small{display:block;font-weight:400;color:var(--muted);margin-top:2px}
.finput{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 11px;resize:vertical}
.finput:focus{outline:none;border-color:var(--gold)}
.finput.short{width:auto;min-width:180px}
.finput.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
.warn{display:block;color:var(--gold-light);margin-top:5px;font-size:.8rem}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.9rem}
.check input{width:16px;height:16px;accent-color:var(--gold)}

/* image picker */
.imgrow{display:flex;gap:14px;align-items:flex-start}
.thumb{width:104px;height:78px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--panel2)}
.path{display:block;margin-top:7px;color:var(--muted);font-size:.76rem;word-break:break-all}

/* string lists */
.list{display:flex;flex-direction:column;gap:8px;margin-bottom:9px}
.litem{display:flex;gap:8px;align-items:flex-start}
.litools{display:flex;gap:4px;flex-shrink:0}
.icobtn{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  width:30px;height:32px;border-radius:6px;cursor:pointer;line-height:1}
.icobtn:hover:not(:disabled){color:var(--text);border-color:var(--gold)}
.icobtn:disabled{opacity:.3;cursor:not-allowed}

/* repeaters */
.repeater{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rcard>summary{cursor:pointer;padding:10px 13px;list-style:none}
.rcard>summary::-webkit-details-marker{display:none}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rhead strong{font-size:.9rem;font-weight:600}
.rbody{padding:4px 13px 14px;border-top:1px solid var(--line)}
.rbody .field{margin-bottom:14px}

/* Editors panel */
.navbtn-sep{margin-top:10px;border-top:1px solid var(--line);padding-top:14px}
.muted{color:var(--muted)}
.ulist{display:flex;flex-direction:column;gap:9px;margin-bottom:34px}
.ucard{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.ucard strong{font-size:.92rem;font-weight:600}
.umeta{display:block;color:var(--muted);margin-top:3px;font-size:.8rem}
.tag-you{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:20px;font-size:.68rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(174,154,108,.2);color:var(--gold-light)}
.btn.danger:hover:not(:disabled){border-color:var(--err);color:var(--err)}
.invite{border-top:1px solid var(--line);padding-top:22px;max-width:520px}
.invite h3{margin:0 0 5px;font-size:1rem}
.invite p{margin:0 0 14px}
.inviterow{display:flex;gap:9px;margin-bottom:12px}
.inviterow .finput{flex:1}

@media(max-width:760px){
  .body{grid-template-columns:1fr}
  .sections{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;padding:0}
  .navbtn{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;width:auto}
  .navbtn.on{border-left:0;border-bottom-color:var(--gold)}
  .pane{padding:18px 16px 60px}
}