.roadmap-title{
  font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:700;
  color:var(--text);margin-bottom:14px;line-height:1.1;
}
.roadmap-intro{
  font-size:1rem;line-height:1.7;color:var(--text2);
  max-width:680px;margin-bottom:36px;white-space:pre-wrap;
}


.roadmap-list{position:relative;padding:10px 0 20px;}
.roadmap-list::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:0;bottom:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 30%, transparent) 60%,
    color-mix(in srgb, var(--accent) 6%, transparent));
}

.roadmap-item{
  position:relative;display:flex;align-items:center;
  min-height:96px;margin-bottom:26px;
}
.roadmap-item:last-child{margin-bottom:0;}

.roadmap-node{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:#0d1228;background:var(--rm-color,var(--accent));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--rm-color,var(--accent)) 22%, transparent),
    0 0 16px 2px color-mix(in srgb, var(--rm-color,var(--accent)) 45%, transparent);
  z-index:2;
}

.roadmap-card{
  width:calc(50% - 46px);min-width:0;
  padding:18px 20px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);
  transition:transform 0.22s,border-color 0.22s,box-shadow 0.22s;
  position:relative;text-align:center;
  overflow-wrap:anywhere;word-break:break-word;
}
.roadmap-card::after{
  content:'';position:absolute;top:50%;width:10px;height:10px;
  background:var(--surface);border:1px solid var(--border);
  transform:translateY(-50%) rotate(45deg);
}
.roadmap-item:hover .roadmap-card{
  transform:translateY(-3px);
  border-color:var(--rm-color,var(--accent));
  box-shadow:0 10px 26px rgba(0,0,0,0.22);
}
.roadmap-card::after{transition:border-color 0.22s;}
.roadmap-item:hover .roadmap-card::after{border-color:var(--rm-color,var(--accent));}

.roadmap-item.left{justify-content:flex-start;}
.roadmap-item.left .roadmap-card::after{right:-6px;border-left:none;border-bottom:none;}

.roadmap-item.right{justify-content:flex-end;}
.roadmap-item.right .roadmap-card::after{left:-6px;border-right:none;border-top:none;}

.roadmap-card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid var(--border);
}
.roadmap-icon{font-size:1.1rem;line-height:1;}
.roadmap-name{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  color:var(--text);min-width:0;overflow-wrap:anywhere;
  margin-bottom:8px;line-height:1.3;
}
.roadmap-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:0.7rem;font-weight:700;
  background:color-mix(in srgb, var(--rm-color) 16%, transparent);
  color:var(--rm-color);white-space:nowrap;
}
.roadmap-period{
  font-size:0.74rem;color:var(--text2);white-space:nowrap;
  padding:2px 8px;border-radius:20px;border:1px solid var(--border);
}
.roadmap-desc{
  font-size:0.9rem;line-height:1.65;color:var(--text2);
  overflow-wrap:break-word;
  text-align:left;
}
.roadmap-desc ul,.roadmap-desc ol{text-align:left;}
.roadmap-desc blockquote{text-align:left;}
.roadmap-desc img{max-width:100%;height:auto;border-radius:10px;margin:8px 0;}
.roadmap-desc p{margin:0 0 8px;}
.roadmap-desc p:last-child{margin-bottom:0;}

.roadmap-item.st-planned{--rm-color:#7b8cff;}
.roadmap-item.st-progress{--rm-color:#e8b34a;}
.roadmap-item.st-done{--rm-color:#3ecf6c;}
.roadmap-item.st-done .roadmap-name{opacity:0.88;}

.roadmap-empty{text-align:center;padding:60px 20px;color:var(--text2);}
.roadmap-empty i{font-size:2.2rem;opacity:0.4;margin-bottom:14px;display:block;}

.roadmap-admin{padding:20px;border-radius:16px;margin-bottom:26px;}
.roadmap-admin-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:8px;
  font-weight:700;font-size:1.02rem;color:var(--text);
}
.roadmap-admin-head .btn-primary{width:auto;padding:9px 18px;font-size:0.85rem;}
.roadmap-admin-hint{font-size:0.82rem;color:var(--text2);line-height:1.6;margin-bottom:16px;}
.roadmap-admin-actions{display:flex;gap:10px;flex-wrap:wrap;}

.roadmap-edit{
  padding:18px;border-radius:14px;margin-bottom:14px;
  background:rgba(255,255,255,0.035);border:1px solid var(--border);
}
[data-theme="day"] .roadmap-edit{background:rgba(0,0,0,0.025);}
.roadmap-edit-top{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--border);
}
.roadmap-edit-num{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:var(--accent);font-weight:700;font-size:0.8rem;
}
.roadmap-edit-label{font-weight:700;font-size:0.9rem;color:var(--text);}
.roadmap-edit-actions{display:flex;gap:6px;margin-left:auto;}
.roadmap-mini-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
  background:rgba(255,255,255,0.04);color:var(--text2);font-size:0.8rem;
  display:flex;align-items:center;justify-content:center;transition:all 0.15s;
}
.roadmap-mini-btn:hover{color:var(--text);border-color:var(--accent);}
.roadmap-mini-btn.danger:hover{color:#ff8a8a;border-color:rgba(226,85,85,0.45);background:rgba(226,85,85,0.12);}
[data-theme="day"] .roadmap-mini-btn{background:rgba(0,0,0,0.03);}

.roadmap-grid{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;}
.roadmap-grid .form-row{margin-bottom:0;}
.roadmap-grid-full{grid-column:1 / -1;}
.roadmap-grid-two{
  grid-column:1 / -1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;
}
.roadmap-edit .styled-select{width:100%;}
.roadmap-edit .cs-wrap{width:100%;}

@media(max-width:820px){
  .roadmap-list::before{left:23px;transform:none;}
  .roadmap-item{min-height:0;margin-bottom:18px;}
  .roadmap-item.left,.roadmap-item.right{justify-content:flex-end;}
  .roadmap-node{left:23px;top:26px;width:38px;height:38px;font-size:0.92rem;}
  .roadmap-card{width:calc(100% - 58px);}
  .roadmap-card::after{top:26px;}
  .roadmap-item.left .roadmap-card::after{
    right:auto;left:-6px;
    border:1px solid var(--border);border-right:none;border-top:none;
  }
}

@media(max-width:600px){
  .roadmap-grid{grid-template-columns:1fr;}
  .roadmap-grid-two{grid-template-columns:1fr;}
  .roadmap-card{padding:15px 16px;}
}

.roadmap-list.editing::before{display:none;}
.roadmap-edit .editor-wrapper{margin-top:0;}
.roadmap-edit .btn-submit-post{display:none;}

.roadmap-desc .post-image + br{display:none;}
.roadmap-desc .post-image:last-child{margin-bottom:0;}
.roadmap-icon{display:none;}