body.maker { display: grid; grid-template-columns: 300px 1fr 360px; height: 100vh; overflow: hidden;
              font-family: Inter, system-ui, sans-serif; font-size: 14px; background: #0b0b12; }
.maker h1 { margin: .1em 0 .2em; font: 700 34px/1 "Cormorant Garamond", Georgia, serif; }
#side, #editor { overflow: auto; padding: 18px 16px; background: #12121c; border-right: 1px solid #ffffff14; }
#editor { border-right: 0; border-left: 1px solid #ffffff14; }
#side header p { margin: 0 0 14px; color: #a9a8bd; }
.back { color: #a9a8bd; text-decoration: none; font-size: 13px; }
.field { display: grid; gap: 4px; margin: 0 0 12px; color: #a9a8bd; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.field input, .wall textarea { font: 15px/1.4 Inter, system-ui, sans-serif; color: #f2eee6; background: #0b0b12; border: 1px solid #ffffff24;
                               border-radius: 6px; padding: 8px 10px; text-transform: none; letter-spacing: 0; }
.field input:focus, .wall textarea:focus { outline: 2px solid var(--gold); border-color: transparent; }
#worlds { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
#worlds li { display: flex; align-items: center; border-radius: 8px; }
#worlds li.on { background: #ffffff12; }
#worlds .pick { flex: 1; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: #f2eee6; padding: 6px; text-align: left; }
#worlds img, .noplanet { width: 44px; height: 44px; border-radius: 50%; flex: none; background: #333; }
#worlds .ops { display: flex; gap: 2px; padding-right: 6px; opacity: .5; }
#worlds li:hover .ops, #worlds li.on .ops { opacity: 1; }
#worlds .ops button { border: 0; background: none; color: #f2eee6; width: 24px; height: 24px; border-radius: 4px; }
#worlds .ops button:hover { background: #ffffff1a; }
#empty { color: #a9a8bd; }
.add { display: block; text-align: center; padding: 12px; border: 1px dashed #ffffff40; border-radius: 8px; cursor: pointer; margin-bottom: 10px; }
.add:hover { border-color: var(--gold); color: var(--gold); }
.quiet { border: 1px solid #ffffff24; background: none; color: #d8d6e6; padding: 8px 12px; border-radius: 8px; width: 100%; font-size: 13px; }
.primary { width: 100%; padding: 12px; border: 0; border-radius: 8px; background: var(--gold); color: #1e1a16; font-weight: 600; font-size: 15px; }
.foot { margin-top: 18px; }
.tiny { color: #8d8ca3; font-size: 12px; }
main { position: relative; }
main #stage { position: absolute; inset: 0; }
.floating { position: absolute; right: 12px; bottom: 12px; width: auto; background: #0008; }
.wall { display: grid; gap: 4px; margin-bottom: 12px; }
.wall > span { display: flex; justify-content: space-between; align-items: center; color: #a9a8bd; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.lookbtn { border: 0; background: #ffffff14; color: #f2eee6; border-radius: 4px; padding: 2px 8px; font-size: 11px; }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: 520px; background: #f2eee6; color: #111;
         padding: 10px 16px; border-radius: 10px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.on { opacity: 1; }
@media (max-width: 1000px) {
  body.maker { grid-template-columns: 1fr; grid-template-rows: auto 55vh auto; height: auto; overflow: auto; }
  #side, #editor { border: 0; }
  main { height: 55vh; }
}