/* ================= componentes novos: login, sync, config ================= */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px; gap:14px; align-content:center}
.gatecard{background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow);
  padding:32px 28px; width:100%; max-width:400px; text-align:center}
.gatemark{width:46px; height:46px; margin:0 auto 16px; border-radius:12px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-family:"Shippori Mincho",serif; font-weight:700; font-size:23px}
.gatecard h1{font-size:23px}
.gatesub{font-size:12.5px; color:var(--muted); letter-spacing:.09em; text-transform:uppercase; margin:6px 0 22px}
.gatetxt{font-size:14px; color:var(--muted); margin:0 0 16px; text-align:left}
.gatemsg{margin-top:14px; font-size:13.5px; text-align:left; display:none}
.gatemsg.on{display:block}
.gatemsg.ok{color:var(--ok)}
.gatemsg.err{color:var(--accent)}
.gatefoot{font-size:12px; color:var(--faint); margin:0}

.syncdot{width:9px; height:9px; border-radius:50%; background:var(--warn); flex:none; margin-right:2px;
  box-shadow:0 0 0 3px var(--warn-soft)}
.syncdot[data-state="off"]{background:var(--faint); box-shadow:0 0 0 3px var(--surface-2)}

.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:200; max-width:calc(100vw - 32px);
  background:var(--text); color:var(--bg); padding:11px 18px; border-radius:999px; font-size:13.5px;
  box-shadow:0 8px 30px -8px rgba(0,0,0,.5); animation:toastin .2s ease both}
@keyframes toastin{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1; transform:translate(-50%,0)}}

.who{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted)}
.avatar{width:28px; height:28px; border-radius:50%; background:var(--surface-3); color:var(--text);
  display:grid; place-items:center; font-weight:700; font-size:12.5px; flex:none}
.rowedit{display:grid; grid-template-columns:minmax(120px,1fr) minmax(180px,2fr) auto; gap:10px; align-items:end;
  padding:12px 0; border-bottom:1px solid var(--border)}
.rowedit:last-child{border-bottom:none}
@media(max-width:560px){.rowedit{grid-template-columns:1fr}}
.reslist{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.codebox{font-family:"JetBrains Mono",monospace; font-size:12.5px; word-break:break-all}

/* ---------- roteiro: parada visitada e edição ---------- */
.stop.visitado h4{color:var(--muted)}
.stop.visitado p{color:var(--faint)}
.stop.visitado .node{background:var(--ok); border-color:var(--ok); color:#fff}
.stop.visitado::after{content:""; position:absolute; left:-23px; top:26px; bottom:-4px; width:3px;
  background:var(--ok); border-radius:2px; opacity:.55}
.stop{position:relative}
.btn.visitou{background:var(--ok-soft); border-color:var(--ok); color:var(--ok); font-weight:700}
.btn.visitou:hover{color:var(--ok)}
.stop.editando{background:var(--surface-2); border:1px dashed var(--border); border-radius:12px;
  padding:14px 16px 16px; margin-bottom:14px}
.stop.editando .node{background:var(--surface-3); border-color:var(--faint); color:var(--muted)}
.stop.editando textarea{resize:vertical; min-height:60px; font-family:inherit}
.ajuda{font-size:12.5px; color:var(--faint); margin-top:5px; line-height:1.45}
.stop.editando optgroup{font-style:normal; font-weight:700}
.mover{display:inline-flex; gap:4px}
.mover .btn{padding:4px 8px; min-width:30px; justify-content:center; font-size:13px}
.mover .btn[disabled]{opacity:.35; cursor:default}
.mover .btn[disabled]:hover{border-color:var(--border); color:inherit}
.chk .del{align-self:center; flex:none}