:root {
  --bg1: #F4F5F7;
  --bg2: #FFFFFF;
  --bg3: #FFFFFF;
  --neon1: #0C66E4;
  --neon2: #388BFF;
  --neon-text: #172B4D;
  --card-bg: #ffffff;
  --card-shadow: 0 2px 6px rgba(0,0,0,0.1);
  --border-color: #DFE1E6;
  --sidebar-width: 260px;
  --font-family: 'Open Sans', sans-serif;
  --button-radius: 4px;
  --card-radius: 8px;
  --zoom-scale: 1;
  /* widen first column to match gantt example */
  --user-col-width: 180px;
  --user-col-bg: rgba(255,255,255,0.1);
  --row-scale: 1;
  --muted-text: rgba(23, 43, 77, 0.7);
  --danger-bg: #e11d48;
}

/* Background modes */
body.light {
  --bg1: #F4F5F7;
  --bg2: #FFFFFF;
  --bg3: #FFFFFF;
  --neon-text: #172B4D;
  --text-color: #172B4D;
}

body.dark {
  --bg1: #1D2233;
  --bg2: #252B3F;
  --bg3: #313A55;
  --card-bg: #252B3F;
  --border-color: #3A4560;
  --neon-text: #E7E7E7;
  --text-color: #FFFFFF;
  --muted-text: rgba(231, 231, 231, 0.75);
  --danger-bg: #ef4444;
}

* { box-sizing: border-box; }
body {
  margin:0;
  font-family: var(--font-family);
  color:var(--text-color);
  background:var(--bg1);
  display:flex;
  height:100vh;
  overflow:hidden;
}
/* Sidebar */
#sidebar {
  width:var(--sidebar-width);
  background:var(--card-bg);
  box-shadow:var(--card-shadow);
  padding:20px;
  overflow-y:auto;
  transition:width .3s, padding .3s;
}
#sidebar.collapsed {
  width:0;
  padding:0;
  overflow:hidden;
  box-shadow:none;
}
#sidebar h2 {
  margin-top:0;
  font-size:18px;
  margin-bottom:10px;
  color:var(--neon-text);
}
#add-user-form input,
#add-user-form button {
  width:100%;
  padding:8px;
  margin-bottom:10px;
  background:var(--bg3);
  border:1px solid var(--border-color);
  color:var(--text-color);
}
#add-user-form button {
  background:var(--neon1);
  color:var(--text-color);
  border-radius:var(--button-radius);
  transition:background-color .2s, box-shadow .2s;
}
#add-user-form button:hover {
  background:var(--neon2);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
#user-list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px;
  background:var(--bg2);
  margin-bottom:6px;
  border-radius:var(--button-radius);
  color:var(--neon-text);
  cursor:move;
}
#user-list li .line-actions {
  display:flex;
  gap:4px;
}
#user-list li button {
  color:var(--neon-text);
  border:none;
  background:transparent;
  cursor:pointer;
}
#user-list li button:hover {
  color:var(--neon1);
}
#user-list li.drag-over {
  outline:2px dashed var(--neon1);
}
#user-list li.dragging {
  opacity:0.6;
}
/* Toggle */
#toggle-btn {
  position:absolute;
  top:20px;
  left:var(--sidebar-width);
  width:32px;
  height:32px;
  margin:0;
  border:none;
  font-size:18px;
  line-height:32px;
  text-align:center;
  cursor:pointer;
  transition:left .3s;
  z-index:10;
}
#toggle-btn:hover {
  background:transparent;
}
#sidebar.collapsed ~ #toggle-btn {
  left:0;
}
/* Main */
#main {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:20px;
  overflow:auto;
  position:relative;
}
#timeline-wrapper {
  overflow-x: auto;
  position: relative;
  flex-grow: 1;
  min-height: 400px;
  background: var(--bg2);
  font-family: var(--font-family);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  margin-top: 1rem;
}
#zoom-select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  background: var(--bg3);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
#timeline-grid {
  position:absolute;
  top:80px;
  left:var(--user-col-width);
  width:calc(100% - var(--user-col-width));
  pointer-events:none;
  z-index:0;
}
body.theme-pixel #timeline-grid {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 16px, #333333 16px, #333333 17px),
    repeating-linear-gradient(90deg, transparent, transparent 16px, #333333 16px, #333333 17px);
}
#year-header,
#month-header,
#day-header {
  position: sticky;
  margin-left: var(--user-col-width);
  width: calc(100% - var(--user-col-width));
  pointer-events: none;
  z-index: 50;
  font-size: 14px;
  font-weight: bold;
  color: var(--neon-text);
  /* Use a solid background so the timeline grid doesn't show through */
  background: var(--bg2);
  border-bottom: 1px solid var(--border-color);
  height: 20px;
}
#year-header::before,
#month-header::before,
#day-header::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--user-col-width));
  width: var(--user-col-width);
  top: 0;
  bottom: 0;
  background: var(--bg2);
}
#year-header::before,
#month-header::before,
#day-header::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--user-col-width));
  width: var(--user-col-width);
  top: 0;
  bottom: 0;
  background: var(--bg2);
}
#year-header { top: 0; }
#month-header { top: 20px; }
#day-header { top: 40px; }
#timeline-table { width:100%; min-width:100%; transform-origin:0 0; position:relative; z-index:1; }

#cursor-date {
  position:absolute;
  transform:translate(-50%, -120%);
  color:var(--neon2);
  font-size:12px;
  white-space:nowrap;
  pointer-events:none;
  display:none;
  z-index:3;
}

#cursor-pointer {
  position:absolute;
  width:8px;
  height:8px;
  background:black;
  border-radius:50%;
  transform:translate(-50%, -50%);
  pointer-events:none;
  display:none;
  z-index:3;
}
.grid-line { 
  position:absolute; 
  top:0; 
  bottom:0; 
  border-left:1px solid rgba(0, 0, 0, 0.05); 
}
.grid-line.current-day-line {
  border-left-color: var(--neon1);
  border-left-width: 2px;
  z-index: 2;
}
.grid-line.week { border-left-color: rgba(0, 0, 0, 0.1); }
.grid-line.month { border-left-width:2px; border-left-color: rgba(0, 0, 0, 0.15); }
.grid-line.year { border-left-width:3px; border-left-color: rgba(0, 0, 0, 0.2); }
.current-day-marker {
  position: absolute;
  top: -18px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--neon1);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 3;
}
.date-label { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.day-label { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }

/* ensure weekend columns remain unshaded */
.timeline-cell.weekend,
.day-label.weekend {
  background: transparent;
}
/* Header */
#header {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
  position:relative;
}
#header h1 {
  margin:0;
  font-size:28px;
  flex:1;
  text-align:center;
  pointer-events:none;
}
.header-controls {
  display:flex;
  align-items:center;
  background:var(--neon1);
  border-radius:20px;
  padding:4px 8px;
  /* Allow dropdown menus to extend beyond the header */
  overflow:visible;
  position:absolute;
  top:0;
  left:20px;
  /* Keep the menu bar above sticky timeline headers */
  z-index:100;
}

.header-controls button {
  background:transparent;
  border:none;
  color:var(--text-color);
}

.menu-items {
  display:flex;
  align-items:center;
  overflow:hidden;
  max-width:0;
  opacity:0;
  pointer-events:none;
  margin-left:0;
  transition:max-width .3s ease, opacity .3s ease, margin-left .3s ease;
}

.header-controls.open .menu-items {
  max-width:1000px;
  opacity:1;
  pointer-events:auto;
  margin-left:8px;
  /* Allow dropdown menus (load/store) to extend outside menu bar */
  overflow:visible;
}

.menu-items > *:not(:first-child) {
  margin-left:8px;
}

.menu-btn,
.icon-btn {
  width:40px;
  height:40px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  cursor:pointer;
  transition:transform .2s;
}

.menu-btn:hover,
.icon-btn:hover {
  transform:scale(1.1);
  background:none;
}

.icon-btn .material-icons {
  font-size:24px;
}
#menu-btn {
  padding:0;
}
#menu-btn img {
  width:100%;
  height:100%;
  object-fit:contain;
}

#pro-btn {
  width:auto;
  padding:0 12px;
  background:var(--neon1);
  color:var(--text-color);
}

#pro-btn:hover {
  background:#ff9800;
  color:var(--text-color);
}

.pro-status {
  font-weight:bold;
  padding:0 12px;
  line-height:40px;
}
.btn-group button {
  margin-left:6px;
  padding:8px 12px;
  border:none;
  background:var(--neon1);
  color:var(--text-color);
  cursor:pointer;
  border-radius:var(--button-radius);
  transition:background-color .2s, box-shadow .2s;
}
.btn-group button:hover {
  background:var(--neon2);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* collapsible menu overlay */
.menu-overlay {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  background:rgba(0,0,0,0.4);
  /* Ensure the overlay sits above timeline headers and controls */
  z-index:200;
}
.menu-overlay.open {
  display:flex;
}
.menu-content {
  background:var(--card-bg);
  padding:20px;
  border-radius:var(--card-radius);
  width:90%;
  max-width:400px;
  text-align:center;
  animation:menu-pop .3s forwards;
}
.menu-content button {
  width:100%;
  padding:10px;
  margin:8px 0;
  border:none;
  border-radius:var(--button-radius);
  background:var(--neon1);
  color:var(--text-color);
  cursor:pointer;
  transition:background-color .2s;
}
.menu-content button:hover {
  background:var(--neon2);
}

.icon-label-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.icon-label-btn .material-icons {
  font-size:20px;
}

/* pro vs free info list */
.pro-info {
  display:flex;
  gap:20px;
  text-align:left;
  margin:20px 0;
}
.pro-info .plan {
  flex:1;
}
.pro-info ul {
  list-style:none;
  padding:0;
  margin:0;
}
.pro-info li {
  margin:4px 0;
}
.pro-info li.check::before,
.pro-info li.cross::before {
  display:inline-block;
  width:1em;
  margin-right:4px;
}
.pro-info li.check::before {
  content:'\2713';
  color:#008000;
}
.pro-info li.cross::before {
  content:'\2717';
  color:#ff0000;
}

.pro-buy-button {
  background:#ff0000;
  color:#fff;
}
.pro-buy-button:hover {
  background:#cc0000;
  color:#fff;
}

/* Export submenu */
.export-container {
  position: relative;
}
.export-menu {
  display: none;
  flex-direction: column;
  margin-top: 4px;
}
.export-container.open .export-menu {
  display: flex;
}

/* PPT user selection dropdown */
.ppt-export {
  position: relative;
}
.ppt-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 1000;
  transform-origin: top;
  background: var(--bg3);
  padding: 4px;
  border-radius: var(--button-radius);
}
.ppt-export.open .ppt-menu {
  display: flex;
  animation: menu-pop .15s ease-out forwards;
}
.ppt-menu label {
  display: flex;
  align-items: center;
  margin: 2px 0;
  color: var(--text-color);
}
.ppt-menu label input {
  margin-right: 4px;
}
.ppt-menu button {
  padding: 8px;
  margin-top: 4px;
  border: none;
  border-radius: var(--button-radius);
  background: var(--neon1);
  color: #000;
  cursor: pointer;
}
.ppt-menu button:hover {
  background: var(--neon2);
}

/* Slot submenus for load/store */
.slot-container {
  position: relative;
}
.slot-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 1000;
}
.slot-container.open .slot-menu {
  display: flex;
}
.slot-menu button {
  width: 40px;
  height: 40px;
  margin: 2px 0;
  border: none;
  border-radius: var(--button-radius);
  background: var(--neon1);
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-10px);
}
.slot-menu button.slot-entry {
  width: 160px;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 8px;
}
.slot-menu button.slot-entry .slot-name {
  flex: 1;
  text-align: left;
  font-size: 14px;
}
.slot-menu button:hover {
  background: var(--neon2);
}
.slot-container.open .slot-menu button {
  animation: slot-drop .2s ease forwards;
  animation-delay: calc(var(--i) * 0.05s);
}
 @keyframes slot-drop {
  to { opacity:1; transform: translateY(0); }
}


@keyframes menu-pop {
  from { transform:scale(0.5); opacity:0; }
  to { transform:scale(1); opacity:1; }

}

/* Edit overlay */
.edit-overlay {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  background:rgba(0,0,0,0.4);
  z-index:40;
}
.edit-overlay.open {
  display:flex;
}
.edit-card {
  background:var(--card-bg);
  padding:20px;
  border-radius:var(--card-radius);
  width:320px;
  box-shadow:var(--card-shadow);
  animation:menu-pop .3s forwards;
}
/* Timeline */
table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
col.user-col { width: var(--user-col-width); } col.timeline-col { width:auto; }
#timeline-table th, #timeline-table td {
  border-bottom:2px solid #B3BAC5;
}
th, td {
  padding:12px;
  border-bottom:1px solid var(--border-color);
  color:var(--neon-text);
}
th { text-align:left; font-weight:bold; }
#timeline-table th:first-child,
#timeline-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--bg2);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  z-index: 9;
  border-right: 1px solid var(--border-color);
}
#timeline-body td { height: inherit; }
#timeline-body tr {
  --user-scale: 1;
  height: calc(50px * var(--row-scale) * var(--user-scale));
}
.timeline-cell {
  position:relative;
  height:calc(50px * var(--row-scale) * var(--user-scale));
  cursor:pointer;
  overflow:visible;
}
.timeline-line {
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:4px;
  background:var(--border-color);
  border-radius:2px;
  transform:translateY(-50%);
}

.row-resizer {
  position:absolute;
  left:0;

  bottom:-2px;
  width:100%;
  height:6px;
  cursor:row-resize;
  z-index:5;
  background:rgba(0,0,0,0.1);
  opacity:0;
  transition:background 0.2s, opacity 0.2s;
}
#timeline-body tr:hover .row-resizer {
  opacity:1;
}
.row-resizer:hover {
  background:rgba(12,102,228,0.3);

}

#timeline-body tr:nth-child(odd) td.timeline-cell,
#timeline-body tr:nth-child(even) td.timeline-cell {
  background:transparent;
}

body.theme-neon .timeline-line {
  box-shadow:0 0 6px var(--neon1),0 0 12px var(--neon2);
}
body.theme-pixel .timeline-line {
  background: var(--neon1);
  border-radius:0;
}

@keyframes neon-vibrate {
  0% { transform:translateY(-50%) translateX(0); }
  50% { transform:translateY(-50%) translateX(1px); }
  100% { transform:translateY(-50%) translateX(-1px); }
}

body.theme-neon .timeline-cell:hover .timeline-line {
  animation:neon-vibrate 0.15s infinite;
  box-shadow:0 0 8px var(--neon1),0 0 16px var(--neon2),0 0 20px magenta;
}
.milestone {
  position:absolute;
  width:12px;
  height:12px;
  background:#0C66E4;
  border:1px solid #000;
  top:calc(50% + var(--time-offset, 0px));
  transform:translate(-50%,-50%) rotate(45deg) scale(1);
  cursor:pointer;
  transition:transform .2s;
  z-index:2;
  border-radius:2px;
}
.milestone:hover {
  transform:translate(-50%,-50%) rotate(45deg) scale(1.2);
}
.time-block{
  position:absolute;
  height:24px;
  top:calc(50% + var(--time-offset, 0px));
  transform:translateY(-50%);
  border:1px solid #000;
  border-radius:3px;
  cursor:pointer;
  transition:opacity .2s;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
  overflow:hidden;
}
.time-block:hover{
  opacity:0.85;
}
.time-block .resize-handle{
  position:absolute;
  top:0;
  width:8px;
  height:100%;
  background:transparent;
  cursor:ew-resize;
  display:none;
}
.time-block .resize-handle.left{left:-4px;}
.time-block .resize-handle.right{right:-4px;}
.time-block:hover .resize-handle{display:block;}

.block-progress{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  background:rgba(0,0,0,0.2);
  pointer-events:none;
}

.block-progress-cursor{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(0,0,0,0.5);
  pointer-events:none;
}

@keyframes neon-pulse {
  0%,100% { box-shadow:0 0 6px var(--neon1); }
  50% { box-shadow:0 0 12px var(--neon2); }
}

body.theme-neon .time-block {
  animation:neon-pulse 2s infinite;
}

@keyframes bubble-pop {
  0% { transform:translateY(-50%) scale(0); opacity:0; }
  60% { transform:translateY(-50%) scale(1.2); opacity:1; }
  100% { transform:translateY(-50%) scale(1); }
}

body.theme-bubble .time-block {
  border-radius:9999px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  padding:0 8px;
  animation:bubble-pop 0.5s ease;
}
body.theme-bubble .time-block:hover{
  transform:translateY(-50%) scale(1.05);
}
body.theme-bubble .block-icon{
  pointer-events:none;
  margin-right:4px;
}
body.theme-pixel .time-block{
  border-radius:0;
  border:1px solid #000 !important;
  background-size:8px 8px;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 7px, #000 7px, #000 8px),
    repeating-linear-gradient(90deg, transparent, transparent 7px, #000 7px, #000 8px);
}
body.theme-pixel .block-icon{
  pointer-events:none;
  position:absolute;
  top:2px;
  left:2px;
  font-size:8px;
}
body.theme-pixel .milestone{
  border-radius:0;
}
.time-block:hover{
  transform:translateY(-50%) scale(1.05);
}

@keyframes wiggle-dot {
  0%,100% { transform:translate(-50%, -50%) rotate(0deg); }
  25% { transform:translate(-50%, -50%) rotate(2deg); }
  75% { transform:translate(-50%, -50%) rotate(-2deg); }
}

@keyframes wiggle-block {
  0%,100% { transform:translateY(-50%) rotate(0deg); }
  25% { transform:translateY(-50%) rotate(1.5deg); }
  75% { transform:translateY(-50%) rotate(-1.5deg); }
}

.milestone.wiggle { animation: wiggle-dot 0.3s infinite; }
.time-block.wiggle { animation: wiggle-block 0.3s infinite; }
.dim{
  opacity:0.2;
}
.milestone.highlight{
  transform:translate(-50%,-50%) scale(1.4);
  z-index:4;
}
.time-block.highlight{
  transform:translateY(-50%) scale(1.1);
  z-index:4;
}
.time-block-label,
.milestone-label {
  position:absolute;
  font-size:12px;
  white-space:nowrap;
  pointer-events:auto;
  z-index:3;
}

.time-block-label.hidden-label,
.milestone-label.hidden-label {
  display:none;
}

.time-block-label {
  top:calc(50% + var(--time-offset, 0px) + var(--label-offset, 0px));
  transform:translate(-50%, -50%);
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:font-size .2s, width .3s;
}

.time-block-label.expanded {
  overflow:visible;
  text-overflow:unset;
  z-index:5;
}

.milestone-label {
  /* --label-base defines baseline offset (positive below, negative above) */
  top:calc(50% + (var(--label-base, 12px) + var(--label-offset, 0px)));
  transform:translateX(-50%);
  transition:font-size .2s;
}
.hover-label{
  font-size:16px;
  font-weight:bold;
  z-index:5;
}
/* Force labels above the timeline when needed */
.label-above { --label-base: -12px; }
.time-info {
  font-size:10px;
  opacity:0;
  max-height:0;
  overflow:hidden;
  display:block;
  transition:max-height .3s, opacity .3s;
  text-align:center;
}

.milestone:hover + .milestone-label,
.time-block:hover + .time-block-label,
.time-block-label:hover,
.milestone-label:hover {
  font-size:16px;
  font-weight:bold;
}

.milestone:hover + .milestone-label .time-info,
.time-block:hover + .time-block-label .time-info,
.time-block-label:hover .time-info,
.milestone-label:hover .time-info {
  opacity:0.7;
  max-height:40px;
  font-weight:bold;
}
.tooltip-bubble {
  position:absolute;
  top:100%;
  background:var(--card-bg);
  color:var(--neon-text);
  padding:12px 16px;
  border-radius:var(--button-radius);
  box-shadow:var(--card-shadow);
  transform:translateX(-50%);
  opacity:0;
  transition:opacity .3s;
  z-index:15;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.tooltip-bubble.active { opacity:1; }
.tooltip-bubble .close-btn {
  position:absolute;
  top:4px;
  right:4px;
  background:transparent;
  border:none;
  color:inherit;
  cursor:pointer;
}
.tooltip-bubble .options {
  display:flex;
  gap:8px;
}
.tooltip-bubble .options button {
  padding:6px 12px;
  border:none;
  border-radius:var(--button-radius);
  background:var(--neon1);
  color:var(--text-color);
  cursor:pointer;
}
.tooltip-bubble .options button:hover {
  background:var(--neon2);
}
.milestone-input {
  position:absolute;
  top:0;
  background:var(--card-bg);
  color:var(--neon-text);
  padding:6px;
  border-radius:var(--button-radius);
  width:280px;
  box-shadow:var(--card-shadow);
  transform:translate(-50%, -100%) translateY(-10px);
  opacity:0;
  transition:opacity .3s;
  cursor:move;
  z-index:20;
}
.milestone-input.active { opacity:1; }
.detail-blob {
  position:absolute;
  background:var(--neon1);
  color:var(--text-color);
  padding:8px;
  border-radius:var(--button-radius);
  width:220px;
  transform:translate(0, -50%) scale(var(--scale-x,0), var(--scale-y,0));
  transform-origin:left center;
  opacity:0;
  transition:transform .3s, opacity .3s;
  cursor:move;
  z-index:20;
}
.detail-blob.open {
  transform:translate(0, -50%) scale(1,1);
  opacity:1;
}
.detail-blob h3 { margin:0 0 4px 0; font-size:14px; }
.detail-blob p { margin:0 0 6px 0; font-size:13px; }
.detail-blob ul { list-style:none; padding:0; margin:0 0 6px 0; }
.detail-blob li { display:flex; align-items:center; gap:4px; margin-bottom:4px; }
.subtask-row {
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:6px;
}
.subtask-row input[type=text] {
  flex:1;
}
.subtask-row input[type=checkbox] {
  width:16px;
  height:16px;
  flex:0 0 auto;
}
.subtask-row button {
  flex:0 0 auto;
  background:var(--neon2);
  border:none;
  border-radius:var(--button-radius);
  color:var(--text-color);
  cursor:pointer;
  padding:2px 6px;
}
.detail-blob .layer-controls {
  display:flex;
  gap:4px;
  margin-top:6px;
}
.detail-blob button { padding:4px 8px; border:none; background:var(--neon2); color:var(--text-color); border-radius:var(--button-radius); cursor:pointer; }
.detail-blob .close-btn {
  position:absolute;
  top:4px;
  right:4px;
  background:transparent;
  padding:2px 6px;
  border:none;
  color:inherit;
  cursor:pointer;
}
.milestone-input input, .milestone-input textarea {
  width:100%;
  padding:4px;
  margin-bottom:6px;
  background:var(--bg3);
  border:1px solid var(--border-color);
  color:var(--text-color);
}
.edit-card input, .edit-card textarea {
  width:100%;
  padding:4px;
  margin-bottom:6px;
  background:var(--bg3);
  border:1px solid var(--border-color);
  color:var(--text-color);
}
.milestone-input .duration-wrapper {
  display:flex;
  gap:4px;
  align-items:center;
}
.edit-card .duration-wrapper {
  display:flex;
  gap:4px;
  align-items:center;
}
.edit-card .color-wrapper {
  display:flex;
  gap:4px;
  align-items:center;
  margin-bottom:6px;
}
.edit-card .color-wrapper .color-select {
  flex:1;
}
.color-select {
  position:relative;
  width:100%;
}
.color-select .selected {
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--border-color);
  cursor:pointer;
}
.color-select .options {
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  background:var(--card-bg);
  padding:4px;
  border:1px solid var(--border-color);
  border-radius:var(--button-radius);
  box-shadow:var(--card-shadow);
  z-index:10;
  gap:4px;
  flex-wrap:wrap;
}
.color-select.open .options {
  display:flex;
}
.color-select .color-option {
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid var(--border-color);
  cursor:pointer;
}
.milestone-input .duration-wrapper input {
  flex:1;
}
.edit-card .duration-wrapper input {
  flex:1;
}
.milestone-input .btns {
  display:flex;
  justify-content:flex-end;
}
.edit-card .btns {
  display:flex;
  justify-content:flex-end;
}
.milestone-input .btns button {
  margin-left:6px;
  padding:4px 8px;
  border:none;
  background:var(--neon1);
  color:var(--text-color);
  border-radius:var(--button-radius);
  cursor:pointer;
  transition:background-color .2s;
}
.edit-card .btns button {
  margin-left:6px;
  padding:4px 8px;
  border:none;
  background:var(--neon1);
  color:var(--text-color);
  border-radius:var(--button-radius);
  cursor:pointer;
  transition:background-color .2s;
}
.milestone-input .btns button:hover {
  background:var(--neon2);
}
.edit-card .btns button:hover {
  background:var(--neon2);
}
.edit-card .save-btn {
  background:var(--neon1);
}
.edit-card .save-btn:hover {
  background:var(--neon2);
}
.edit-card .close-btn {
  background:var(--neon2);
}
.edit-card .close-btn:hover {
  background:var(--neon1);
}
.milestone-tooltip {
  position:absolute;
  bottom:100%;
  background:var(--card-bg);
  color:var(--neon-text);
  padding:4px 8px;
  border-radius:var(--button-radius);
  box-shadow:var(--card-shadow);
  transform:translateX(-50%) translateY(-10px);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
  z-index:15;
  max-width:200px;
}
.milestone-tooltip.active { opacity:1; }

.info-tooltip {
  position: absolute;
  background: var(--card-bg);
  color: var(--neon-text);
  padding: 6px 8px;
  border-radius: var(--button-radius);
  box-shadow: var(--card-shadow);
  z-index: 20;
  max-width: 220px;
}

.info-tooltip details {
  margin-top: 4px;
}

.info-tooltip summary {
  cursor: pointer;
}

.action-tooltip {
  position: absolute;
  background: var(--card-bg);
  color: var(--neon-text);
  padding: 6px 8px;
  border-radius: var(--button-radius);
  box-shadow: var(--card-shadow);
  z-index: 20;
}
.action-tooltip label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.zoom-hint {
  position: absolute;
  background: var(--card-bg);
  color: var(--neon-text);
  padding: 4px 6px;
  border-radius: var(--button-radius);
  box-shadow: var(--card-shadow);
  z-index: 25;
  cursor: pointer;
  white-space: nowrap;
}
/* Expand row button */
.expand-row {
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 4px;
  color: inherit;
}
/* Settings */
#settings-panel {
  position:static;
  width:100%;
  max-width:400px;
  margin:0 auto;
  background:var(--card-bg);
  padding:20px;
  box-shadow:var(--card-shadow);
  display:none;
  z-index:20;
  border-radius:var(--card-radius);
}
#settings-panel h2 {
  margin-top:0;
  color:var(--neon-text);
}
.section {
  margin-bottom:16px;
}
label {
  display:block;
  margin-bottom:8px;
  color:var(--neon-text);
}
input[type=text],
input[type=date],
input[type=number] {
  width:100%;
  padding:6px;
  margin-top:4px;
  background:var(--bg3);
  border:1px solid var(--border-color);
  color:var(--text-color);
}
#settings-panel select {
  background:var(--bg3);
  color:var(--text-color);
  border:1px solid var(--border-color);
}
#settings-panel label {
  color:var(--text-color);
}
#settings-buttons {
  display:flex;
  gap:8px;
}
#settings-buttons button {
  padding:6px 12px;
  border:none;
  cursor:pointer;
  border-radius:var(--button-radius);
  background:var(--neon1);
  color:var(--text-color);
  transition:background-color .2s;
}
#settings-buttons button:hover {
  background:var(--neon2);
}
#save-settings { background:var(--neon1); color:var(--text-color); border-radius:var(--button-radius); transition:background-color .2s; }
#back-settings { background:var(--neon2); color:var(--text-color); border-radius:var(--button-radius); transition:background-color .2s; }
#save-settings:hover, #back-settings:hover { background:var(--neon2); }


/* Slot panel for load/store */
#slot-panel {
  position:static;
  width:100%;
  max-width:400px;
  margin:0 auto;
  background:var(--card-bg);
  padding:20px;
  box-shadow:var(--card-shadow);
  display:none;
  z-index:20;
  border-radius:var(--card-radius);
}
#slot-panel h2 {
  margin-top:0;
  color:var(--neon-text);
}
#slot-list button {
  width:100%;
  padding:6px 12px;
  margin:8px 0;
  border:none;
  cursor:pointer;
  border-radius:var(--button-radius);
  background:var(--neon1);
  color:var(--text-color);
  transition:background-color .2s;
}
#slot-list button:hover {
  background:var(--neon2);
}
#slot-buttons {
  text-align:right;
}
#slot-buttons button {
  margin-left:8px;
  padding:6px 12px;
  border:none;
  cursor:pointer;
  border-radius:var(--button-radius);
  background:var(--neon2);
  color:var(--text-color);
  transition:background-color .2s;
}
#slot-buttons button:hover {
  background:var(--neon1);
}


/* Login Page */
body.login-page { justify-content:center; align-items:center; }
.login-container {
  background:var(--card-bg);
  padding:20px;
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
}
.login-container input {
  display:block;
  margin-bottom:10px;
  padding:8px;
  width:100%;
  border:1px solid var(--border-color);
  background:var(--bg3);
  color:var(--text-color);
}
.login-container button {
  display:block;
  width:100%;
  padding:8px;
  background:var(--neon1);
  border:none;
  color:var(--text-color);
  cursor:pointer;
  border-radius:var(--button-radius);
  transition:background-color .2s, box-shadow .2s;
}
.login-container button:hover {
  background:var(--neon2);
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* Animated background blocks */
.bg-container {
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
}

.block {
  position:absolute;
  opacity:0.8;
  left:0;
}

@keyframes move-right {
  from { transform:translateX(-110vw); }
  to { transform:translateX(110vw); }
}

@keyframes move-left {
  from { transform:translateX(110vw); }
  to { transform:translateX(-110vw); }
}

/* Image-based login and register buttons */
.login-btn,
.register-btn {
  width:100%;
  padding:0;
  height:50px; /* Increased for better readability */
  border:1px solid var(--border-color);
  background:transparent;
}
.login-btn img,
.register-btn img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Logo fade-in animation */
.logo {
  display:block;
  margin:0 auto 20px;
  width:80%;
  max-width:200px;
  height:auto;
}

@media (min-width: 768px) {
  .logo {
    max-width:400px;
  }
}
.fade-in {
  opacity:0;
  animation:fadeIn 1.5s ease-in forwards;
}
@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

.login-container button.loading {
  position:relative;
}

.login-container button.loading::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid #fff;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

/* Registration Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: var(--card-bg);
  padding: 20px;
  border-radius: var(--card-radius);
  max-width: 500px;
  width: 80%;
  text-align: center;
  box-shadow: var(--card-shadow);
}
.modal-content button {
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--neon1);
  border: none;
  color: #000;
  cursor: pointer;
  border-radius: var(--button-radius);
  transition: background-color .2s, box-shadow .2s;
}
.modal-content button:hover {
  background: var(--neon2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Liquid Glass Tile */
.glass-tile {
  width: 80px;
  height: 80px;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 1rem;
}

.glass-tile:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.1);
}

.glass-tile .icon {
  width: 32px;
  height: 32px;
  color: white;
  opacity: 0.9;
}

@media (max-width: 600px) {
  .glass-tile {
    width: 64px;
    height: 64px;
  }

  .glass-tile .icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 600px) {
  :root {
    --sidebar-width: 200px;
    --user-col-width: 80px;
  }
  #main {
    padding: 10px;
  }
  #header h1 {
    font-size: 20px;
  }
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 20;
    transform: translateX(0);
    transition: transform .3s;
  }
  #sidebar.collapsed {
    transform: translateX(-100%);
    width: var(--sidebar-width);
    padding: 20px;
  }
  #sidebar.collapsed ~ #toggle-btn {
    left: 10px;
  }
}

/* Expanding detail blob container */
#button-container {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: fit-content;
  width: fit-content;
  z-index: 30;
}

#button-container.open {
  display: block;
}

#mainbtn {
  position: absolute;
  left: 0;
  top: 0;
}

/* Instruction highlight and box */
.highlight {
  outline: 3px solid #ff0000;
  outline-offset: 2px;
  border-radius: 0;
}

/* Remove red outline for selected timeline items */
.milestone.highlight,
.time-block.highlight {
  outline: none;
}

.instruction-box {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  color: var(--neon-text);
  padding: 10px 20px;
  border-radius: var(--button-radius);
  box-shadow: var(--card-shadow);
  display: none;
  z-index: 40;
}

.instruction-box button {
  margin-left: 10px;
  border: none;
  background: var(--neon1);
  color: #fff;
  border-radius: var(--button-radius);
  padding: 4px 8px;
  cursor: pointer;
}

#action-point-container{
  margin-top:16px;
}
#ad-banner-placeholder{
  margin-top:16px;
  height:90px;
  border:1px dashed var(--border-color);
}
#action-panel{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:8px 0;
}
.action-week{
  min-width:180px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:var(--button-radius);
  padding:8px;
}
.action-week h3{
  margin:0 0 8px 0;
  font-size:14px;
}
.action-item{
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:4px;
  font-size:13px;
}


#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--border-color);
  border-top-color: var(--neon1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.layer-menu {
  position:absolute;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:4px;
  padding:4px;
  display:flex;
  flex-direction:column;
  z-index:1000;
}
.layer-menu button {
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
  font-size:14px;
}