*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #0F0E17;
      --surface:   #1A1929;
      --surface2:  #221F35;
      --border:    #2E2A4A;
      --text:      #E8E6F0;
      --text2:     #8E8BAA;
      --text3:     #5C5A72;
      --accent:    #9B59B6;
      --accent2:   #7D3C98;
      --mvp:       #2ECC71;
      --core:      #3498DB;
      --fs:        #F39C12;
      --done-bg:   #0D2D1F;
      --done:      #27AE60;
      --prog-bg:   #2D2200;
      --prog:      #F39C12;
      --idle-bg:   #1A1929;
      --idle:      #5C5A72;
      --radius:    8px;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      font-size: 14px;
      line-height: 1.5;
    }

    /* ── TOPBAR ── */
    .topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      display: flex;
      align-items: center;
      gap: 0;
      height: 52px;
      position: sticky;
      top: 0;
      z-index: 200;
    }
    .topbar-logo {
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      margin-right: 32px;
      white-space: nowrap;
    }
    .topbar-logo span { color: var(--accent); }
    .nav-tabs { display: flex; gap: 2px; }
    .nav-tab {
      padding: 6px 18px;
      border-radius: 6px;
      cursor: pointer;
      color: var(--text2);
      font-size: 13px;
      font-weight: 500;
      transition: all .15s;
      border: none;
      background: none;
    }
    .nav-tab:hover { color: var(--text); background: var(--surface2); }
    .nav-tab.active { color: var(--text); background: var(--surface2); }

    /* ── PAGES ── */
    .page { display: none; padding: 32px 24px; max-width: 1200px; margin: 0 auto; }
    .page.active { display: block; }

    /* ── SECTION HEADER ── */
    .section-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }

    /* ═══════════════════════════════════════════
       СТРАНИЦА: ПРОЕКТ
    ═══════════════════════════════════════════ */

    .project-brief-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 22px 24px;
      margin-bottom: 32px;
    }
    .project-brief-head {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: flex-start;
      margin-bottom: 18px;
    }
    .project-brief-kicker {
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .project-brief-title {
      font-size: 21px;
      line-height: 1.25;
      font-weight: 780;
      color: var(--text);
      max-width: 760px;
    }
    .project-brief-text {
      font-size: 13px;
      line-height: 1.75;
      color: var(--text2);
      max-width: 860px;
    }
    .project-brief-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 18px;
    }
    .project-brief-stat {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px 14px;
    }
    .project-brief-stat strong {
      display: block;
      font-size: 22px;
      line-height: 1;
      color: var(--text);
      margin-bottom: 5px;
    }
    .project-brief-stat span {
      font-size: 11px;
      color: var(--text3);
    }
    .project-brief-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 18px;
    }
    .project-brief-card {
      background: rgba(255,255,255,.015);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 14px 16px;
    }
    .project-brief-card h3 {
      font-size: 12px;
      color: var(--text);
      margin-bottom: 7px;
      font-weight: 700;
    }
    .project-brief-card p {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.65;
    }

    /* ── Brand Pyramid ── */
    .pyramid-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin-bottom: 40px;
    }
    .pyramid-row {
      display: flex;
      align-items: stretch;
      width: 100%;
      max-width: 760px;
      gap: 4px;
    }
    .pyramid-label {
      width: 90px;
      min-width: 90px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 12px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text3);
    }
    .pyramid-label.right {
      justify-content: flex-start;
      padding-right: 0;
      padding-left: 12px;
    }
    .pyramid-block {
      flex: 1;
      border-radius: var(--radius);
      padding: 14px 20px;
      text-align: center;
    }
    .pyramid-essence {
      background: linear-gradient(135deg, #4A235A, #6C3483);
      border: 1px solid #7D3C98;
    }
    .pyramid-essence .py-title {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      font-style: italic;
    }
    .pyramid-char {
      background: var(--surface2);
      border: 1px solid #3D2060;
    }
    .pyramid-char .py-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.15em;
      color: #C39BD3;
    }
    .pyramid-pod {
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .pyramid-pod .py-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .pyramid-pop {
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .pyramid-pop .py-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 8px;
    }
    .py-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }
    .py-tag {
      font-size: 11px;
      padding: 3px 9px;
      border-radius: 4px;
      background: var(--surface2);
      color: var(--text);
      border: 1px solid var(--border);
    }

    /* ── Insights ── */
    .insights-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 40px;
    }
    .insight-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 20px;
    }
    .insight-num {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 6px;
    }
    .insight-quote {
      font-size: 13px;
      font-style: italic;
      color: var(--text);
      margin-bottom: 6px;
    }
    .insight-body {
      font-size: 12px;
      color: var(--text2);
    }

    /* ── Compass ── */
    .compass-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 40px;
    }
    .compass-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 20px;
    }
    .compass-title {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .compass-sub {
      font-size: 11px;
      color: var(--text2);
      margin-bottom: 10px;
    }
    .compass-card.seekers { border-top: 3px solid #8E44AD; }
    .compass-card.benefit { border-top: 3px solid #2980B9; }
    .compass-card.aesthetes { border-top: 3px solid #D4AC0D; }
    .compass-pct {
      font-size: 22px;
      font-weight: 700;
      color: var(--text2);
    }

    /* ── CDJ Timeline ── */
    .cdj-wrap {
      margin-bottom: 40px;
      overflow-x: auto;
    }
    .cdj-timeline {
      display: flex;
      gap: 0;
      min-width: 700px;
    }
    .cdj-stage {
      flex: 1;
      position: relative;
    }
    .cdj-stage:not(:last-child)::after {
      content: '›';
      position: absolute;
      right: -8px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text3);
      font-size: 18px;
      z-index: 1;
    }
    .cdj-inner {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      margin: 0 4px;
      text-align: center;
    }
    .cdj-stage:first-child .cdj-inner { margin-left: 0; }
    .cdj-stage:last-child .cdj-inner { margin-right: 0; }
    .cdj-num {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--text3);
      margin-bottom: 4px;
    }
    .cdj-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
    }
    .cdj-desc {
      font-size: 10px;
      color: var(--text2);
    }

    /* ── PEC Grid ── */
    .pec-grid {
      display: grid;
      grid-template-columns: auto 1fr 1fr;
      gap: 4px;
      margin-bottom: 40px;
    }
    .pec-head {
      padding: 10px 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text2);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      text-align: center;
    }
    .pec-wave-label {
      padding: 12px 16px;
      font-size: 12px;
      font-weight: 700;
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      text-align: center;
      min-width: 110px;
    }
    .pec-wave-label.mvp   { background: #0D2D1F; border: 1px solid #1A5C39; color: var(--mvp); }
    .pec-wave-label.core  { background: #0D1F2D; border: 1px solid #1A4A6E; color: var(--core); }
    .pec-wave-label.fs    { background: #2D1F00; border: 1px solid #6E4A00; color: var(--fs); }
    .pec-wave-period {
      font-size: 10px;
      font-weight: 400;
      opacity: 0.7;
    }
    .pec-blocks-cell {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 16px;
    }
    .pec-block-item {
      font-size: 12px;
      padding: 4px 0;
      color: var(--text2);
      border-bottom: 1px solid var(--border);
    }
    .pec-block-item:last-child { border-bottom: none; }
    .pec-block-num {
      font-size: 10px;
      font-weight: 700;
      color: var(--text3);
      margin-right: 6px;
    }

    /* ── Project Status ── */
    .status-timeline {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 32px;
    }
    .status-event {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      margin-top: 5px;
      flex-shrink: 0;
    }
    .status-date {
      font-size: 11px;
      color: var(--text3);
      min-width: 90px;
    }
    .status-text { font-size: 13px; color: var(--text2); }
    .status-text strong { color: var(--text); }


    /* ═══════════════════════════════════════════
       СТРАНИЦА: ТРЕКЕР
    ═══════════════════════════════════════════ */

    /* ── Stats Bar ── */
    .stats-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 24px;
    }
    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 18px;
      text-align: center;
    }
    .stat-num {
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 4px;
    }
    .stat-label { font-size: 11px; color: var(--text2); }
    .stat-num.total  { color: var(--text); }
    .stat-num.done   { color: var(--done); }
    .stat-num.prog   { color: var(--prog); }
    .stat-num.idle   { color: var(--text3); }

    /* ── Roadmap Dashboard ── */
    .roadmap-hero {
      background: linear-gradient(135deg, #161523 0%, #221F35 58%, #182B2B 100%);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 22px 24px;
      margin-bottom: 14px;
    }
    .roadmap-hero-top {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: flex-start;
      margin-bottom: 18px;
    }
    .roadmap-kicker {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .roadmap-title {
      font-size: 24px;
      font-weight: 750;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 8px;
    }
    .roadmap-subtitle {
      max-width: 720px;
      font-size: 13px;
      color: var(--text2);
      line-height: 1.6;
    }
    .wave-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }
    .wave-card {
      background: rgba(15,14,23,.62);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
    }
    .wave-card-title {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .wave-card-meta {
      font-size: 11px;
      color: var(--text2);
      margin-bottom: 8px;
    }
    .mini-bar {
      height: 5px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }
    .mini-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width .25s;
    }
    .phase-strip {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 8px;
    }
    .phase-card {
      background: rgba(15,14,23,.56);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px;
      min-height: 82px;
    }
    .phase-label {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      color: var(--text);
      font-weight: 700;
      margin-bottom: 4px;
    }
    .phase-period {
      font-size: 10px;
      color: var(--text3);
      min-height: 28px;
    }
    .phase-count {
      margin-top: 8px;
      font-size: 18px;
      line-height: 1;
      font-weight: 750;
    }
    .now-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
      margin-bottom: 20px;
    }
    .now-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 10px;
    }
    .now-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .now-item {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 9px 10px;
      font-size: 12px;
      color: var(--text);
    }
    .now-item span {
      display: block;
      color: var(--text3);
      font-size: 10px;
      margin-top: 2px;
    }

    /* ── Controls ── */
    .controls {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 18px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .controls-row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .wave-tabs {
      display: flex;
      gap: 4px;
    }
    .wave-btn {
      padding: 6px 16px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: none;
      color: var(--text2);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
    }
    .wave-btn:hover { color: var(--text); }
    .wave-btn.active.mvp  { background: #0D2D1F; border-color: var(--mvp); color: var(--mvp); }
    .wave-btn.active.core { background: #0D1F2D; border-color: var(--core); color: var(--core); }
    .wave-btn.active.fs   { background: #2D1F00; border-color: var(--fs); color: var(--fs); }
    .wave-btn.active.neutral { background: var(--surface2); border-color: var(--text2); color: var(--text); }
    .phase-filter {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .phase-filter .wave-btn {
      min-width: 34px;
      padding-left: 0;
      padding-right: 0;
    }

    .filter-select {
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      font-size: 12px;
      cursor: pointer;
    }
    .filter-select:focus { outline: none; border-color: var(--accent); }

    .search-input {
      padding: 5px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      font-size: 12px;
      width: 200px;
    }
    .search-input::placeholder { color: var(--text3); }
    .search-input:focus { outline: none; border-color: var(--accent); }

    .btn-reset {
      padding: 5px 12px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: none;
      color: var(--text3);
      font-size: 12px;
      cursor: pointer;
    }
    .btn-reset:hover { color: var(--text); }

    /* ── Task Groups ── */
    .task-groups { display: flex; flex-direction: column; gap: 20px; }

    .roadmap-lane {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }
    .roadmap-lane-head {
      padding: 12px 16px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }
    .roadmap-lane-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }
    .roadmap-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(120px, 1fr));
      gap: 0;
      overflow-x: auto;
    }
    .roadmap-cell {
      min-height: 96px;
      border-right: 1px solid var(--border);
      padding: 10px;
    }
    .roadmap-cell:last-child { border-right: 0; }
    .roadmap-cell-title {
      font-size: 10px;
      color: var(--text3);
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }
    .roadmap-chip {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-left: 3px solid var(--text3);
      border-radius: 6px;
      padding: 7px 8px;
      margin-bottom: 6px;
      font-size: 11px;
      line-height: 1.35;
      color: var(--text);
    }
    .roadmap-chip-meta {
      color: var(--text3);
      font-size: 10px;
      margin-top: 4px;
    }
    .dept-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      vertical-align: baseline;
    }

    .task-group {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .group-header {
      padding: 12px 18px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
    }
    .group-header:hover { background: #252340; }
    .group-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .department-header .group-title {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0;
    }
    .group-meta {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .group-badge {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .group-badge.done  { background: var(--done-bg); color: var(--done); }
    .group-badge.total { background: var(--surface); color: var(--text2); border: 1px solid var(--border); }
    .group-toggle-icon {
      font-size: 12px;
      color: var(--text3);
      transition: transform .2s;
    }
    .group-toggle-icon.open { transform: rotate(180deg); }
    .group-body { display: none; }
    .group-body.open { display: block; }

    /* ── Task Card ── */
    .task-card {
      padding: 13px 18px;
      border-bottom: 1px solid var(--border);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: start;
      transition: background .1s;
    }
    .task-card:last-child { border-bottom: none; }
    .task-card:hover { background: var(--surface2); }

    .task-name {
      font-size: 13px;
      color: var(--text);
      margin-bottom: 4px;
      cursor: pointer;
    }
    .task-result {
      font-size: 12px;
      color: var(--text2);
      display: none;
      margin-top: 4px;
    }
    .task-result.show { display: block; }
    .task-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 6px;
    }
    .task-tag {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 4px;
      border: 1px solid var(--border);
      color: var(--text3);
    }
    .task-tag.dept  { color: #C39BD3; border-color: #4A235A; }
    .task-tag.cdj   { color: #85C1E9; border-color: #1A4A6E; }
    .task-tag.seg   { color: #A9DFBF; border-color: #145A32; }

    .task-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }
    .status-selector {
      display: flex;
      gap: 4px;
    }
    .status-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: none;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      position: relative;
    }
    .status-btn:hover { border-color: var(--text2); }
    .status-btn.active.s-done     { background: var(--done-bg); border-color: var(--done); }
    .status-btn.active.s-progress { background: var(--prog-bg); border-color: var(--prog); }
    .status-btn.active.s-idle     { background: var(--surface2); border-color: var(--text3); }

    .assignee-input {
      font-size: 11px;
      background: none;
      border: none;
      border-bottom: 1px solid var(--border);
      color: var(--text2);
      width: 100px;
      text-align: right;
      padding: 2px 0;
    }
    .assignee-input::placeholder { color: var(--text3); }
    .assignee-input:focus { outline: none; border-color: var(--accent); }

    /* ── Progress Bar ── */
    .progress-section {
      margin-bottom: 20px;
    }
    .progress-header {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text2);
      margin-bottom: 6px;
    }
    .progress-bar-bg {
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }
    .progress-bar-fill {
      height: 100%;
      background: var(--done);
      border-radius: 3px;
      transition: width .3s;
    }

    /* ── Empty State ── */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--text3);
      font-size: 13px;
    }

    /* ── Loading ── */
    .loading {
      text-align: center;
      padding: 32px;
      color: var(--text3);
      font-size: 13px;
    }
    .loading::after {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .7s linear infinite;
      margin-left: 8px;
      vertical-align: middle;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Misc ── */
    .section-gap { height: 40px; }
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }

    @media (max-width: 768px) {
      .page { padding: 16px 12px; }
      .project-brief-head { flex-direction: column; }
      .project-brief-stats { grid-template-columns: repeat(2, 1fr); }
      .project-brief-grid { grid-template-columns: 1fr; }
      .insights-grid { grid-template-columns: 1fr; }
      .compass-grid  { grid-template-columns: 1fr; }
      .pec-grid      { grid-template-columns: auto 1fr; }
      .stats-bar     { grid-template-columns: repeat(2, 1fr); }
      .wave-summary  { grid-template-columns: 1fr; }
      .phase-strip   { grid-template-columns: repeat(2, 1fr); }
      .now-list      { grid-template-columns: 1fr; }
      .roadmap-hero-top { flex-direction: column; }
      .controls-row  { flex-wrap: wrap; }
    }


/* ── Cycle status button ── */
  .cycle-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: none;
    cursor: pointer;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
  }
  .cycle-btn:hover { border-color: var(--text2); }
  .cycle-btn.s-done     { background: var(--done-bg); border-color: var(--done); color: var(--done); }
  .cycle-btn.s-progress { background: var(--prog-bg); border-color: var(--prog); color: var(--prog); }
  .cycle-btn.s-idle     { color: var(--text3); }

  /* ── Project card ── */
  .proj-card { margin-bottom: 6px; }
  .proj-header { transition: background .1s; }
  .proj-header:hover { background: var(--surface2) !important; }

  /* ── Group body for projects ── */
  .proj-group-body { padding: 10px 14px; display: flex; flex-direction: column; }
  .group-body.open .proj-group-body { display: flex; }