.routesheet-page{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:14px;
  width:100%;
  height:100%;
  min-height:0;
  color:rgba(255,255,255,.92);
}

.routesheet-sidebar,
.routesheet-main{
  min-height:0;
  background:rgba(15,18,24,.94);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}

.routesheet-sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  overflow:auto;
}

.routesheet-brand{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.routesheet-brand h1{
  margin:0;
  font-size:24px;
}

.routesheet-brand p{
  margin:0;
  opacity:.7;
  font-size:13px;
}

.routesheet-sidebar-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}

.routesheet-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  font-size:13px;
  opacity:.95;
}

.rs-boards-list,
.rs-presence-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rs-board-card,
.rs-user-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px 12px;
}

.rs-board-card{
  cursor:pointer;
  transition:.16s ease;
}

.rs-board-card:hover{
  border-color:rgba(255,255,255,.15);
  transform:translateY(-1px);
}

.rs-board-card.active{
  border-color:rgba(59,130,246,.8);
  box-shadow:0 0 0 1px rgba(59,130,246,.28) inset;
  background:rgba(59,130,246,.12);
}

.rs-board-title-sm{
  font-weight:700;
  font-size:14px;
}

.rs-board-sub-sm,
.rs-user-sub{
  font-size:12px;
  opacity:.68;
  margin-top:4px;
}

.rs-empty{
  opacity:.6;
  font-size:13px;
}

.rs-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  border:1px solid rgba(255,255,255,.05);
}

.rs-meta-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}

.routesheet-main{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.routesheet-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.routesheet-title-wrap{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.rs-board-title{
  background:transparent;
  border:none;
  outline:none;
  color:#fff;
  font-size:22px;
  font-weight:800;
  padding:0;
  min-width:360px;
}

.rs-board-sub{
  font-size:12px;
  opacity:.68;
}

.routesheet-topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.routesheet-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;
}

.rs-tool{
  border:none;
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:9px 12px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}

.rs-tool:hover{
  background:rgba(255,255,255,.1);
}

.rs-tool.active{
  background:linear-gradient(135deg,#2563eb,#3b82f6);
}

.rs-toolbar-sep{
  width:1px;
  height:28px;
  background:rgba(255,255,255,.12);
  margin:0 4px;
}

.rs-field-inline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  opacity:.95;
  background:rgba(255,255,255,.04);
  padding:7px 10px;
  border-radius:12px;
}

.routesheet-stage-shell{
  flex:1;
  min-height:0;
  padding:14px;
  overflow:hidden;
}

.routesheet-stage{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255,255,255,.02), rgba(0,0,0,.12));
  background-size:40px 40px, 40px 40px, auto;
  border:1px solid rgba(255,255,255,.06);
  position:relative;
  user-select:none;
}

.routesheet-canvas{
  position:absolute;
  left:0;
  top:0;
  width:1600px;
  height:900px;
  transform-origin:0 0;
}

.rs-bg-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

.rs-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

.rs-svg .rs-object{
  cursor:pointer;
}

.rs-svg .rs-selected{
  filter:drop-shadow(0 0 6px rgba(59,130,246,.8));
}

.rs-cursor-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.rs-remote-cursor{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:5;
}

.rs-remote-cursor-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:#3b82f6;
  border:2px solid #fff;
  box-shadow:0 0 8px rgba(0,0,0,.35);
}

.rs-remote-cursor-label{
  margin-top:4px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(17,24,39,.95);
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
  font-size:11px;
  font-weight:700;
}

.rs-ghost{
  opacity:.7;
  pointer-events:none;
}

.rs-ping{
  animation:rsPing 1.2s ease-out forwards;
}

@keyframes rsPing{
  0%{ opacity:1; transform:scale(.25); }
  100%{ opacity:0; transform:scale(2.2); }
}

.rs-modal-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,8,20,.72);
  backdrop-filter:blur(6px);
  z-index:1200;
}

.rs-modal-backdrop.open{
  display:flex;
}

.rs-modal{
  width:min(100%, 520px);
  background:linear-gradient(180deg, rgba(15,18,24,.98), rgba(10,13,19,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  overflow:hidden;
}

.rs-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.rs-modal-header h3{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:#fff;
}

.rs-modal-header p{
  margin:6px 0 0;
  font-size:13px;
  color:rgba(255,255,255,.64);
}

.rs-modal-close{
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  transition:.16s ease;
  flex:0 0 auto;
}

.rs-modal-close:hover{
  background:rgba(255,255,255,.12);
}

.rs-modal-body{
  padding:18px 20px;
}

.rs-modal-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rs-modal-field span{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

.rs-modal-field input,
.rs-modal-field textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#fff;
  padding:12px 14px;
  outline:none;
  font-size:14px;
  transition:.16s ease;
  resize:vertical;
}

.rs-modal-field input::placeholder,
.rs-modal-field textarea::placeholder{
  color:rgba(255,255,255,.38);
}

.rs-modal-field input:focus,
.rs-modal-field textarea:focus{
  border-color:rgba(59,130,246,.8);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
  background:rgba(255,255,255,.065);
}

.rs-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 20px 18px;
}

.rs-modal-footer .btn-light,
.rs-modal-footer .btn-primary{
  min-width:130px;
}