:root{
--navy:#07152e;
--slate:#334155;
--blue:#3b82f6;
--purple:#8b5cf6;
--paper:#f8fafc;
--muted:#94a3b8;
}

*{
box-sizing:border-box
}

[hidden]{
display:none!important
}

body{
margin:0;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
sans-serif;
background:#050b17;
color:#f8fafc;
min-height:100vh
}

.center{
min-height:100vh;
display:grid;
place-content:center;
text-align:center;
padding:24px
}

.brand{
font-size:clamp(30px,6vw,58px);
letter-spacing:.22em;
font-weight:300
}

.brand span{
letter-spacing:0;
background:
linear-gradient(
135deg,
var(--blue),
var(--purple)
);
-webkit-background-clip:text;
color:transparent;
font-weight:700
}

.brand.small{
font-size:18px
}

.tag{
color:var(--muted)
}

.card{
background:#0b1629;
border:1px solid #1e293b;
border-radius:18px;
padding:22px
}

.auth{
width:min(390px,90vw);
display:grid;
gap:10px
}

input,
textarea,
select{
width:100%;
padding:13px;
border-radius:10px;
border:1px solid #334155;
background:#08111f;
color:white;
font:inherit
}

textarea{
resize:vertical
}

button{
border:0;
border-radius:10px;
padding:11px 15px;
background:
linear-gradient(
135deg,
var(--blue),
var(--purple)
);
color:white;
font-weight:700;
cursor:pointer
}

.secondary{
background:#172033;
color:#cbd5e1
}

header{
height:70px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
border-bottom:1px solid #172033
}

.status{
padding:22px 24px
}

.status small,
.toolbar span{
color:var(--muted)
}

#state{
font-size:20px;
margin-top:5px
}

.toolbar{
padding:0 24px 16px;
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap
}

#draftCount{
color:inherit
}

#timelineWrap{
height:62vh;
overflow:hidden;
border-top:1px solid #172033;
border-bottom:1px solid #172033;
cursor:grab;
position:relative;
background:
radial-gradient(
circle at 70% 50%,
#111a33 0,
#050b17 45%
)
}

#timeline{
height:100%;
width:6000px;
position:relative;
transform-origin:0 50%
}

#axis{
position:absolute;
top:50%;
left:0;
right:0;
height:2px;
background:#334155
}

#today{
position:absolute;
top:12%;
bottom:12%;
left:3000px;
border-left:3px solid #f8fafc
}

#today b{
position:absolute;
top:-2px;
left:8px;
font-size:11px;
letter-spacing:.12em
}

.node{
position:absolute;
transform:translate(-50%,-50%);
text-align:center;
min-width:140px;
cursor:pointer
}

/* MILESTONE */

.milestoneNode .dot{
width:18px;
height:18px;
border-radius:50%;
background:#f8fafc;
margin:auto;
border:4px solid #050b17;
box-shadow:
0 0 0 2px #64748b
}

.milestoneNode.completed .dot{
background:var(--blue)
}

.milestoneNode.abandoned{
opacity:.45
}

.milestoneNode.abandoned .dot{
border-radius:2px;
transform:rotate(45deg)
}

/* STEP ON TIMELINE */

.stepNode{
min-width:18px;
opacity:.48;
z-index:2
}

.stepNode .dot{
width:9px;
height:9px;
background:#94a3b8;
border:2px solid #050b17;
margin:auto;
transform:rotate(45deg);
box-shadow:
0 0 0 1px #64748b
}

.stepNode.done .dot{
background:var(--blue)
}

.stepNode.related{
opacity:1;
min-width:130px;
z-index:4
}

.stepNode.related .dot{
width:11px;
height:11px
}

.node label{
display:block;
margin-top:10px;
font-size:12px;
font-weight:700;
white-space:normal
}

.node small{
display:block;
color:var(--muted);
font-size:10px;
margin-top:3px
}

/* SIDE PANEL */

#panel{
position:fixed;
right:0;
top:0;
height:100%;
width:min(430px,100vw);
background:#08111f;
border-left:1px solid #263247;
padding:25px;
transform:translateX(105%);
transition:.25s;
z-index:10;
overflow:auto
}

#panel.open{
transform:none
}

.close{
float:right;
background:none;
font-size:26px
}

#panelBody h3{
margin-top:26px;
margin-bottom:10px
}

#panelBody > button{
margin-top:12px;
margin-right:6px
}

.milestoneFields{
display:grid;
gap:14px;
margin:18px 0 20px
}

.milestoneFields label{
display:grid;
gap:6px
}

.milestoneFields label>span{
font-size:11px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:#94a3b8
}

.milestoneStatus{
font-size:11px;
font-weight:700;
letter-spacing:.12em;
color:#94a3b8
}

.originalDate{
display:block;
color:#94a3b8;
margin-top:-7px
}

/* DRAFTS */

.draftItem{
padding:16px;
margin:10px 0;
background:#0b1629;
border:1px solid #263247;
border-radius:12px;
cursor:pointer
}

.draftItem:hover{
border-color:#64748b
}

.draftItem b{
display:block;
margin-bottom:6px
}

.draftItem small,
.draftHelp{
color:#94a3b8
}

/* STEPS IN PANEL */

.stepsList{
margin-bottom:12px
}

.step{
display:grid;
grid-template-columns:
28px
minmax(0,1fr)
40px
40px;
gap:9px;
align-items:center;
padding:13px 0;
border-bottom:
1px solid #1e293b
}

.step input[type="checkbox"]{
width:20px;
height:20px;
margin:0;
justify-self:center
}

.stepMain{
min-width:0
}

.stepTitle{
display:block;
line-height:1.35;
overflow-wrap:break-word
}

.stepMain small{
display:block;
color:#94a3b8;
font-size:11px;
margin-top:5px;
line-height:1.35
}

.step button{
width:40px;
height:40px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
font-size:17px
}

.step.conflict{
background:
rgba(255,170,0,.05);
border-left:
3px solid #f59e0b;
padding-left:7px
}

.warning{
color:#fbbf24!important
}

.step.focused{
outline:
1px solid #8b5cf6;
border-radius:8px;
padding-left:7px;
padding-right:7px
}

.history{
font-size:12px;
color:#94a3b8;
border-top:
1px solid #263247;
padding:8px 0
}

@media(max-width:650px){

.toolbar span{
display:none
}

#timelineWrap{
height:68vh
}

#panel{
top:auto;
bottom:0;
height:82%;
width:100%;
border-left:0;
border-top:
1px solid #263247;
border-radius:
20px 20px 0 0;
transform:
translateY(105%)
}

#panel.open{
transform:none
}

.step{
grid-template-columns:
26px
minmax(0,1fr)
38px
38px;
gap:7px
}

.step button{
width:38px;
height:38px
}

}

.authTabs{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
margin-bottom:8px;
background:#08111f;
padding:4px;
border-radius:12px;
}

.authTab{
background:transparent;
color:#64748b;
font-size:11px;
letter-spacing:.08em;
padding:10px 8px;
}

.authTab.active{
background:#172033;
color:#f8fafc;
}

#registerNameWrap{
width:100%;
}

.textButton{
background:none;
padding:0;
margin-left:4px;
color:#8b5cf6;
font-weight:700;
}

#authSwitch{
font-size:12px;
color:#94a3b8;
margin:5px 0 0;
}

#authErr{
color:#f87171;
font-size:12px;
min-height:16px;
}


/* CALENDAR / FORM UX */

.dateField{
width:100%;
border:1px solid #334155;
background:#08111f;
border-radius:10px;
padding:11px 13px;
}

.dateField input[type="date"]{
display:block;
width:100%;
min-width:0;
border:0;
background:transparent;
padding:0;
color:white;
font:inherit;
}

.dateField input[type="date"]::-webkit-calendar-picker-indicator{
cursor:pointer;
filter:invert(1);
opacity:.8;
}

.dateShortcuts{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-top:-5px;
}

.dateShortcut{
background:#172033;
color:#94a3b8;
font-size:11px;
font-weight:600;
padding:7px 10px;
border-radius:8px;
}

.dateShortcut:hover{
color:#f8fafc;
}

.backButton{
background:none!important;
color:#94a3b8;
padding:0!important;
margin:0 0 12px!important;
font-size:12px;
letter-spacing:.06em;
}

.formContext{
color:#94a3b8;
margin-top:-8px;
margin-bottom:20px;
}

.dateLimitNote{
display:block;
color:#94a3b8;
line-height:1.4;
margin-top:-5px;
}

@media(max-width:650px){

.dateShortcuts{
display:grid;
grid-template-columns:1fr 1fr;
}

.dateShortcut{
width:100%;
}

}

/* ==================================================
   TIMELINE HORIZON NAVIGATION
   ================================================== */

.timeViews{
display:flex;
align-items:center;
gap:4px;
padding:4px;
background:#08111f;
border:1px solid #1e293b;
border-radius:12px;
}

.timeView{
background:transparent;
color:#64748b;
padding:8px 11px;
font-size:11px;
letter-spacing:.06em;
border-radius:8px;
}

.timeView.active{
background:#172033;
color:#f8fafc;
}

.horizonMarker{
position:absolute;
top:25%;
bottom:25%;
border-left:1px solid rgba(148,163,184,.22);
pointer-events:none;
z-index:1;
}

.horizonMarker span{
position:absolute;
top:-18px;
left:7px;
white-space:nowrap;
font-size:10px;
letter-spacing:.12em;
font-weight:700;
color:#64748b;
}

.horizon10{
border-left:
2px solid rgba(139,92,246,.45);
}

.horizon10 span{
font-size:13px;
color:#a78bfa;
letter-spacing:.16em;
}

#today{
z-index:3;
}

#axis{
z-index:0;
}

#nodes{
position:absolute;
inset:0;
z-index:2;
}

@media(max-width:650px){

.toolbar{
gap:8px;
}

.timeViews{
order:3;
width:100%;
display:grid;
grid-template-columns:
repeat(4,1fr);
}

.timeView{
width:100%;
padding:10px 4px;
}

.toolbar > span{
display:none;
}

.horizonMarker span{
font-size:9px;
}

}

/* =====================================================
   KEEP TIMELINE OBJECTS PROPORTIONAL
   The timeline can scale horizontally, but symbols,
   labels and markers must never stretch.
   ===================================================== */

#timeline{
--timeline-inverse-scale:1;
}

/* Milestones */
.node{
transform:
translate(-50%,-50%)
scaleX(var(--timeline-inverse-scale)) !important;
transform-origin:center center;
}

/* Horizon text */
.horizonMarker span{
transform:
scaleX(var(--timeline-inverse-scale));
transform-origin:left center;
}

/* TODAY text */
#today b{
transform:
scaleX(var(--timeline-inverse-scale));
transform-origin:left center;
}

/* Common timeline step class names */
.timelineStep,
.timeline-step,
.stepNode,
.step-node{
transform:
translate(-50%,-50%)
scaleX(var(--timeline-inverse-scale)) !important;
transform-origin:center center;
}

/* If the step symbol itself is independently transformed */
.timelineStep .dot,
.timeline-step .dot,
.stepNode .dot,
.step-node .dot,
.timelineStep .diamond,
.timeline-step .diamond,
.stepNode .diamond,
.step-node .diamond{
transform:
scaleX(var(--timeline-inverse-scale));
transform-origin:center center;
}


/* =========================================
   TIMELINE STEP MARKER — KEEP TRUE CIRCLE
   ========================================= */

.stepNode .dot{
  width:10px !important;
  height:10px !important;
  min-width:10px !important;
  min-height:10px !important;

  border-radius:50% !important;

  transform:
    scaleX(var(--timeline-inverse-scale,1)) !important;

  transform-origin:center center !important;
}

/* Completed step stays circular too */
.stepNode.done .dot{
  border-radius:50% !important;
}


/* =====================================================
   FINAL STEP MARKER FIX
   Parent cancels timeline horizontal scaling.
   Dot keeps its original small diamond geometry.
   ===================================================== */

.stepNode{
  transform:
    translate(-50%,-50%)
    scaleX(var(--timeline-inverse-scale,1)) !important;

  transform-origin:center center !important;
}

/* Small diamond — no additional inverse scaling here */
.stepNode .dot{
  width:9px !important;
  height:9px !important;
  min-width:9px !important;
  min-height:9px !important;

  border-radius:2px !important;

  transform:rotate(45deg) !important;
  transform-origin:center center !important;

  margin:auto !important;
}

/* Completed steps remain diamonds */
.stepNode.done .dot{
  border-radius:2px !important;
  transform:rotate(45deg) !important;
}

/* Slightly larger only when its milestone is selected */
.stepNode.related .dot{
  width:11px !important;
  height:11px !important;
  min-width:11px !important;
  min-height:11px !important;

  transform:rotate(45deg) !important;
}


/* =====================================================
   LANGUAGE SWITCHER
   ===================================================== */
.languageSwitch{
  position:fixed;
  top:14px;
  right:16px;
  z-index:1000;
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border:1px solid #1e293b;
  border-radius:10px;
  background:rgba(8,17,31,.92);
  backdrop-filter:blur(8px);
}

.languageSwitch button{
  border:0;
  background:transparent;
  color:#64748b;
  padding:3px 5px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
}

.languageSwitch button.active{
  color:#f8fafc;
}

.languageSwitch span{
  color:#334155;
  font-size:10px;
}

@media(max-width:650px){
  .languageSwitch{
    top:8px;
    right:8px;
  }
}


/* =====================================================
   LANGUAGE SWITCHER INSIDE APP HEADER
   ===================================================== */

#headerActions{
  display:flex;
  align-items:center;
  gap:8px;
}

#headerActions .languageSwitch{
  position:static;
  top:auto;
  right:auto;
  z-index:auto;
  flex-shrink:0;
}

@media(max-width:650px){
  #headerActions{
    gap:5px;
  }

  #headerActions .languageSwitch{
    padding:4px 5px;
  }

  #headerActions .languageSwitch button{
    padding:3px;
  }
}