/* The roadmap page: the glaze, the log, the expandable rows and the VS Code mocks. Plain CSS, straight from the reviewed mock. */
  /* Roadmap: the glaze */
  .stats { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 32px; margin: 18px 0 14px; }
  .stat-big { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; }
  .stat-n { font-size: 64px; font-weight: 800; letter-spacing: -.045em; line-height: .95; color: var(--bisque); }
  .stat-of { font-size: 20px; color: var(--ink-dim); }
  .stat-lbl { grid-column: 1 / -1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
  .legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 6px 22px; font-size: 13px; color: var(--ink-dim); }
  .legend b { color: var(--ink); font-family: var(--mono); font-weight: 600; margin-right: 2px; }
  .sw-l { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 8px; }
  .st-done { background: linear-gradient(160deg, rgba(255,255,255,.32), rgba(255,255,255,0) 50%), var(--glaze); box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 -2px 0 rgba(0,0,0,.18); }
  .st-v1 { background: rgba(236,226,208,.32); box-shadow: inset 0 0 0 1px rgba(236,226,208,.75); }
  .st-after { box-shadow: inset 0 0 0 1px rgba(236,226,208,.28); background-color: rgba(236,226,208,.04); background-image: radial-gradient(circle, rgba(236,226,208,.5) 1px, transparent 1.5px); background-size: 5px 5px; }
  .st-never { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); background-color: rgba(255,255,255,.025); }
  .sw-l.st-next { position: relative; background: rgba(236,226,208,.32); box-shadow: inset 0 0 0 1px rgba(236,226,208,.75); }
  .sw-l.st-next::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--green); }

  .cloth { border: 1px solid var(--card-border); border-radius: 14px; background:
      radial-gradient(circle at 20% 0%, rgba(74,144,217,.08), transparent 55%),
      #15181e; padding: 12px 14px 16px; margin: 0 0 14px; }
  .cloth-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
  .cloth-title { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
  .seg { display: inline-flex; border: 1px solid var(--card-border); border-radius: 999px; padding: 2px; background: #0e1015; }
  .seg button { background: none; border: 0; color: var(--ink-dim); font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
  .seg button.on { background: var(--card-bg-2); color: var(--ink); box-shadow: 0 0 0 1px var(--card-border); }
  .cloth-body { position: relative; }
  .cloth-grid { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 3px; margin-right: 52px; }
  .cloth-areas .arow { display: grid; grid-template-columns: 172px minmax(0, 1fr) 52px; align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.05); }
  .cloth-areas .arow:first-child { border-top: 0; }
  .cloth-areas .alabel { font-size: 12px; color: var(--ink-dim); text-align: right; padding-right: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
  .cloth-areas .alabel i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
  .cloth-areas .acount { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
  .cloth-areas .acells { display: flex; flex-wrap: wrap; gap: 3px; }
  .cloth-areas .acells .sq { width: 16px; height: 16px; flex: none; }
  .sq { position: relative; appearance: none; aspect-ratio: 1; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 3px; background: transparent; cursor: pointer; transform-origin: center;
        animation: fire .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 4ms); }
  .sq.moving { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
  @keyframes fire { from { opacity: 0; transform: scale(.4); filter: brightness(2); } to { opacity: 1; transform: none; filter: none; } }
  .sq[data-stage="done"] { background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,0) 52%), var(--glaze); box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), inset 0 -2px 0 rgba(0,0,0,.18); }
  .sq[data-stage="done"].tb { background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 52%), var(--glaze-2); }
  .sq[data-stage="v1"] { background: rgba(236,226,208,.30); box-shadow: inset 0 0 0 1px rgba(236,226,208,.75), inset 0 -2px 0 rgba(0,0,0,.12); }
  .sq[data-stage="v1"].tb { background: rgba(236,226,208,.38); }
  .sq[data-stage="after"] { box-shadow: inset 0 0 0 1px rgba(236,226,208,.28); background-color: rgba(236,226,208,.04); background-image: radial-gradient(circle, rgba(236,226,208,.5) 1px, transparent 1.5px); background-size: 5px 5px; }
  .sq[data-stage="after"].tb { background-color: rgba(236,226,208,.08); }
  .sq[data-stage="never"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); background-color: rgba(255,255,255,.025); }
  .sq:hover, .sq:focus-visible { outline: 2px solid var(--bisque); outline-offset: 1px; z-index: 3; }
  .sq.next::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #15181e; }
  .seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
  .seam .under { fill: none; stroke: #15181e; stroke-width: 7; stroke-linejoin: round; }
  .seam .over { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 7 4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(224,185,79,.7)); }
  .seam .tag { fill: var(--gold); }
  .seam .tagtext { font: 700 11px var(--mono); fill: #15181e; }
  .tip { position: absolute; z-index: 5; max-width: 340px; background: #0e1015; border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45; color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.45); pointer-events: none; }
  .tip .tn { font-family: var(--mono); color: var(--ink-faint); margin-right: 6px; }
  .tip .ts { display: block; margin-top: 3px; color: var(--ink-dim); }
  .tip .ts.done { color: #9fc4f2; }
  .tip .ts.v1 { color: var(--bisque); }

  .v1box { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: start; border: 1px solid rgba(224,185,79,.35); background: linear-gradient(180deg, rgba(224,185,79,.10), rgba(224,185,79,.03)); border-radius: 12px; padding: 14px 16px; margin: 0 0 6px; font-size: 14px; }
  .v1box-ver { font-family: var(--mono); font-weight: 800; font-size: 26px; color: var(--gold); line-height: 1; padding-top: 2px; }
  .nextup { margin-top: 8px; font-size: 13px; color: var(--ink-dim); }
  .nextup span { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--green); border-radius: 4px; padding: 2px 6px; margin-right: 8px; }

  /* Roadmap: the log */
  .listbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0 12px; }
  .filters { display: flex; flex-wrap: wrap; gap: 6px; }
  .fbtn { background: none; border: 1px solid var(--card-border); color: var(--ink-dim); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; }
  .fbtn.on { border-color: var(--bisque-dim); color: var(--bisque); background: rgba(74,144,217,.14); }
  .asel { background: #0e1015; color: var(--ink); border: 1px solid var(--card-border); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; }
  .plist { position: relative; border: 1px solid var(--card-border); border-radius: 12px; overflow: clip; background: var(--card-bg); }
  .loggraph { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; }
  .tierhead { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; background: var(--card-bg-2); border-top: 1px solid var(--card-border); }
  .tierhead:first-child { border-top: 0; }
  .tier-name { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; color: var(--bisque); }
  .tier-sub { font-size: 12px; color: var(--ink-faint); margin-left: 8px; }
  .tier-prog { width: 220px; max-width: 45%; font-size: 11px; color: var(--ink-dim); }
  .tier-prog span { display: block; margin-bottom: 4px; text-align: right; }
  .segbar { display: flex; width: 100%; border-radius: 999px; overflow: hidden; background: #2a2f39; }
  .segbar span { display: block; height: 100%; }
  .segbar .s-done { background: var(--glaze); }
  .segbar .s-v1 { background: var(--bisque-dim); }
  .segbar .s-after { background: radial-gradient(circle, rgba(236,226,208,.5) 1px, transparent 1.4px) 0 0 / 5px 5px; }
  .segbar .s-never { background: #2a2f39; }
  .prow { position: relative; z-index: 1; display: grid; grid-template-columns: 34px 96px 18px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 7px 14px; border-top: 1px solid #232833; font-size: 13.5px; scroll-margin-top: 48px; }
  .prow:hover { background: rgba(255,255,255,.025); }
  .prow.flash { animation: flash 1.6s ease-out; }
  @keyframes flash { 0% { background: rgba(74,144,217,.35); } 100% { background: transparent; } }
  .prow .rank { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); text-align: right; }
  .sw { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; font-size: 11px; line-height: 1; }
  .sw.done { background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,0) 52%), var(--glaze); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }
  .sw.done::after { content: "✓"; font-weight: 700; }
  .sw.v1 { background: rgba(236,226,208,.32); box-shadow: inset 0 0 0 1px rgba(236,226,208,.75); }
  .sw.after { box-shadow: inset 0 0 0 1px rgba(236,226,208,.28); background-image: radial-gradient(circle, rgba(236,226,208,.5) 1px, transparent 1.5px); background-size: 5px 5px; }
  .sw.no { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
  .sw.no::after { content: "×"; color: var(--ink-faint); }
  .prow .feat { min-width: 0; }
  .prow.never .feat, .prow.never .rank { color: var(--ink-faint); }
  .prow .tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
  .atag { font-size: 11px; color: var(--ink-faint); border: 1px solid var(--card-border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
  .stage { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
  .stage.v1 { color: var(--bisque); background: rgba(236,226,208,.14); }
  .stage.after { color: var(--bisque-dim); background: rgba(236,226,208,.07); }
  .stage.never { color: var(--ink-faint); background: rgba(255,255,255,.05); }
  .stage.next { color: #fff; background: var(--green); }
  .stage.demo { color: #15181e; background: var(--bisque); }
  .seamrow { position: relative; z-index: 1; display: grid; grid-template-columns: 34px 96px minmax(0,1fr); gap: 10px; align-items: center; padding: 14px 14px; background: rgba(224,185,79,.07); border-top: 1px solid rgba(224,185,79,.35); border-bottom: 1px solid rgba(224,185,79,.35); }
  .seam-content { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; }
  .stitch { height: 0; border-top: 2px dashed var(--gold); opacity: .8; }
  .seam-badge { font-family: var(--mono); font-weight: 800; font-size: 16px; color: #15181e; background: var(--gold); border-radius: 6px; padding: 2px 9px; }
  .prow.hide, .tierhead.hide { display: none; }
  .lanehead { display: grid; grid-template-columns: 34px 96px minmax(0,1fr); gap: 10px; padding: 6px 14px 4px; font-size: 11px; color: var(--ink-faint); background: var(--card-bg); }
  .lanehead .lanekeys { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .lanehead .lanekeys span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .lanehead .lanekeys i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  @media (max-width: 720px) {
    .prow { grid-template-columns: 28px 16px minmax(0,1fr); } .prow .lanes { display: none; } .prow .tags { grid-column: 3; justify-content: flex-start; } .tier-prog { display: none; }
    .seamrow { grid-template-columns: 1fr; } .seamrow .rank, .seamrow .lanes { display: none; } .loggraph { display: none; } .lanehead { display: none; }
    .cloth-areas .arow { grid-template-columns: 1fr; } .cloth-areas .alabel { justify-content: flex-start; }
  }
  @media (prefers-reduced-motion: reduce) { .sq { animation: none; } .sq.moving { transition: none; } .prow.flash { animation: none; } }

  /* expandable row + the VS Code mock */
  .prow.expandable { cursor: pointer; }
  .prow.expandable:hover .feat { color: var(--bisque); }
  .chev { width: 14px; height: 14px; display: inline-block; position: relative; margin-left: 6px; vertical-align: middle; }
  .chev::before { content: ""; position: absolute; left: 3px; top: 1px; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-dim); border-bottom: 1.5px solid var(--ink-dim); transform: rotate(45deg); transition: transform .25s; }
  .prow.open .chev::before { transform: rotate(-135deg); top: 5px; }
  .pdetail { position: relative; z-index: 1; border-top: 1px solid #232833; padding: 14px 14px 18px 60px; animation: unfold .35s ease-out; }
  .pd-inner { background: #14171d; border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  @media (max-width: 960px) { .pdetail { padding-left: 14px; } }
  @keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .pd-text h4 { margin: 0 0 6px; font-size: 15px; }
  .pd-text p { font-size: 13.5px; color: var(--ink); max-width: 760px; }
  .pd-mock { overflow-x: auto; }
  .vsc { min-width: 0; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid #333; background: #1f1f1f; box-shadow: 0 20px 50px rgba(0,0,0,.5); font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #ccc; }
  .vsc svg { width: 16px; height: 16px; vertical-align: -3px; }
  .vsc-title { height: 30px; background: #181818; border-bottom: 1px solid #2b2b2b; display: flex; align-items: center; justify-content: center; position: relative; font-size: 12px; color: #9d9d9d; }
  .vsc-title .tl { position: absolute; left: 12px; top: 9px; display: flex; gap: 7px; }
  .vsc-title .tl i { width: 12px; height: 12px; border-radius: 50%; }
  .vsc-title .tl i:nth-child(1) { background: #ff5f57; } .vsc-title .tl i:nth-child(2) { background: #febc2e; } .vsc-title .tl i:nth-child(3) { background: #28c840; }
  .vsc-body { display: grid; grid-template-columns: 48px 330px minmax(0,1fr); height: 640px; }
  .vsc-act { background: #181818; border-right: 1px solid #2b2b2b; display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 4px; color: #868686; }
  .vsc-act > span { width: 48px; height: 44px; display: grid; place-items: center; position: relative; }
  .vsc-act svg { width: 24px; height: 24px; }
  .vsc-act .on { color: #fff; }
  .vsc-act .on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: #fff; }
  .vsc-side { background: #181818; border-right: 1px solid #2b2b2b; display: flex; flex-direction: column; min-width: 0; }
  .side-head { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #ccc; padding: 10px 20px 6px; }
  .ctabs { display: flex; gap: 4px; padding: 2px 10px 8px; }
  .ctabs span { padding: 3px 12px; border-radius: 6px; color: #bbb; font-size: 12px; }
  .ctabs span.on { border: 1px solid #3574f0; color: #fff; }
  .ctool { display: flex; align-items: center; gap: 12px; padding: 6px 12px 8px; border-top: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b; }
  .ctool i { width: 12px; height: 12px; border: 1.5px solid #9d9d9d; border-radius: 50%; display: inline-block; opacity: .8; }
  .ctool i.b { border-color: #3574f0; border-radius: 2px; } .ctool i.g { border-color: #5fad65; border-radius: 2px; }
  .ctool b { flex: 1; }
  .ctree { padding: 6px 0; font-size: 12px; }
  .crow { display: flex; align-items: center; gap: 7px; height: 26px; padding-left: calc(10px + var(--d) * 16px); padding-right: 10px; white-space: nowrap; color: #ccc; }
  .crow b { font-size: 11px; letter-spacing: .04em; }
  .crow.sel { background: #2e436e; color: #fff; }
  .crow .cn { color: #7d7d7d; font-size: 11px; }
  .cchev { color: #9d9d9d; width: 10px; }
  .cb { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #6b6b6b; display: inline-block; flex: none; position: relative; background: #1f1f1f; }
  .cb.on { background: #3574f0; border-color: #3574f0; }
  .cb.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
  .cb.mixed { background: #3574f0; border-color: #3574f0; }
  .cb.mixed::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: #fff; }
  .fold { width: 13px; height: 10px; border: 1.3px solid #9d9d9d; border-radius: 2px; display: inline-block; }
  .ts { font: 700 9px var(--mono); color: #4a90d9; }
  .ts.md { color: #6a8bd0; }
  .fn { color: #d0d0d0; } .fn.add { color: #6fb37a; } .fn.unv { color: #d98b71; }
  .st { margin-left: auto; font-size: 11px; color: #4a90d9; } .st.add { color: #6fb37a; } .st.unv { color: #d98b71; }
  .cmsg { margin-top: auto; padding: 8px 10px 10px; border-top: 1px solid #2b2b2b; position: relative; }
  .cmsg-box { background: #262626; border: 1px solid #3a3a3a; border-radius: 4px; min-height: 58px; padding: 6px 8px; font-size: 12px; line-height: 1.5; color: #e6e6e6; }
  .cmsg-box mark.over { background: none; color: inherit; text-decoration: underline wavy #e5c07b; text-decoration-skip-ink: none; text-underline-offset: 3px; }
  .caret { display: inline-block; width: 1px; height: 13px; background: #fff; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(2) infinite; }
  @keyframes blink { to { opacity: 0; } }
  .insp { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 4px); background: #252526; border: 1px solid #454545; border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.55); font-size: 11.5px; z-index: 2; }
  .insp-head { display: flex; align-items: center; gap: 7px; padding: 7px 10px; color: #e6e6e6; border-bottom: 1px solid #3a3a3a; }
  .insp-head svg { width: 14px; height: 14px; color: #e5c07b; flex: none; }
  .insp-fix { display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: #04395e; color: #fff; border-radius: 0 0 6px 6px; }
  .insp-fix kbd { margin-left: auto; background: rgba(255,255,255,.12); border: 0; padding: 0 5px; font-size: 10px; color: #fff; }
  .bulb { font-size: 12px; }
  .copts { display: flex; align-items: center; gap: 6px; padding: 8px 0 6px; font-size: 12px; color: #ccc; }
  .copts .cb { margin-right: 2px; } .copts .cb + .cb { margin-left: 8px; }
  .copts .ico { color: #7d7d7d; margin-left: 6px; font-size: 11px; }
  .cbtns { display: flex; align-items: center; gap: 12px; font-size: 12px; }
  .cbtns span.primary { background: #3574f0; color: #fff; padding: 5px 16px; border-radius: 4px; }
  .cbtns .dd { margin-left: auto; color: #9d9d9d; padding-right: 6px; }
  .vsc-ed { position: relative; display: flex; flex-direction: column; min-width: 0; background: #1f1f1f; }
  .ed-empty { flex: 1; display: grid; place-items: center; padding: 20px; }
  .rule-card { width: 100%; max-width: 300px; background: #252526; border: 1px solid #3a3a3a; border-radius: 8px; padding: 12px 14px; font-size: 12px; }
  .rule-title { font-weight: 600; color: #e6e6e6; margin-bottom: 8px; }
  .rule { padding: 6px 0; border-bottom: 1px solid #333; font-size: 11.5px; }
  .rule:last-of-type { border-bottom: 0; }
  .rule-k { color: #e6e6e6; }
  .rule-v { color: #9fc4f2; padding-left: 20px; }
  .rule-v::before { content: "→ "; color: #7d7d7d; }
  .sq-w { display: inline-block; width: 14px; border-bottom: 2px solid transparent; text-decoration: underline wavy #e5c07b; margin-right: 6px; vertical-align: -3px; }
  .sq-w::before { content: "\00a0\00a0\00a0"; }
  .rule-note { margin-top: 8px; color: #9d9d9d; font-size: 11px; }
  .vsc-status { display: flex; align-items: center; gap: 14px; height: 24px; padding: 0 10px 0 0; background: #181818; border-top: 1px solid #2b2b2b; font-size: 11.5px; color: #9d9d9d; }
  .vsc-status .sb-remote { background: #0078d4; color: #fff; height: 24px; display: inline-grid; place-items: center; padding: 0 8px; font-size: 10px; }
  .vsc-status .right { margin-left: auto; }


  /* Mock kit */

  .fw { border-radius: 10px; overflow: hidden; border: 1px solid #333; background: #1f1f1f; box-shadow: 0 20px 50px rgba(0,0,0,.5); font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #ccc; width: 100%; }
  .fw-title { height: 30px; background: #181818; border-bottom: 1px solid #2b2b2b; display: flex; align-items: center; justify-content: center; position: relative; font-size: 12px; color: #9d9d9d; }
  .fw-title .tl { position: absolute; left: 12px; top: 9px; display: flex; gap: 7px; }
  .fw-title .tl i { width: 12px; height: 12px; border-radius: 50%; }
  .fw-title .tl i:nth-child(1) { background: #ff5f57; } .fw-title .tl i:nth-child(2) { background: #febc2e; } .fw-title .tl i:nth-child(3) { background: #28c840; }
  .fw-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
  .fw-signin { margin-left: 8px; background: #3574f0; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 11px; }
  .fw-body { position: relative; height: calc(100% - 30px); overflow: hidden; }
  .fw.abs { position: absolute; z-index: 3; }
  .vsc-ed { overflow: hidden; }
  .pd-mock .vsc { min-width: 0; }
  /* Porcelain panel */
  .pp { display: flex; flex-direction: column; background: #181818; border-top: 1px solid #2b2b2b; margin-top: auto; position: relative; overflow: hidden; height: 100%; }
  .pp-tabs { display: flex; gap: 18px; padding: 8px 14px 6px; font-size: 11px; letter-spacing: .04em; color: #9d9d9d; border-bottom: 1px solid #2b2b2b; }
  .pp-tabs .on { color: #fff; box-shadow: 0 6px 0 -5px #fff; }
  .pp-tabs-r { margin-left: auto; letter-spacing: .2em; }
  .pp-body { display: grid; flex: 1; min-height: 0; }
  .pp-tree { border-right: 1px solid #2b2b2b; overflow: hidden; }
  .pp-tree-tb { padding: 6px 8px; }
  .pp-log { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
  .pp-det { border-left: 1px solid #2b2b2b; padding: 8px 10px; font-size: 11.5px; overflow: hidden; }
  .pp-det-h { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #ccc; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
  .pp-det-tg { margin-left: auto; color: #9d9d9d; } .pp-det-tg b { font-weight: 400; padding: 0 4px; border-radius: 3px; } .pp-det-tg b.on { background: #2e436e; color: #fff; }
  .pp-file { color: #4a90d9; padding: 2px 0 2px 8px; white-space: nowrap; } .pp-file.sel { background: #04395e; color: #fff; border-radius: 3px; }
  .pp-file i { font: 700 9px var(--mono); color: #4a90d9; margin-right: 4px; font-style: normal; } .pp-file i.md { color: #6a8bd0; }
  .pp-det-c { border-top: 1px solid #2b2b2b; margin-top: 8px; padding-top: 8px; }
  .pp-det-meta { color: #9d9d9d; margin: 3px 0; } .pp-det-meta a { color: #4a90d9; }
  .pp-det-chips { margin-top: 4px; }
  .pp-tb { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #2b2b2b; white-space: nowrap; overflow: hidden; }
  .pp-search { display: inline-flex; align-items: center; gap: 5px; background: #313131; border: 1px solid #3c3c3c; border-radius: 4px; padding: 2px 8px; color: #9d9d9d; font-size: 11.5px; }
  .pp-search i { font-style: normal; } .pp-search b { font-weight: 400; font-size: 10px; background: #3c3c3c; border-radius: 3px; padding: 0 3px; color: #ccc; }
  .pp-search.small { width: 100%; }
  .pp-chip { color: #4a90d9; font-size: 11.5px; } .pp-chip b { font-weight: 400; color: #9d9d9d; margin-left: 2px; }
  .pp-dd { color: #ccc; font-size: 11.5px; } .pp-dd.on { color: #fff; }
  .pp-ic { color: #9d9d9d; margin-left: auto; } .pp-ic + .pp-ic { margin-left: 0; }
  .pp-cols, .pp-row { display: grid; grid-template-columns: 110px 24px minmax(0,1fr) 84px 64px; align-items: center; gap: 0 6px; padding: 0 8px; height: 26px; font-size: 12px; white-space: nowrap; }
  .pp-cols { color: #9d9d9d; font-size: 11px; height: 22px; border-bottom: 1px solid #2b2b2b; }
  .pp-cols span:nth-child(2) { grid-column: 2 / 4; }
  .pp-row.sel { background: #2e436e; color: #fff; outline: 1px solid #3574f0; outline-offset: -1px; }
  .pp-row.hl .pp-m { color: #fff; font-weight: 600; }
  .pp-row.dim2, .tw-r.dim2 { opacity: .45; }
  .pp-a, .pp-m, .pp-d, .pp-h { overflow: hidden; text-overflow: ellipsis; }
  .pp-h { font-family: var(--mono); font-size: 11px; color: #9d9d9d; } .pp-row.sel .pp-h { color: #ddd; }
  .pp-d { color: #9d9d9d; } .pp-row.sel .pp-d { color: #ddd; }
  .pp-g { position: relative; height: 26px; } .pp-g::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--lc); display: var(--lt, block); }
  .pp-g i { position: absolute; left: 8px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--lc); }
  .pp-x { text-align: center; }
  .rc { display: inline-block; font-size: 10.5px; border-radius: 3px; padding: 0 5px; margin-left: 6px; border: 1px solid transparent; vertical-align: 1px; }
  .rc.head { color: #f2a9a6; border-color: rgba(199,84,80,.5); } .rc.local { color: #a6dfa9; border-color: rgba(95,173,101,.5); } .rc.tag { color: #f0d9a0; border-color: rgba(229,192,123,.5); } .rc.remote { color: #d8bff0; border-color: rgba(176,124,216,.5); }
  .bt { padding: 2px 0; font-size: 12px; }
  .bt-row { display: flex; align-items: center; gap: 6px; height: 23px; padding-left: calc(10px + var(--d) * 14px); padding-right: 8px; white-space: nowrap; overflow: hidden; }
  .bt-row.sel { background: #2e436e; color: #fff; } .bt-row.bt-head { font-weight: 600; }
  .bt-i { width: 14px; color: #9d9d9d; font-size: 11px; text-align: center; flex: none; font-family: var(--mono); }
  .bt-cnt { margin-left: auto; color: #9d9d9d; font-size: 11px; } .bt-cnt.warn { color: #e5c07b; }
  .tip2 { position: absolute; z-index: 4; background: #252526; border: 1px solid #454545; border-radius: 4px; padding: 6px 9px; font-size: 11.5px; color: #e6e6e6; box-shadow: 0 6px 20px rgba(0,0,0,.5); white-space: nowrap; }
  .tip2 .dim { color: #9d9d9d; }
  /* commit extras */
  .cbanner { display: flex; align-items: center; gap: 8px; margin: 0 10px 6px; padding: 7px 10px; background: rgba(53,116,240,.16); border: 1px solid rgba(53,116,240,.4); border-radius: 6px; font-size: 11.5px; flex-wrap: wrap; }
  .cbanner.ok { background: rgba(95,173,101,.14); border-color: rgba(95,173,101,.45); }
  .cbanner b { font-weight: 400; color: #ccc; border: 1px solid #4e5157; border-radius: 4px; padding: 1px 8px; } .cbanner b.p { background: #3574f0; border-color: #3574f0; color: #fff; }
  .crow b.grp { color: #f2a9a6; }
  .st.ok { color: #6fb37a; } .fn.dimf { color: #8a8a8a; }
  .lnk { margin-left: auto; color: #4a90d9; font-size: 11px; }
  .copt-panel { position: relative; padding: 8px 0 4px; }
  .sign-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #ccc; padding: 6px 0 2px; } .sign-status .ok { color: #6fb37a; margin-left: auto; }
  .hunkbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid #2b2b2b; font-size: 11.5px; }
  /* code + diff */
  .codeblk { font: 11.5px/19px var(--mono); color: #bcbec4; }
  .cl { display: flex; height: 19px; white-space: pre; overflow: hidden; }
  .cn2 { width: 34px; flex: none; text-align: right; padding-right: 10px; color: #5c5c5c; }
  .cl.add { background: rgba(78,201,160,.16); } .cl.del { background: rgba(199,84,80,.18); } .cl.conf { background: rgba(199,84,80,.2); box-shadow: inset 0 0 0 1px rgba(199,84,80,.35); }
  .cl.fill { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 3px, transparent 3px 8px); }
  .cl.selx { background: #264f78; }
  .kw { color: #cf8e6d; } .str { color: #6aab73; } .fn2 { color: #56a8f5; } .ty { color: #c77dbb; } .cm2 { color: #7a7e85; }
  .dw { display: flex; flex-direction: column; height: 100%; position: relative; background: #1f1f1f; }
  .dw.mini { border: 1px solid #2b2b2b; border-radius: 4px; margin-top: 6px; height: auto; }
  .dw-tb { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-bottom: 1px solid #2b2b2b; color: #ccc; font-size: 12px; }
  .dw-tb .on { background: #37373d; border-radius: 4px; padding: 0 4px; } .dw-cnt { margin-left: auto; color: #9d9d9d; }
  .dw-btn { border: 1px solid #4e5157; border-radius: 4px; padding: 1px 8px; } .dw-btn.p { background: #3574f0; border-color: #3574f0; color: #fff; }
  .dw-lang { color: #9d9d9d; font-size: 11px; }
  .dw-heads { display: grid; grid-template-columns: 1fr 1fr; font-size: 11.5px; border-bottom: 1px solid #2b2b2b; }
  .dw-heads.three { grid-template-columns: 1fr 1fr 1fr; }
  .dw-heads span { padding: 5px 10px; border-right: 1px solid #2b2b2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dw-heads span:last-child { border-right: 0; }
  .tagp { font: 700 9px/1 var(--mono); color: #ccc; background: #3c3c3c; border-radius: 2px; padding: 2px 4px; margin-left: 6px; font-style: normal; }
  .dw-panes { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; overflow: hidden; }
  .dw-panes.three { grid-template-columns: 1fr 28px 1fr 28px 1fr; }
  .dw-pane { overflow: hidden; border-right: 1px solid #2b2b2b; } .dw-pane:last-child { border-right: 0; }
  .dw-gut { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 60px; font-size: 10px; color: #ccc; background: #1a1a1a; border-right: 1px solid #2b2b2b; }
  .dw-gut span { border: 1px solid #555; border-radius: 3px; width: 16px; text-align: center; line-height: 14px; background: #2b2b2b; }
  .hint-pill { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); background: #252526; border: 1px solid #454545; border-radius: 999px; padding: 4px 12px; font-size: 11.5px; box-shadow: 0 6px 20px rgba(0,0,0,.5); white-space: nowrap; }
  .hint-pill kbd { font-size: 10px; padding: 0 4px; }
  /* menus etc */
  .cm { position: absolute; z-index: 5; background: #252526; border: 1px solid #454545; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.4); padding: 4px 0; font-size: 12px; color: #ccc; }
  .cm-item { display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; white-space: nowrap; }
  .cm-item.sel { background: #04395e; color: #fff; } .cm-item.dis { color: #6b6b6b; }
  .cm-ic { width: 18px; flex: none; text-align: center; font-size: 11px; }
  .cm-item.chk .cm-ic::before { content: "✓"; } .cm-item.unchk .cm-ic::before { content: ""; }
  .cm-sc { margin-left: auto; color: #9d9d9d; font-size: 11px; padding-left: 14px; } .cm-item.sel .cm-sc { color: #ddd; }
  .cm-sub { margin-left: auto; color: #9d9d9d; } .cm-sep { border-top: 1px solid #454545; margin: 4px 8px; }
  .qp { position: absolute; z-index: 5; background: #252526; border: 1px solid #454545; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.5); padding: 6px; font-size: 12px; color: #ccc; }
  .qp-in { background: #313131; border: 1px solid #3574f0; border-radius: 3px; padding: 3px 8px; margin-bottom: 4px; color: #fff; min-height: 22px; }
  .qp-ph { color: #9d9d9d; } .qp-title { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #9d9d9d; padding: 6px 8px 2px; }
  .qp-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 3px; white-space: nowrap; overflow: hidden; }
  .qp-item.sel { background: #04395e; color: #fff; }
  .qp-l b { color: #4a90d9; font-weight: 600; } .qp-item.sel .qp-l b { color: #9fc4f2; }
  .qp-desc { color: #9d9d9d; font-size: 11px; } .qp-det { margin-left: auto; color: #9d9d9d; font-size: 11px; }
  .qp-chk { width: 13px; height: 13px; border: 1px solid #6b6b6b; border-radius: 3px; flex: none; position: relative; }
  .qp-chk.on { background: #3574f0; border-color: #3574f0; } .qp-chk.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
  .qp-foot { display: flex; align-items: center; justify-content: space-between; background: #252526; border: 1px solid #454545; border-top: 0; border-radius: 0 0 6px 6px; padding: 6px 10px; font-size: 12px; z-index: 5; }
  .toast { position: absolute; z-index: 5; background: #252526; border: 1px solid #454545; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.5); padding: 10px 12px; font-size: 12px; color: #ccc; }
  .toast-h { display: flex; gap: 8px; align-items: flex-start; } .toast-h i { font-style: normal; flex: none; } .toast-h i.info { color: #3574f0; } .toast-h i.warn { color: #e5c07b; } .toast-h i.err { color: #f26d78; }
  .toast-h b { margin-left: auto; color: #9d9d9d; font-weight: 400; }
  .toast-src { color: #9d9d9d; font-size: 11px; margin: 6px 0 0 22px; }
  .toast-b { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } .toast-b span { border: 1px solid #4e5157; border-radius: 3px; padding: 2px 10px; } .toast-b span.p { background: #3574f0; border-color: #3574f0; color: #fff; }
  .dlg2 { position: relative; z-index: 4; background: #2b2d30; border: 1px solid #43454a; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 14px 16px 12px; color: #dfe1e5; font-size: 12px; max-width: 100%; }
  .dlg-body p { margin: 0 0 8px; }
  .dlg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
  .opt-card { border: 1px solid #43454a; border-radius: 6px; padding: 8px 10px; } .opt-card.sel { border-color: #3574f0; background: rgba(53,116,240,.12); }
  .opt-card b { display: block; margin-bottom: 2px; } .opt-card span { color: #9da0a8; font-size: 11.5px; }
  .dlg-links { display: flex; gap: 14px; color: #4a90d9; font-size: 11.5px; margin-top: 8px; }
  .dbtn.small { padding: 2px 8px; font-size: 11px; margin-left: auto; flex: none; }
  .fld { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 8px; align-items: start; margin: 6px 0; font-size: 12px; }
  .fld label { color: #9da0a8; padding-top: 3px; } .fld-note { color: #9da0a8; font-size: 11px; margin-top: 2px; }
  .in { display: inline-flex; align-items: center; justify-content: space-between; background: #1e1f22; border: 1px solid #43454a; border-radius: 4px; padding: 3px 8px; color: #dfe1e5; min-height: 24px; box-sizing: border-box; white-space: nowrap; overflow: hidden; }
  .in i { color: #7d7d7d; font-style: normal; } .in b { color: #9da0a8; font-weight: 400; margin-left: 6px; }
  .chkl { display: flex; align-items: center; gap: 7px; margin: 4px 0; font-size: 12px; } .chk-note { color: #9da0a8; font-size: 11px; }
  .radio-row { display: flex; gap: 16px; margin: 4px 0; } .radio-row label { display: inline-flex; align-items: center; gap: 6px; }
  .rd { width: 13px; height: 13px; border-radius: 50%; border: 1px solid #6b6b6b; display: inline-block; position: relative; } .rd.on { border-color: #3574f0; } .rd.on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #3574f0; }
  .chkrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid #43454a; border-radius: 6px; margin-bottom: 6px; }
  .chkrow i { font-style: normal; flex: none; } .chkrow.warn i { color: #e5c07b; } .chkrow.err i { color: #f26d78; }
  .chkrow > div { flex: 1; min-width: 0; } .chkrow b { display: block; } .chkrow span { color: #9da0a8; font-size: 11.5px; }
  .setp { padding: 10px 16px; font-size: 12px; color: #ccc; }
  .setp-h { margin-bottom: 8px; } .setp-h .pp-search { width: 100%; }
  .set-row { padding: 10px 0; border-bottom: 1px solid #2b2b2b; }
  .set-t { color: #e6e6e6; margin-bottom: 3px; } .set-t b { font-weight: 600; }
  .set-d { color: #9d9d9d; margin-bottom: 6px; } .set-d code { font-size: 11px; }
  .set-c .chkl { margin: 0; }
  .tw { border: 1px solid #2b2b2b; border-radius: 4px; overflow: hidden; font-size: 12px; }
  .tw-h, .tw-r { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 5px 10px; align-items: center; white-space: nowrap; }
  .tw-h { color: #9d9d9d; font-size: 11px; background: #232323; } .tw-r { border-top: 1px solid #2b2b2b; } .tw-r.sel { background: #2e436e; color: #fff; }
  .tw-r span { overflow: hidden; text-overflow: ellipsis; } .mono { font-family: var(--mono); font-size: 11px; }
  .red { color: #f2a9a6; } .green { color: #6fb37a; }
  .bl { font: 11.5px/20px var(--mono); color: #bcbec4; }
  .bl-h { font: 11.5px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; padding: 5px 10px; border-bottom: 1px solid #2b2b2b; color: #ccc; display: flex; gap: 10px; }
  .bl-row { display: flex; height: 20px; white-space: pre; } .bl-row.sel { background: #264f78; }
  .bl-g { width: 190px; flex: none; padding: 0 10px; border-right: 1px solid #2b2b2b; font-size: 10.5px; color: #ccc; } .bl-g i { font-style: normal; color: #9d9d9d; }
  .bl-g.age1 { background: rgba(53,116,240,.28); } .bl-g.age2 { background: rgba(53,116,240,.18); } .bl-g.age3 { background: rgba(53,116,240,.10); } .bl-g.age4 { background: rgba(53,116,240,.04); }
  .bl-row .ct { padding-left: 10px; }
  .term { font: 11.5px/20px var(--mono); padding: 8px 12px; color: #ccc; background: #181818; border-bottom: 1px solid #2b2b2b; }
  .chg { padding: 8px 10px; font-size: 12px; } .chg-h { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .chg-h .dim { margin-left: auto; }
  .cw { padding: 10px 12px; font-size: 12px; height: 100%; display: flex; flex-direction: column; }
  .cw-h { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; } .cw-h b { font-size: 14px; }
  .cw-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; padding-top: 10px; }
  .pushp { padding: 10px 14px; font-size: 12px; display: flex; flex-direction: column; height: 100%; }
  .push-h { font-size: 13px; margin-bottom: 8px; }
  .push-inline { display: grid; grid-template-columns: 200px 1fr; gap: 12px; border: 1px solid rgba(229,192,123,.4); background: rgba(229,192,123,.06); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }
  .push-inline .fld { grid-template-columns: 60px 1fr; }
  .push-list { border: 1px solid #2b2b2b; border-radius: 4px; overflow: hidden; }
  .push-opts { display: flex; gap: 18px; margin: 8px 0; } .push-opts .chkl { margin: 0; }
  .sig { font-weight: 700; } .sig.ok { color: #6fb37a; } .sig.bad { color: #f26d78; } .sig.exp { color: #e5c07b; }
  .ed-empty { flex: 1; display: grid; place-items: center; padding: 20px; }
  .dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
  .dbtn { display: inline-block; padding: 4px 12px; border-radius: 6px; border: 1px solid #4e5157; font-size: 12px; color: #dfe1e5; white-space: nowrap; }
  .dbtn.primary { background: #3574f0; border-color: #3574f0; color: #fff; }
  .dlg-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
  .dlg-sub { font-size: 12px; color: #9da0a8; margin-bottom: 8px; }