:root{
  --paper:#ECEEE9; --card:#fff; --ink:#1C211E; --muted:#5B635D; --line:#D3D8D0;
  --bin:#21493B; --bin-deep:#163328; --red:#D23A2A; --yellow:#EFBB24; --focus:#1D6FE0;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.4}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none !important}
body{display:flex;flex-direction:column}

.bar{display:flex;align-items:center;gap:10px;background:var(--bin-deep);color:#fff;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));flex-wrap:wrap}
.bar .back{background:none;border:0;color:#fff;font-size:1.9rem;line-height:1;padding:0 6px;cursor:pointer}
.bar .title{flex:1;min-width:120px}
.bar .title b{display:block;font-family:var(--cond);font-weight:700;font-size:1.25rem;line-height:1.1}
.bar .title small{opacity:.7}
.bar.intour .title{display:none}
.bar.intour .actions{flex:1}
#tourSel{display:block;max-width:100%;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 8px center;color:#fff;border:1.5px solid rgba(255,255,255,.35);border-radius:8px;padding:3px 26px 3px 8px;font-family:var(--cond);font-weight:700;font-size:1.2rem;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
#tourSel option{color:var(--ink)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions button,.me{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:5px 12px;font-family:var(--cond);font-weight:600;cursor:pointer;position:relative}
.actions button[aria-pressed="true"]{background:#fff;color:var(--bin-deep);border-color:#fff}
.actions .icon{padding:5px 10px}
.actions i{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;border-radius:999px;font-style:normal;font-size:.75rem;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 4px}

main{flex:1;min-height:0;display:flex;flex-direction:column}
main iframe{flex:1;width:100%;border:0;background:#fff}
.wrap{max-width:820px;width:100%;margin:0 auto;padding:20px 16px 40px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
h1{font-family:var(--cond);font-weight:700;font-size:1.8rem;margin:0 0 6px}
h2{font-family:var(--cond);font-weight:700;font-size:1.3rem;margin:0 0 10px}
.muted{color:var(--muted)}
.btn{background:var(--bin);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-family:var(--cond);font-weight:700;font-size:1rem;cursor:pointer}
.btn.ghost{background:#fff;color:var(--bin);border:1.5px solid var(--bin)}
.btn.sm{padding:5px 10px;font-size:.92rem}
.btn.warn{background:#fff;color:var(--red);border:1.5px solid var(--red)}
.f{display:block;margin:0 0 12px}
.f span{display:block;font-weight:600;margin-bottom:4px}
.f input,.f select,.f textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:9px 10px;background:#fff}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row .grow{flex:1;min-width:160px}
.tours{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tour{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;cursor:pointer}
.tour:hover{border-color:var(--bin)}
.tour b{display:block;font-family:var(--cond);font-size:1.2rem}
.tour small{color:var(--muted)}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-family:var(--cond);font-weight:700;font-size:.85rem;background:#E8EBE6;color:var(--muted)}
.pill.new{background:var(--red);color:#fff}
.demo{background:#FFF6CC;border:1px solid var(--yellow);border-radius:10px;padding:10px 12px;margin-bottom:14px}

.panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:20;display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.18)}
.phead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);padding-top:max(12px,env(safe-area-inset-top))}
.phead h2{margin:0}
.x{background:none;border:0;font-size:1.6rem;cursor:pointer;line-height:1}
.pbody{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column}

.changes{list-style:none;margin:0;padding:0}
.changes li{padding:9px 0;border-bottom:1px solid var(--line)}
.changes li small{display:block;color:var(--muted)}
.changes li.new{background:#FFF6CC;margin:0 -14px;padding:9px 14px}

.chat{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.msg{max-width:85%;background:#F1F3EF;border-radius:12px;padding:8px 10px;align-self:flex-start}
.msg.mine{align-self:flex-end;background:#DCEFE1}
.msg small{display:block;color:var(--muted);font-size:.8rem}
.msg img{display:block;max-width:100%;border-radius:8px;margin-top:4px;cursor:zoom-in}
.msg p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.compose{display:flex;gap:6px;align-items:flex-end;border-top:1px solid var(--line);padding-top:10px}
.compose textarea{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:8px;resize:none;min-height:40px;max-height:120px}
.compose label{cursor:pointer;font-size:1.4rem;padding:4px}
.ppl{list-style:none;padding:0;margin:0 0 14px}
.ppl li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.ppl li .grow{flex:1;min-width:0}
.ppl li small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.ppl select{border:1.5px solid var(--line);border-radius:8px;padding:4px}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;transition:transform .2s;z-index:30;max-width:90%}
.toast.on{transform:translateX(-50%) translateY(0)}
.login{max-width:420px}
.actions .ic{display:none}
.me.icon{width:34px;height:34px;padding:0;border-radius:50%}
@media (max-width:640px){
  .bar{flex-wrap:nowrap;gap:6px;padding:6px 8px;padding-top:max(6px,env(safe-area-inset-top))}
  .bar .title small{display:none}
  .bar .title b{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bar.intour .actions{flex:1}
  .actions{flex-wrap:nowrap;gap:4px}
  .actions button{padding:4px 9px}
  .actions .lbl{display:none}
  .actions .ic{display:inline}
  #buildBtn,[data-view="book"]{display:none !important}
  .me{padding:4px 9px;max-width:42px;overflow:hidden;white-space:nowrap;text-overflow:clip}
}
.title-in{width:100%;margin-top:6px;border:1.5px solid var(--line);border-radius:8px;padding:6px 8px}
.offbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:#6A4D00;color:#fff;text-align:center;padding:6px 10px calc(6px + env(safe-area-inset-bottom));font-size:.85rem}

/* back to the builder after a preview */
.backbuild{position:fixed;left:16px;bottom:16px;z-index:30;box-shadow:0 2px 10px rgba(0,0,0,.25)}

body.inbuild #bar{display:none}
.ticks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-4px 0 12px}
.tick{display:flex;align-items:center;gap:7px;font-size:.92rem;cursor:pointer}
.tick input{width:18px;height:18px;margin:0;accent-color:var(--green,#2d4a3e)}