:root {
      --sidebar-width: 360px;
      --month-width: 130px;
      --row-height: 46px;
      --header-height: 78px;
      --month-count: 78;
      --timeline-width: 10140px;

      --bg: #f4f6f9;
      --panel: #ffffff;
      --border: #d8dee8;
      --border-strong: #b8c2d1;
      --text: #1f2937;
      --muted: #667085;
      --accent: #2457c5;
      --accent-soft: #e8efff;
      --team: #eef3f9;
      --subteam: #f7f9fc;
      --project: #ffffff;

      --bar-default: #4f73d9;
      --bar-green: #2f9e67;
      --bar-orange: #d97706;
      --bar-red: #c83e4d;
      --bar-purple: #7c4dca;
      --bar-teal: #178c8c;
    }

    * {
      box-sizing: border-box;
    }

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.app {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      background: #17233c;
      color: #ffffff;
      border-bottom: 1px solid #0f172a;
    }

    .toolbar h1 {
      margin: 0 18px 0 0;
      font-size: 21px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .toolbar button,
    .toolbar select {
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.08);
      color: #ffffff;
      border-radius: 7px;
      padding: 8px 11px;
      font-size: 14px;
      cursor: pointer;
    }

    .toolbar button:hover,
    .toolbar select:hover {
      background: rgba(255,255,255,0.14);
    }

    .toolbar select option {
      color: #111827;
      background: #ffffff;
    }

    .timeline-control {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 600;
      color: #d9e2f2;
    }

    .year-range-control {
      position: relative;
    }

    .year-range-button {
      min-width: 108px;
      text-align: left;
    }

    .year-range-button::after {
      content: "▾";
      float: right;
      margin-left: 12px;
    }

    .year-range-popup {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 100;
      width: 248px;
      padding: 16px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #ffffff;
      color: var(--text);
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
    }

    .year-range-popup[hidden] {
      display: none;
    }

    .year-range-popup strong {
      display: block;
      margin-bottom: 12px;
      font-size: 15px;
    }

    .year-range-popup label {
      display: grid;
      gap: 5px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .year-range-popup select {
      width: 100%;
      border-color: var(--border-strong);
      background: #ffffff;
      color: var(--text);
    }

    .year-range-actions {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 16px;
    }

    .toolbar .year-range-popup button {
      flex: 1;
      border-color: var(--border-strong);
      background: #ffffff;
      color: var(--text);
    }

    .toolbar .year-range-popup button:hover {
      background: #f3f6fa;
    }

    .toolbar .year-range-popup .year-range-apply {
      border-color: var(--accent);
      background: var(--accent);
      color: #ffffff;
      font-weight: 700;
    }

    .toolbar .year-range-popup .year-range-apply:hover {
      background: #1f4dac;
    }

    .legend {
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: #d9e2f2;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .legend-swatch {
      width: 13px;
      height: 13px;
      border-radius: 3px;
    }
.app-header {
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
}

.roadmap-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--panel);
}

    .roadmap {
      min-width: calc(var(--sidebar-width) + var(--timeline-width));
      display: grid;
      grid-template-columns: var(--sidebar-width) var(--timeline-width);
      align-items: start;
    }

    .left-column,
    .timeline-column {
      min-width: 0;
    }

    .left-column {
      position: sticky;
      left: 0;
      z-index: 8;
      background: var(--panel);
      box-shadow: 5px 0 12px rgba(31, 41, 55, 0.08);
    }

    .left-header {
      position: sticky;
      top: 0;
      z-index: 15;
      height: var(--header-height);
      padding: 18px 18px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #ffffff;
      border-right: 1px solid var(--border-strong);
      border-bottom: 1px solid var(--border-strong);
    }

    .left-header strong {
      font-size: 17px;
    }

    .left-header span {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .timeline-header {
      position: sticky;
      top: 0;
      z-index: 10;
      height: var(--header-height);
      display: grid;
      grid-template-columns: repeat(var(--month-count), var(--month-width));
      background: #ffffff;
      border-bottom: 1px solid var(--border-strong);
    }

    .month-header {
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 700;
      color: #344054;
    }

    .month-header .year {
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
    }

    .month-header.january {
      border-left: 2px solid #90a1ba;
    }

    .name-row {
      height: var(--row-height);
      border-right: 1px solid var(--border-strong);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 12px;
      overflow: hidden;
      background: #ffffff;
    }

    .timeline-row {
      position: relative;
      height: var(--row-height);
      display: grid;
      grid-template-columns: repeat(var(--month-count), var(--month-width));
      border-bottom: 1px solid var(--border);
      background: #ffffff;
    }

    .grid-cell {
      border-right: 1px solid var(--border);
    }

    .grid-cell.january {
      border-left: 2px solid #90a1ba;
    }

    .row.team > .name-row,
    .name-row.team {
      background: var(--team);
      font-weight: 700;
    }

    .row.subteam > .name-row,
    .name-row.subteam {
      background: var(--subteam);
      font-weight: 650;
    }

    .name-row.project {
      background: var(--project);
    }

    .timeline-row.team {
      background: linear-gradient(to right, rgba(36,87,197,0.05), rgba(36,87,197,0.01));
    }

    .timeline-row.subteam {
      background: rgba(238,243,249,0.45);
    }

    .label {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      width: 100%;
    }

    .label-text {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .indent-0 { padding-left: 0; }
    .indent-1 { padding-left: 18px; }
    .indent-2 { padding-left: 38px; }
    .indent-3 { padding-left: 58px; }

    .toggle {
      width: 22px;
      height: 22px;
      border: none;
      border-radius: 5px;
      background: transparent;
      color: #344054;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .toggle:hover {
      background: rgba(36,87,197,0.10);
    }

    .project-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #98a2b3;
      flex: 0 0 auto;
      margin-left: 7px;
      margin-right: 7px;
    }

    .project-bar {
      position: absolute;
      top: 8px;
      height: 29px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      box-shadow: 0 1px 3px rgba(16,24,40,0.22);
      cursor: pointer;
      z-index: 3;
    }

    .project-bar:hover {
      filter: brightness(1.05);
      transform: translateY(-1px);
    }

    .project-bar.default { background: var(--bar-default); }
    .project-bar.green { background: var(--bar-green); }
    .project-bar.orange { background: var(--bar-orange); }
    .project-bar.red { background: var(--bar-red); }
    .project-bar.purple { background: var(--bar-purple); }
    .project-bar.teal { background: var(--bar-teal); }

    .hidden-row {
      display: none !important;
    }

    .today-line {
      position: absolute;
      top: var(--header-height);
      bottom: 0;
      width: 2px;
      background: #d92d20;
      z-index: 5;
      pointer-events: none;
    }

    .today-line::before {
      content: "Today";
      position: absolute;
      top: 2px;
      left: 5px;
      padding: 2px 5px;
      border-radius: 4px;
      background: #d92d20;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
    }

    .tooltip {
      position: fixed;
      display: none;
      z-index: 50;
      max-width: 320px;
      padding: 10px 12px;
      border-radius: 7px;
      background: #111827;
      color: #ffffff;
      font-size: 12px;
      line-height: 1.4;
      box-shadow: 0 6px 18px rgba(0,0,0,0.25);
      pointer-events: none;
    }

    .tooltip strong {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
    }


    .row-actions { margin-left:auto; display:flex; gap:4px; opacity:0; }
    .name-row:hover .row-actions { opacity:1; }
    .row-action { width:26px; height:26px; border:1px solid #cbd5e1; border-radius:5px; background:#fff; cursor:pointer; color:#475467; padding:0; }
    .row-action:hover { background:#eef3f9; }
    .row-action.delete:hover { color:#b42318; background:#fff1f0; border-color:#f1b7b2; }

    @media (max-width: 800px) {
      :root {
        --sidebar-width: 280px;
        --month-width: 110px;
      }

      .legend {
        width: 100%;
        margin-left: 0;
      }
    }

    @media print {
      .toolbar {
        display: none;
      }

      .roadmap-shell {
        overflow: visible;
      }

      .left-column,
      .left-header,
      .timeline-header {
        position: static;
      }

      .roadmap {
        transform-origin: top left;
      }
    }
  
    .toolbar .primary-action { background:#fff; color:#17233c; font-weight:700; }
    .toolbar .primary-action:hover { background:#eef3f9; }
    .search-box { min-width:220px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; border-radius:7px; padding:8px 11px; }
    .search-box::placeholder { color:#cbd5e1; }
    .drawer-backdrop { position:fixed; inset:0; z-index:100; display:none; background:rgba(15,23,42,.36); backdrop-filter:blur(2px); }
    .drawer-backdrop.open { display:block; }
    .drawer { position:absolute; inset:0 0 0 auto; width:min(520px,94vw); background:#fff; border-left:1px solid var(--border); box-shadow:-18px 0 50px rgba(15,23,42,.22); overflow:auto; animation:drawerIn .18s ease-out; }
    @keyframes drawerIn { from { transform:translateX(28px); opacity:0; } to { transform:none; opacity:1; } }
    .drawer-header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
    .drawer-header h2 { margin:0; font-size:20px; }
    .drawer-close { width:34px; height:34px; border:1px solid var(--border); border-radius:8px; background:#fff; font-size:22px; cursor:pointer; color:#667085; }
    .drawer-body { padding:22px; }
    .drawer-note { margin:0 0 18px; padding:12px 14px; border:1px solid #dbe5f5; border-radius:8px; background:#f6f9ff; color:#475467; font-size:13px; line-height:1.45; }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .field { display:flex; flex-direction:column; gap:6px; }
    .field.full { grid-column:1/-1; }
    .field label { font-size:13px; font-weight:700; color:#344054; }
    .field input,.field select,.field textarea { width:100%; border:1px solid #cbd5e1; border-radius:7px; padding:9px 10px; color:#111827; background:#fff; }
    .metadata-option-control { display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:8px; align-items:center; }
    .field input.metadata-color-input { width:48px; height:38px; padding:3px; cursor:pointer; }
    .metadata-color-input::-webkit-color-swatch-wrapper { padding:2px; }
    .metadata-color-input::-webkit-color-swatch { border:0; border-radius:4px; }
    .metadata-color-input::-moz-color-swatch { border:0; border-radius:4px; }
    .metadata-color-input:disabled { cursor:not-allowed; opacity:.55; }
    .field-help { color:var(--muted); font-size:11px; line-height:1.35; }
    .field textarea { min-height:92px; resize:vertical; }
    .drawer-footer { position:sticky; bottom:0; z-index:2; display:flex; gap:10px; padding:16px 22px; border-top:1px solid var(--border); background:rgba(248,250,252,.97); backdrop-filter:blur(8px); }
    .drawer-footer .right { margin-left:auto; display:flex; gap:10px; }
    .button { border:1px solid #cbd5e1; border-radius:7px; padding:9px 14px; background:#fff; color:#344054; cursor:pointer; }
    .button:hover { background:#f8fafc; }
    .button.primary { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }
    .button.danger { background:#fff4f5; color:#b42318; border-color:#f4c7cd; }
    .selection-ring { outline:2px solid rgba(36,87,197,.42); outline-offset:-2px; }
    @media (max-width:700px) { .form-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .search-box { min-width:160px; } }


/* Compact utility buttons */
#exportButton,
#importButton,
#resetButton{
    font-size:12px !important;
    padding:5px 10px !important;
    min-height:28px;
    border-radius:5px !important;
    opacity:.82;
}

#exportButton:hover,
#importButton:hover,
#resetButton:hover{
    opacity:1;
}

#exportButton{
    margin-left:24px;
}

#importButton,
#resetButton{
    margin-left:4px;
}


/* Utility icon buttons */
#exportButton,#importButton,#resetButton{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  padding:0 !important;
  font-size:16px !important;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px !important;
  margin-left:4px !important;
}
#exportButton{margin-left:24px!important;}


#exportButton svg,
#importButton svg,
#resetButton svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  pointer-events:none;
}

#exportButton,
#importButton,
#resetButton{
  transition:all .15s ease;
}

#exportButton:hover,
#importButton:hover,
#resetButton:hover{
  transform:translateY(-1px);
}


.project-bar[data-priority="Have to"]{box-shadow: inset 5px 0 0 #d92d20,0 1px 3px rgba(16,24,40,.22);}
.project-bar[data-priority="Like to"]{box-shadow: inset 5px 0 0 #f59e0b,0 1px 3px rgba(16,24,40,.22);}
.project-bar[data-priority="Nice to Have"]{box-shadow: inset 5px 0 0 #22c55e,0 1px 3px rgba(16,24,40,.22);}


.file-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  margin-left: 6px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #d9e2f2;
  font-size: 11px;
  white-space: nowrap;
}
.file-status.connected {
  color: #d1fadf;
  border-color: rgba(47,158,103,.55);
  background: rgba(47,158,103,.14);
}
.file-status.warning {
  color: #fef0c7;
  border-color: rgba(217,119,6,.55);
  background: rgba(217,119,6,.14);
}

.startup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(4px);
}
.startup-backdrop.open { display: flex; }

.startup-card {
  width: min(560px, 96vw);
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.startup-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(17%) sepia(19%) saturate(1567%) hue-rotate(181deg) brightness(91%) contrast(89%);
}
.startup-card h2 {
  margin: 22px 0 8px;
  font-size: 24px;
}
.startup-card p {
  margin: 0;
  color: #667085;
  line-height: 1.55;
}
.startup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.startup-action {
  min-height: 74px;
  padding: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  text-align: left;
}
.startup-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.startup-action strong {
  display: block;
  margin-bottom: 4px;
  color: #1f2937;
}
.startup-action.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.startup-action.primary strong { color: #fff; }
.startup-action.primary:hover { filter: brightness(1.04); }
.startup-note {
  margin-top: 18px !important;
  font-size: 12px;
}

@media (max-width: 620px) {
  .startup-actions { grid-template-columns: 1fr; }
}


/* Timeline layering corrections */
.timeline-column {
  position: relative;
  z-index: 1;
}

.left-column {
  z-index: 30;
}

.left-header {
  z-index: 40;
  isolation: isolate;
}

.timeline-header {
  z-index: 20;
}

.today-line {
  z-index: 12;
  box-shadow: 0 0 0 1px rgba(217,45,32,.08);
}

.today-line::before {
  z-index: 13;
}


/* Move item dialog */
.move-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15,23,42,.54);
  backdrop-filter: blur(3px);
}
.move-backdrop.open { display: flex; }

.move-dialog {
  width: min(520px, 96vw);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  overflow: hidden;
}
.move-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.move-header h3 {
  margin: 0;
  font-size: 18px;
}
.move-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: #667085;
  font-size: 20px;
  cursor: pointer;
}
.move-body {
  padding: 20px;
}
.move-help {
  margin: 0 0 16px;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}
.move-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.move-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.move-field label {
  font-size: 13px;
  font-weight: 700;
  color: #344054;
}
.move-field select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #111827;
}
.move-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
}


.timeline-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
  color: #d9e2f2;
}
.timeline-control select {
  min-width: 88px;
}
#yearFilter { min-width: 104px; }
#timelineScale { min-width: 96px; }

.timeline-header,
.timeline-row {
  grid-template-columns: repeat(var(--month-count), var(--month-width));
}

.month-header.scale-quarter,
.month-header.scale-year {
  font-size: 13px;
}

.project-link {
  margin-left: auto;
  padding-left: 8px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.project-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  pointer-events: none;
}
.project-bar.has-link {
  padding-right: 8px;
}

/* View-only published edition */
.view-only-mode #addItem,
.view-only-mode #exportData,
.view-only-mode #importData,
.view-only-mode #resetData,
.view-only-mode #fileStatus,
.view-only-mode #importFile,
.view-only-mode .row-actions,
.view-only-mode .drawer-backdrop,
.view-only-mode .startup-backdrop,
.view-only-mode .move-backdrop {
  display: none !important;
}

.view-only-mode .project-bar {
  cursor: default;
}

.view-only-mode .toolbar h1::after {
  content: "  •  View Only";
  color: #aebbd0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2px;
  white-space: nowrap;
}

.publish-error {
  display: none;
  padding: 12px 18px;
  border-bottom: 1px solid #f4c7cd;
  background: #fff4f5;
  color: #b42318;
  font-size: 13px;
}
.publish-error.visible {
  display: block;
}


.local-file-prompt {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #d8dee8;
  background: #eef6ff;
  color: #344054;
  font-size: 13px;
}
.local-file-prompt.visible {
  display: flex;
}
.local-file-prompt button {
  border: 1px solid #2457c5;
  border-radius: 6px;
  padding: 7px 11px;
  background: #2457c5;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
.local-file-prompt button:hover {
  filter: brightness(1.05);
}


/* Timeline layering corrections */
.timeline-column {
  position: relative;
  z-index: 1;
}

.left-column {
  z-index: 30;
}

.left-header {
  z-index: 40;
  isolation: isolate;
}

.timeline-header {
  z-index: 20;
}

.today-line {
  z-index: 12;
  box-shadow: 0 0 0 1px rgba(217,45,32,.08);
}

.today-line::before {
  z-index: 13;
}


.timeline-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
  color: #d9e2f2;
}
.timeline-control select {
  min-width: 88px;
}
#yearFilter { min-width: 104px; }
#timelineScale { min-width: 96px; }

.timeline-header,
.timeline-row {
  grid-template-columns: repeat(var(--month-count), var(--month-width));
}

.month-header.scale-quarter,
.month-header.scale-year {
  font-size: 13px;
}

.project-link {
  margin-left: auto;
  padding-left: 8px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.project-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  pointer-events: none;
}
.project-bar.has-link {
  padding-right: 8px;
}

.project-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Studio safeguards */
.studio-mode #addItem,
.studio-mode #exportData,
.studio-mode #importData,
.studio-mode #resetData,
.studio-mode #fileStatus,
.studio-mode .row-actions {
  display: initial;
}

.studio-mode .row-actions {
  display: flex;
}

.studio-mode .drawer-backdrop.open {
  display: block;
}

.studio-mode .startup-backdrop.open,
.studio-mode .move-backdrop.open {
  display: flex;
}

.studio-mode .toolbar h1::after {
  content: none;
}


/* External product logo */
.app-logo,
.startup-logo,
.hero-logo {
  display: block;
  width: auto;
  object-fit: contain;
}

/* Application header */
.app-header {
  flex: 0 0 auto;
  background: #17233c;
  color: #ffffff;
  border-bottom: 1px solid #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
}

.brand-bar {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 8px 20px 6px;
  background: #17233c;
}

.hero-logo {
  height: 58px;
  max-width: min(520px, 58vw);
}

.app-header .toolbar {
  min-height: 0;
  padding: 9px 20px 11px;
  border-top: 1px solid rgba(255,255,255,0.09);
  border-bottom: 0;
  box-shadow: none;
}

/* Keep team and subteam colors identical in Studio and Viewer. */
.studio-mode .name-row.team,
.view-only-mode .name-row.team {
  background: var(--team);
  color: var(--text);
  font-weight: 700;
}

.studio-mode .name-row.subteam,
.view-only-mode .name-row.subteam {
  background: var(--subteam);
  color: var(--text);
  font-weight: 650;
}

.studio-mode .timeline-row.team,
.view-only-mode .timeline-row.team {
  background: linear-gradient(
    to right,
    rgba(36,87,197,0.05),
    rgba(36,87,197,0.01)
  );
}

.studio-mode .timeline-row.subteam,
.view-only-mode .timeline-row.subteam {
  background: rgba(238,243,249,0.45);
}

@media (max-width: 900px) {
  .brand-bar {
    min-height: 64px;
    padding: 7px 16px 5px;
  }

  .hero-logo {
    height: 50px;
    max-width: min(520px, 78vw);
  }

  .app-header .toolbar {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 620px) {
  .brand-bar {
    justify-content: center;
  }

  .hero-logo {
    height: 44px;
    max-width: 90vw;
  }
}

/* Link-style All Years action */
.toolbar .year-range-popup #yearRangeAll {
  flex: 0 0 auto;
  padding-left: 4px;
  padding-right: 4px;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.toolbar .year-range-popup #yearRangeAll:hover {
  border-color: transparent;
  background: transparent;
  color: #1f4dac;
  text-decoration: underline;
}