html.ui-v2 .pf-page-title { display: flex; align-items: center; gap: 12px; }
html.ui-v2 .pf-title-object { display: inline-flex; align-items: center; flex: 0 0 38px; width: 38px; height: 40px; }
html.ui-v2 .pf-title-object > svg { display: block; width: 38px; height: 40px; }
/* Shared page rhythm and readable status surfaces. */
html.ui-v2 .pf-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; min-width: 0; }
html.ui-v2 .pf-page-heading > div { min-width: 0; }
html.ui-v2 .pf-page-heading .pf-h1 { margin-bottom: 8px; }
html.ui-v2 .pf-page-heading .pf-sub { margin: 0; }
html.ui-v2 .pf-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.ui-v2 .pf-ops-requests, html.ui-v2 .pf-ops-tools { margin-bottom: 20px; }
html.ui-v2 .pf-recap { border: 0; background: transparent; padding: 4px 0 14px; gap: 9px; border-radius: 0; }
html.ui-v2 .pf-recap-mark { flex: 0 0 30px; width: 30px; height: 30px; }
html.ui-v2 .pf-recap-name { font-size: 12px; font-weight: 550; color: var(--pf-text); }
html.ui-v2 .pf-recap-sub { font-size: 11px; letter-spacing: 0; color: var(--pf-dim); }
html.ui-v2 .pf-recap-wait { opacity: 1; }
html.ui-v2 .pf-empty { background: transparent; border: 0; padding: 18px 0; }
html.ui-v2 .pf-chart-empty { background: transparent; }
html.ui-v2 .pf-act, html.ui-v2 .pf-feed-i, html.ui-v2 .pf-team-row, html.ui-v2 .pf-trendlist li { border-bottom: 0; }
html.ui-v2 .pf-act { margin-bottom: 4px; border-radius: 10px; }
html.ui-v2 .pf-act:hover, html.ui-v2 .pf-act:focus-visible { background: #171920; color: var(--pf-text); }
html.ui-v2 .pf-cant-editor-use [data-sec="connections"] { display: none; }
html.ui-v2 .pf-topcard-badge, html.ui-v2 .pf-tag-pick, html.ui-v2 .pf-switch-k { border-radius: 5px; }
html.ui-v2 rect.pf-bar { border-radius: 0; }
html.ui-v2 .pf-watch-seg { display: flex; flex-wrap: wrap; width: auto; gap: 6px; padding: 4px; }
html.ui-v2 .pf-watch-seg .pf-seg-b { flex: 0 0 auto; min-width: max-content; width: auto; padding: 7px 10px; }
html.ui-v2 .pf-watch-intro { margin-bottom: 24px; max-width: 68ch; }
html.ui-v2 .pf-scene-studio { padding: 0; }
html.ui-v2 .pf-snapshot-title { display: none; }
html.ui-v2 .pf-public-snapshot .pf-snapshot-title { display: inline; }
html.ui-v2 .pf-public-snapshot .pf-chartpanel .pf-titlecol,
html.ui-v2 .pf-public-snapshot .pf-chartpanel .pf-bigs,
html.ui-v2 .pf-public-snapshot .pf-chartpanel .pf-tabs,
html.ui-v2 .pf-public-snapshot .pf-boardpanel { display: none; }
html.ui-v2 .pf-public-snapshot .pf-recap-panel { grid-column: span 8; }
html.ui-v2 .pf-game-snapshot { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 240px; }
html.ui-v2 .pf-snapshot-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 32px; }
html.ui-v2 .pf-snapshot-figures dt { font-size: 12px; color: var(--pf-dim); margin-bottom: 10px; }
html.ui-v2 .pf-snapshot-figures dd { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.15; letter-spacing: -1px; font-weight: 500; margin: 0; font-variant-numeric: tabular-nums; }
html.ui-v2 .pf-snapshot-figures dd.pf-snapshot-missing { font-size: 15px; letter-spacing: 0; color: var(--pf-dim); }
html.ui-v2 .pf-snapshot-context p, html.ui-v2 .pf-snapshot-note { font-size: 12px; line-height: 1.65; margin: 0 0 5px; color: var(--pf-dim); }
html.ui-v2 .pf-snapshot-context p:first-child { color: var(--pf-text); }
html.ui-v2 .pf-snapshot-note { margin-top: 14px; max-width: 50ch; }
html.ui-v2 .pf-studio-shortcuts { display: grid; gap: 6px; min-height: 0; overflow-y: auto; }
html.ui-v2 .pf-studio-shortcut { display: flex; align-items: center; gap: 12px; padding: 12px 10px; text-align: left; background: transparent; color: #e7e9f0; border: 0; border-radius: 10px; cursor: pointer; }
html.ui-v2 .pf-studio-shortcut:hover, html.ui-v2 .pf-studio-shortcut:focus-visible { background: #1b1e27; color: #ffffff; }
html.ui-v2 .pf-studio-shortcut > span:first-child > svg { width: 29px; height: 31px; display: block; }
html.ui-v2 .pf-studio-shortcut > span:nth-child(2) { display: grid; gap: 5px; flex: 1; min-width: 0; }
html.ui-v2 .pf-studio-shortcut strong { font: 500 12px/1.3 var(--font-sans, 'Geist', sans-serif); white-space: nowrap; }
html.ui-v2 .pf-studio-shortcut small { font: 400 11px/1.4 var(--font-sans, 'Geist', sans-serif); color: var(--pf-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .pf-studio-shortcut > svg { width: 15px; height: 15px; transform: rotate(-90deg); }
@media (max-width: 1050px) {
  html.ui-v2 .pf-public-snapshot .pf-recap-panel { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  /* Growth, the chart page, scrolls on narrow screens rather than squeezing its panels to headers. */
  html.ui-v2 .pf-body.fit[data-page="growth"] { display: block; overflow-y: auto; }
  html.ui-v2 .pf-growth-head { margin-bottom: 18px; }
  html.ui-v2 .pf-gamehead { margin-bottom: 18px; }
  html.ui-v2 .pf-dashgrid { grid-template-rows: none; grid-auto-rows: auto; }
  html.ui-v2 .pf-dashgrid > .pf-scrollpanel { min-height: 190px; max-height: 380px; }
  html.ui-v2 .pf-dashgrid .pf-scroll { max-height: 290px; }
  html.ui-v2 .pf-dashgrid .pf-chartwrap { min-height: 280px; }
  html.ui-v2 .pf-public-snapshot .pf-chartwrap { min-height: 240px; }
}
@media (max-width: 640px) {
  html.ui-v2 .pf-gamehead-name { max-width: calc(100% - 54px); white-space: normal; font-size: 19px; line-height: 1.3; }
  html.ui-v2 .pf-snapshot-figures { grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr); gap: 10px; margin-bottom: 24px; }
  html.ui-v2 .pf-snapshot-figures dd { font-size: 21px; letter-spacing: -.6px; }
  html.ui-v2 .pf-snapshot-figures dt { font-size: 10px; }
  html.ui-v2 .pf-snapshot-figures dd.pf-snapshot-missing { font-size: 12px; }
}
@media (max-width: 359px) {
  html.ui-v2 .pf-snapshot-figures dd { font-size: 17px; }
  html.ui-v2 .pf-studio-shortcut strong { font-size: 11px; }
}

html.ui-v2 .pf-connections { max-width: 1320px; margin: 0 auto; }
html.ui-v2 .pf-connection-refresh { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
html.ui-v2 .pf-connection-refresh > span { color: var(--pf-dim); font-size: 11px; white-space: nowrap; }
html.ui-v2 .pf-connection-refresh .pf-btn { min-width: 86px; height: 36px; }
html.ui-v2 .pf-connection-feedback { color: var(--pf-warn); font-size: 12px; margin: 0; }
html.ui-v2 .pf-connection-feedback:not(:empty) { margin: 0 0 18px; }
html.ui-v2 .pf-workflow-status { background: var(--pf-panel); border-radius: 18px; padding: 10px 22px; margin-bottom: 32px; }
html.ui-v2 .pf-workflow-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 106px 152px; gap: 16px; align-items: center; padding: 17px 0; }
html.ui-v2 .pf-workflow-object { display: grid; place-items: center; }
html.ui-v2 .pf-workflow-object > svg { width: 38px; height: 40px; }
html.ui-v2 .pf-workflow-copy { min-width: 0; }
html.ui-v2 .pf-workflow-copy h2, html.ui-v2 .pf-connection-group h2 { font-size: 15px; line-height: 1.35; font-weight: 550; margin: 0 0 5px; letter-spacing: -.2px; }
html.ui-v2 .pf-workflow-copy p { font-size: 12px; line-height: 1.6; color: var(--pf-dim); margin: 0; max-width: 65ch; }
html.ui-v2 .pf-workflow-row > .pf-btn { justify-self: end; height: 34px; font-size: 11px; }
html.ui-v2 .pf-connection-state { display: inline-block; color: #a5abba; white-space: nowrap; font-size: 11px; line-height: 20px; }
html.ui-v2 .pf-connection-state.ready { color: #bad99e; }
html.ui-v2 .pf-connection-state.attention { color: #e0bc83; }
html.ui-v2 .pf-connection-groups { display: grid; gap: 30px; }
html.ui-v2 .pf-connection-group h2 { margin-bottom: 14px; }
html.ui-v2 .pf-connection-table { background: var(--pf-panel); padding: 10px 22px; border-radius: 18px; }
html.ui-v2 .pf-connection-columns, html.ui-v2 .pf-connection-row { display: grid; grid-template-columns: minmax(140px, .65fr) 106px minmax(0, 1.8fr); column-gap: 22px; align-items: center; }
html.ui-v2 .pf-connection-columns { padding: 8px 0; color: #89909f; font-size: 10px; }
html.ui-v2 .pf-connection-row { padding: 15px 0; }
html.ui-v2 .pf-connection-name { display: flex; flex-direction: column; gap: 5px; }
html.ui-v2 .pf-connection-name strong { font-size: 12px; font-weight: 500; }
html.ui-v2 .pf-connection-name small { font-size: 10px; color: var(--pf-dim); }
html.ui-v2 .pf-connection-row p { color: var(--pf-dim); font-size: 12px; line-height: 1.6; margin: 0; }
html.ui-v2 .pf-connection-note { color: var(--pf-dim); font-size: 11px; line-height: 1.7; max-width: 88ch; margin: 22px 0 0; }
@media (max-width: 1100px) {
  html.ui-v2 .pf-workflow-row { grid-template-columns: 36px minmax(0, 1fr) 98px; column-gap: 12px; }
  html.ui-v2 .pf-workflow-row > .pf-btn { grid-column: 2; justify-self: start; margin-top: -5px; }
}
@media (max-width: 640px) {
  html.ui-v2 .pf-page-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
  html.ui-v2 .pf-workflow-status, html.ui-v2 .pf-connection-table { padding: 8px 16px; }
  html.ui-v2 .pf-workflow-row { grid-template-columns: 32px minmax(0,1fr); gap: 7px 10px; }
  html.ui-v2 .pf-workflow-object { align-self: start; }
  html.ui-v2 .pf-workflow-object > svg { width: 30px; height: 32px; }
  html.ui-v2 .pf-workflow-row > .pf-connection-state { grid-column: 2; }
  html.ui-v2 .pf-workflow-row > .pf-btn { margin-top: 4px; }
  html.ui-v2 .pf-connection-columns { display: none; }
  html.ui-v2 .pf-connection-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px 10px; padding: 15px 0; }
  html.ui-v2 .pf-connection-row > p { grid-column: 1 / -1; }
}

@media (max-width: 500px) {
  html.ui-v2 .pf-page-title { gap: 9px; }
  html.ui-v2 .pf-title-object { flex-basis: 30px; width: 30px; height: 32px; }
  html.ui-v2 .pf-title-object > svg { width: 30px; height: 32px; }
}

/* ------------------------------------------------------------------------
   Shell fixes that reach into pages: no chips or coins round what stands on
   its own, no outlines on panels or tags, no orphan rows on a phone. */

/* Quick links: each destination's own mark, bare, beside its name. The
   copy confirmation is the label's colour, not a chip lighting up. */
html.ui-v2 .pf-glink, html.ui-v2 .pf-glink.copied, html.ui-v2 .pf-glink.copyfail { background: transparent; border-radius: 8px; }
html.ui-v2 .pf-glink:hover { background: #121318; }
html.ui-v2 .pf-glink-go { gap: 8px; padding: 6px 4px 6px 6px; border-radius: 8px; }
html.ui-v2 .pf-glink-mark { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; }
html.ui-v2 .pf-glink-mark > svg, html.ui-v2 .pf-glink-mark .pf-brandmark { width: 16px; height: 16px; border-radius: 0; display: block; }
html.ui-v2 .pf-glink-mark .pf-glink-glyph { display: grid; place-items: center; color: var(--brand); }
html.ui-v2 .pf-glink-mark .pf-glink-glyph svg { width: 15px; height: 15px; }
@media (max-width: 760px) { html.ui-v2 .pf-glink-go { padding: 7px; } }

/* Tracked accounts on Content: a step of fill, never an outline. */
html.ui-v2 .pf-tracked-tag, html.ui-v2 .pf-tracked-tag:hover { border-color: transparent; background: #16181e; }
html.ui-v2 .pf-tracked-tag:hover { background: #1c1f27; }
html.ui-v2 .pf-tracked-tag.on { border-color: transparent; background: rgba(143, 162, 255, .18); }

/* Content's panel label reads as a panel title, not an eyebrow. */
html.ui-v2 .pf-content-h { font-size: 13px; font-weight: 620; letter-spacing: 0; color: var(--pf-text); }
/* The editor's interrupted scan says so in its heading; the red capitals over
   it were an eyebrow. */
html.ui-v2 .wait-error-code { display: none; }
/* The asset map's folders are fills; the rim round each was an outline. */
html.ui-v2 .pf-db-box { stroke-width: 0 !important; }

/* Roles on the Team page are words, not chips. */
html.ui-v2 .pf-team-role { padding: 0; background: none; font-size: 12px; font-weight: 560; color: var(--pf-dim); white-space: nowrap; }
html.ui-v2 .pf-team-role.accent { background: none; color: var(--v2-accent); }

@media (max-width: 600px) {
  /* The Dashboard's next steps: one per line rather than two over one. */
  html.ui-v2 .ph-next { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* A member in lines rather than one squeezed row: who and their role,
     when they were here, then what can be done. */
  html.ui-v2 .pf-team-row {
    grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "face main role" "face seen seen" "face acts acts";
    row-gap: 6px; column-gap: 10px; align-items: center; padding: 10px 6px;
  }
  html.ui-v2 .pf-team-row > .pf-team-face { grid-area: face; align-self: start; }
  html.ui-v2 .pf-team-row > .pf-team-main { grid-area: main; }
  html.ui-v2 .pf-team-row > .pf-team-role, html.ui-v2 .pf-team-row > .pf-team-rolesel, html.ui-v2 .pf-team-row > .pf-dd { grid-area: role; justify-self: end; width: auto; }
  html.ui-v2 .pf-team-row > .pf-dd .pf-dd-btn { width: auto; min-width: 104px; height: 34px; }
  html.ui-v2 .pf-team-row > .pf-team-seen { grid-area: seen; text-align: left; min-width: 0; }
  html.ui-v2 .pf-team-row > .pf-team-acts { grid-area: acts; justify-self: start; margin-left: -10px; }
}