:root{ --bg:#0b0d10; --card:#12161b; --muted:#6b7280; --fg:#e5e7eb; --accent:#22c55e; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--fg)}
.auth .card{max-width:420px;margin:10vh auto;padding:24px;background:var(--card);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
label{display:block;margin:10px 0;font-size:14px;color:var(--muted)} input,select,button{width:100%;padding:12px;border-radius:12px;border:1px solid #2a2f36;background:#0f1318;color:var(--fg)}
button{cursor:pointer;background:var(--accent);border:none;color:#001c0a;font-weight:700}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0e1319;border-bottom:1px solid #1f2937;position:sticky;top:0;z-index:10}
.brand{font-weight:800}
.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 56px)}
.sidebar{border-right:1px solid #1f2937;padding:12px;overflow:auto}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{padding:8px;border-radius:10px;background:#0f1318;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.sidebar .title{flex:1}
.main{padding:12px}
.controls .row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.switch{display:flex;align-items:center;gap:8px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{padding:8px 12px;background:#0f1318;border:1px solid #263040;border-radius:999px;color:var(--fg)}
.mapwrap{display:grid;grid-template-columns:1fr 340px;gap:8px}
#map{width:100%;height:64vh;border-radius:14px;overflow:hidden;border:1px solid #1f2937}
.panel{background:#0f1318;border:1px solid #1f2937;border-radius:14px;padding:8px;height:64vh;overflow:auto}
.point{padding:8px;border-bottom:1px dashed #243040}
@media (max-width:900px){ .layout{grid-template-columns:1fr} .mapwrap{grid-template-columns:1fr} #map,.panel{height:60vh} .sidebar{order:2} }

/* Drag&Drop */
.point{position:relative}
.point.dragging{opacity:.6}
.point.drop-target{outline:2px dashed var(--accent)}

/* Barra info percorso + stampa */
#routeInfo{margin-top:8px;padding:8px;border:1px solid #1f2937;border-radius:12px;background:#0f1318}
#printBtn{width:100%;margin-top:8px}

@media print{
  header.topbar, .sidebar, .controls, #addPointBtn, #shareLink, #shareToggle, #placeInput, #travelMode { display:none !important; }
  body{background:#fff;color:#000}
  #map{height:0;display:none}
  .panel{border:none}
  .print-steps{margin-top:12px}
  .print-steps h3{margin:12px 0 6px 0}
}