/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/21cf20fe-7ae2-44cd-980a-7d465be2ecef.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/6e152ef3-71f0-4a41-95d2-8b247ee82da4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/2ed3a815-6a06-47c0-9e1c-27a5c550511d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/21cf20fe-7ae2-44cd-980a-7d465be2ecef.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/6e152ef3-71f0-4a41-95d2-8b247ee82da4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/2ed3a815-6a06-47c0-9e1c-27a5c550511d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/21cf20fe-7ae2-44cd-980a-7d465be2ecef.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/6e152ef3-71f0-4a41-95d2-8b247ee82da4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/2ed3a815-6a06-47c0-9e1c-27a5c550511d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/21cf20fe-7ae2-44cd-980a-7d465be2ecef.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/6e152ef3-71f0-4a41-95d2-8b247ee82da4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/2ed3a815-6a06-47c0-9e1c-27a5c550511d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   SIGNAL — theme tokens
   One direction: Paper (warm light editorial).
   Intent + risk semantics are colorblind-safe (always paired
   with number/label/shape, never color alone) — and the intent
   TIER ramp is deliberately separate from the risk SEMAPHORE
   (ok/warn/risk) so a score never reads as a verdict (P23-4).
   The parked Graphite theme, data-accent variants and
   data-density override live in theme.graphite.parked.css,
   outside the build path (P23-5).
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eeba6338-92c3-4516-94dd-d5a2c5350160.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/49bebfca-4aa6-4735-92de-f029bb80fc97.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/29e176a0-dfb5-4c7e-bf7a-4749a7064404.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b6769362-98c8-4d20-a271-2fbc2a411db9.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cfc1c88b-cbdf-46d2-bdfb-ec2e2f804f04.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/eeba6338-92c3-4516-94dd-d5a2c5350160.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/49bebfca-4aa6-4735-92de-f029bb80fc97.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/29e176a0-dfb5-4c7e-bf7a-4749a7064404.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/b6769362-98c8-4d20-a271-2fbc2a411db9.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cfc1c88b-cbdf-46d2-bdfb-ec2e2f804f04.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/eeba6338-92c3-4516-94dd-d5a2c5350160.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/49bebfca-4aa6-4735-92de-f029bb80fc97.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/29e176a0-dfb5-4c7e-bf7a-4749a7064404.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/b6769362-98c8-4d20-a271-2fbc2a411db9.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cfc1c88b-cbdf-46d2-bdfb-ec2e2f804f04.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/57cc12a6-ab74-470c-b05e-b92bc01b571b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/78d6eb75-a0e8-40fd-b2dc-211a0e8bddf5.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/4c9d26f9-ccb8-4aad-898b-972e6efa9295.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/321d1848-767c-4c67-ac46-a07872b44db9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bc553253-50d6-4d99-9d84-7ddec94e4235.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/7fdd5ae6-c11e-4ce1-b677-669075f6ba7c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/57cc12a6-ab74-470c-b05e-b92bc01b571b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/78d6eb75-a0e8-40fd-b2dc-211a0e8bddf5.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/4c9d26f9-ccb8-4aad-898b-972e6efa9295.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/321d1848-767c-4c67-ac46-a07872b44db9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bc553253-50d6-4d99-9d84-7ddec94e4235.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/7fdd5ae6-c11e-4ce1-b677-669075f6ba7c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/57cc12a6-ab74-470c-b05e-b92bc01b571b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/78d6eb75-a0e8-40fd-b2dc-211a0e8bddf5.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/4c9d26f9-ccb8-4aad-898b-972e6efa9295.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/321d1848-767c-4c67-ac46-a07872b44db9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bc553253-50d6-4d99-9d84-7ddec94e4235.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/7fdd5ae6-c11e-4ce1-b677-669075f6ba7c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* timing */
  --t-fast: 110ms;
  --t-mid: 180ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* radii */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;

  /* base row spacing */
  --row-pad-y: 13px;
  --row-pad-x: 16px;
  --gap: 14px;
}

/* ============================================================
   PAPER — warm light editorial
   ============================================================ */
[data-theme="paper"] {
  color-scheme: light;

  --bg: #f4f2ee;
  --bg-deep: #eceae4;
  --surface: #fbfaf8;
  --surface-2: #ffffff;
  --surface-3: #f3f1ec;
  --surface-hover: #f1efe9;
  --selected: #eef1fb;

  --line: rgba(33,30,24,0.10);
  --line-strong: rgba(33,30,24,0.17);

  --text: #211f1b;
  --text-2: #5d5a52;
  /* P30 — darkened --text-3/--text-faint for legibility at 11–12px.
     Was #8a877e / #adaa9f (~2.9:1 / ~2.0:1 on --bg). Now ~4.0:1 / ~3.0:1
     while staying a clear step below --text-2 so the four-level grey
     hierarchy holds. */
  --text-3: #74716a;
  --text-faint: #8c887e;

  --primary: #1d1b17;
  --primary-text: #fbfaf8;
  --primary-hover: #322f29;

  --accent: #4257d6;
  --accent-2: #354bc4;
  --accent-soft: rgba(66,87,214,0.10);
  --accent-line: rgba(66,87,214,0.30);
  --accent-text: #ffffff;

  --high: #1f9d6b;
  --high-soft: rgba(31,157,107,0.12);
  --med: #b6841a;
  --med-soft: rgba(182,132,26,0.13);
  --low: #3f6fd6;
  --low-soft: rgba(63,111,214,0.11);
  --min: #80807a;
  --min-soft: rgba(128,128,122,0.12);

  /* intent TIER ramp (P23-4) — a violet strength scale, deliberately
     NOT the green/amber/red semaphore. A MEDIUM score must never read
     as a “warning”. Used by the score number + the 4-segment meter;
     the tier label pill itself is neutral. */
  --tier-high: #6b40c9;
  --tier-high-soft: rgba(107,64,201,0.11);
  --tier-med: #7d5bc6;
  --tier-med-soft: rgba(125,91,198,0.11);
  --tier-low: #9484c4;
  --tier-low-soft: rgba(148,132,196,0.11);
  --tier-min: #80807a;
  --tier-min-soft: rgba(128,128,122,0.12);

  --ok: #1f9d6b;
  --warn: #b6841a;
  --risk: #cf5a3c;
  --ok-soft: rgba(31,157,107,0.11);
  --warn-soft: rgba(182,132,26,0.12);
  --risk-soft: rgba(207,90,60,0.11);

  /* sentiment (P23-4) — negative is information, not danger. Red is
     reserved for compliance risk + destructive actions only. */
  --sent-pos: #1f9d6b;
  --sent-pos-soft: rgba(31,157,107,0.11);
  --sent-neu: #80807a;
  --sent-neg: #5b6b8f;
  --sent-neg-soft: rgba(91,107,143,0.12);

  --shadow-panel: 0 1px 2px rgba(33,30,24,0.04), 0 24px 50px -30px rgba(33,30,24,0.22);
  --shadow-pop: 0 18px 50px -14px rgba(33,30,24,0.30), 0 0 0 1px rgba(33,30,24,0.08);
  --grain-opacity: 0.04;
  --switch-off: #b8b4a8;
  --switch-knob: #ffffff;
}

/* ============================================================
   base
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01" 1, "cv03" 1, "ss01" 1;
}
#root { height: 100%; }

::selection { background: var(--accent-soft); }

/* scrollbars */
[data-theme] *::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme] *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
[data-theme] *::-webkit-scrollbar-thumb:hover { background: var(--text-faint); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }

/* focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   SIGNAL — component + layout styles
   ============================================================ */

/* ---------- app frame ---------- */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  transition: grid-template-columns 150ms ease;
  height: 100%;
  background: var(--bg);
  position: relative;
  isolation: isolate;
}
.app.nav-collapsed { grid-template-columns: 64px 1fr; }
[data-density="compact"] .app { grid-template-columns: 212px 1fr; }
[data-density="compact"] .app.nav-collapsed { grid-template-columns: 64px 1fr; }

/* grain atmosphere */
.app::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- sidebar ---------- */
.sidebar {
  display: flex; flex-direction: column;
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  padding: 14px 12px 12px;
  gap: 4px;
  min-height: 0;
  position: relative; z-index: 5;
  overflow: hidden;
}
.sidebar.collapsed { overflow: visible; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; position: relative; overflow: hidden;
  box-shadow: 0 2px 8px -2px var(--accent-line);
}
.brand-mark svg { color: #fff; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand-name b { font-weight: 600; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-section-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); padding: 14px 8px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-md);
  color: var(--text-2); font-size: 13.5px; font-weight: 450;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: color var(--t-fast);
  position: relative;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item .nav-count { margin-left: auto; font-size: 11px; font-family: var(--font-mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.nav-item.active .nav-count { color: var(--text-2); }
.onb-launch { color: var(--text-3); margin-bottom: 8px; }
.nav-demo-tag { margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 2px 6px; border-radius: 5px; }
.nav-spacer { flex: 1; }

/* sync pill (sidebar foot) */
.sync-pill {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.sync-pill:hover { background: var(--surface-2); border-color: var(--line-strong); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; position: relative; }
.sync-dot.live { background: var(--high); box-shadow: 0 0 0 0 var(--high); animation: pulse 2.4s var(--ease) infinite; }
.sync-dot.offline { background: var(--text-3); }
.sync-dot.warn { background: var(--warn); }
.sync-pill.paused { border-color: color-mix(in oklab, var(--warn) 32%, transparent); background: var(--warn-soft); }
.sync-pill.paused:hover { background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn) 45%, transparent); }
.sync-pill.paused .sync-text b { color: var(--text); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(74,214,160,0.4);} 70%{box-shadow:0 0 0 6px rgba(74,214,160,0);} 100%{box-shadow:0 0 0 0 rgba(74,214,160,0);} }
.sync-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; overflow: hidden; }
.sync-text b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-text span { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- collapsible sidebar (P13-4) ---------- */
.nav-collapse-btn { margin-left: auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: none; background: none; color: var(--text-faint); cursor: pointer; flex-shrink: 0; transition: background var(--t-fast), color var(--t-fast); }
.nav-collapse-btn:hover { background: var(--surface-hover); color: var(--text-2); }
.nav-collapse-btn svg { transform: rotate(180deg); transition: transform 150ms ease; }
.sidebar.collapsed .nav-collapse-btn svg { transform: rotate(0deg); }

.nav-ico { display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.nav-label { white-space: nowrap; overflow: hidden; }
.nav-dot-badge { display: none; position: absolute; top: -3px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--bg-deep); }
.plan-foot-up-txt { display: inline; }

.sidebar.collapsed .brand { flex-direction: column; gap: 10px; padding: 6px 0 14px; align-items: center; }
.sidebar.collapsed .brand-name { display: none; }
.sidebar.collapsed .nav-collapse-btn { margin-left: 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .nav-count { display: none; }
.sidebar.collapsed .nav-dot-badge { display: block; }
.sidebar.collapsed .plan-foot { justify-content: center; gap: 5px; padding: 9px 0; }
.sidebar.collapsed .plan-foot-up { margin-left: 0; }
.sidebar.collapsed .plan-foot-up-txt { display: none; }
.sidebar.collapsed .sync-pill { justify-content: center; padding: 11px 0; }
.sidebar.collapsed .sync-text, .sidebar.collapsed .sync-chev { display: none; }

/* hover tooltips in collapsed mode */
.sidebar.collapsed .plan-foot, .sidebar.collapsed .sync-pill { position: relative; }
.sidebar.collapsed [data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: var(--text); color: var(--bg-deep);
  padding: 5px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 500; font-family: var(--font-sans);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.28); z-index: 60; pointer-events: none;
}

/* ---------- main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* topbar */
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px);
}
.topbar-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.topbar-title h1 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.topbar-title .sub { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; }
.topbar-spacer { flex: 1; }

.global-search {
  display: flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 11px; width: 260px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--text-3); cursor: text;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.global-search:hover { border-color: var(--line-strong); }
.global-search input { all: unset; flex: 1; font-size: 13px; color: var(--text); font-family: var(--font-sans); }
.global-search .kbd-grp { display: flex; gap: 3px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font-family: var(--font-sans); font-weight: 500; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-md { height: 32px; padding: 0 13px; font-size: 13px; }
.btn-sm { height: 27px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 38px; padding: 0 18px; font-size: 14px; }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-2); }
.btn-accent { background: var(--accent); color: var(--accent-text); }
.btn-accent:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn-outline { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn-soft { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-soft:hover { background: var(--surface-3); }
.btn-danger { background: var(--risk); color: #fff; border-color: transparent; }
.btn-danger:hover { background: color-mix(in oklab, var(--risk) 85%, black); }

/* ---------- kbd ---------- */
.kbd {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1;
  min-width: 17px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text-3); font-weight: 500;
}

/* ---------- intent badge ---------- */
.intent-badge { display: inline-flex; align-items: center; gap: 7px; }
.intent-num {
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tier);
  letter-spacing: -0.02em; line-height: 1;
}
.intent-md .intent-num { font-size: 21px; }
.intent-sm .intent-num { font-size: 16px; }
/* P23-4 — tier label pill is NEUTRAL so a score badge never reads like a
   verdict pill. The colour lives in the number + the 4-seg meter (violet
   tier ramp), never in semaphore green/amber. */
.intent-tier {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3); padding: 2px 6px; border-radius: 5px; background: var(--surface-3);
}
.intent-sm .intent-tier { font-size: 9px; padding: 1.5px 5px; }

/* big intent for detail panel */
.intent-lg {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--tier-soft); border: 1px solid color-mix(in oklab, var(--tier) 22%, transparent);
}
.intent-lg-num { font-size: 46px; font-weight: 600; line-height: 0.9; color: var(--tier); letter-spacing: -0.03em; }
.intent-lg-side { display: flex; flex-direction: column; gap: 8px; }
.intent-lg-label { font-size: 13px; font-weight: 600; color: var(--text-2); }

/* ---------- risk badge ---------- */
.risk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rk); font-size: 12px; font-weight: 500;
  padding: 3px 8px 3px 7px; border-radius: 20px; background: var(--rk-soft);
  border: 1px solid color-mix(in oklab, var(--rk) 25%, transparent);
}

/* ---------- author chip ---------- */
.author-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.author-name { font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.author-meta { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.author-flag {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500;
  color: var(--med); background: var(--med-soft); padding: 2px 8px 2px 6px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0; line-height: 1.35;
}
.author-flag.mini { padding: 3px; gap: 0; border-radius: 50%; }
.author-flag svg { flex-shrink: 0; }

/* ---------- status dot ---------- */
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-new { background: var(--accent); }
.status-reviewing { background: color-mix(in oklab, var(--accent) 50%, var(--surface-3)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent); }
.status-snoozed { background: var(--med); }
.status-actioned { background: var(--high); }
.status-ignored { background: var(--text-faint); }

/* ---------- generic pill / tag ---------- */
.tag {
  font-size: 11px; font-weight: 450; color: var(--text-2);
  padding: 2.5px 8px; border-radius: 6px; background: var(--surface-3);
  border: 1px solid var(--line); white-space: nowrap;
}
.tag.accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }

/* card primitive */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }

.fade-up { animation: fadeUp var(--t-mid) var(--ease); }
@keyframes fadeUp { from { transform: translateY(6px); } to { transform: none; } }

/* ---------- command palette ---------- */
.cmd-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: color-mix(in oklab, var(--bg-deep) 55%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; animation: fadeUp 120ms var(--ease);
}
.cmd-palette {
  width: 600px; max-width: 92vw; max-height: 64vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-pop); overflow: hidden;
  animation: cmdPop 160ms var(--ease);
}
@keyframes cmdPop { from { transform: translateY(-8px) scale(0.985); } to { transform: none; } }
.cmd-input-row { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.cmd-input-row input { all: unset; flex: 1; font-size: 15px; color: var(--text); }
.cmd-input-row input::placeholder { color: var(--text-3); }
.cmd-results { overflow-y: auto; padding: 7px; }
.cmd-group-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 9px 9px 5px; }
.cmd-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 9px; border-radius: var(--r-md); border: none; background: none;
  color: var(--text); font-size: 13.5px; font-family: var(--font-sans); cursor: pointer;
}
.cmd-item.active { background: var(--accent-soft); }
.cmd-item > span:first-of-type { flex: 1; }
.cmd-kbd { display: flex; gap: 3px; }
.cmd-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: 13px; }
.cmd-foot { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-3); }
.cmd-foot span { display: inline-flex; align-items: center; gap: 5px; }
.cmd-foot-spacer { flex: 1; }

/* ---------- P32 — sync pill: aggregate + per-profile popover ---------- */
.sync-wrap { position: relative; }
.sync-pill.on { background: var(--surface-2); border-color: var(--line-strong); }
.sync-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop, 0 16px 40px -12px rgba(20,18,14,0.35)); padding: 12px; overflow: hidden;
}
.sync-pop-head { display: flex; align-items: flex-start; gap: 9px; padding: 2px 2px 11px; }
.sync-pop-head .sync-dot { margin-top: 5px; }
.sync-pop-head-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sync-pop-head-txt b { font-size: 13px; font-weight: 600; color: var(--text); }
.sync-pop-head-txt span { font-size: 11px; color: var(--text-3); line-height: 1.4; }
.sync-pop-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 8px 2px 4px; border-top: 1px solid var(--line); }
.sync-pop-list { display: flex; flex-direction: column; }
.sync-prof { display: flex; align-items: center; gap: 9px; padding: 7px 2px; }
.sync-prof .sync-dot { flex-shrink: 0; }
.sync-prof-body { flex: 1; min-width: 0; }
.sync-prof-name { font-size: 12.5px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 6px; }
.sync-prof-tag { font-size: 9.5px; font-weight: 600; color: var(--text-3); background: var(--surface-3); border-radius: 5px; padding: 1px 5px; }
.sync-prof-meta { font-size: 10.5px; color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-prof-rate { font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; }
.sync-prof-fix { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 20px; padding: 3px 9px; cursor: pointer; flex-shrink: 0; font-family: var(--font-sans); }
.sync-prof-fix:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.sync-pop-add {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 8px; padding: 9px 10px;
  border: 1px dashed var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft);
  color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--font-sans); transition: all var(--t-fast);
}
.sync-pop-add:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); border-style: solid; }
.sync-pop-add > svg { color: var(--accent); flex-shrink: 0; }
.sync-pop-add-hint { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--text-3); }


/* ============================================================
   SIGNAL — Signals inbox (3-pane) + detail panel
   ============================================================ */

.signals-wrap { display: grid; grid-template-columns: 232px minmax(0, 1fr) 0; height: 100%; min-height: 0; position: relative; transition: grid-template-columns var(--t-mid) var(--ease); }
.signals-wrap:has(.detail-panel) { grid-template-columns: 232px minmax(380px, 1fr) 452px; }
[data-density="compact"] .signals-wrap { grid-template-columns: 210px minmax(0,1fr) 0; }
[data-density="compact"] .signals-wrap:has(.detail-panel) { grid-template-columns: 210px minmax(360px,1fr) 430px; }

/* narrow: detail becomes an overlay drawer */
.detail-scrim { display: none; }
@media (max-width: 1080px) {
  .signals-wrap:has(.detail-panel) { grid-template-columns: 232px minmax(0,1fr); }
  [data-density="compact"] .signals-wrap:has(.detail-panel) { grid-template-columns: 210px minmax(0,1fr); }
  .detail-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 92vw); z-index: 50; box-shadow: -28px 0 70px -22px rgba(0,0,0,0.55); }
  .detail-scrim { display: block; position: absolute; inset: 0; z-index: 40; background: color-mix(in oklab, var(--bg-deep) 42%, transparent); backdrop-filter: blur(1.5px); animation: scrimIn var(--t-mid) var(--ease); }
}
@keyframes scrimIn { from { opacity: 0.4; } to { opacity: 1; } }

/* ---------- left rail ---------- */
.rail { border-right: 1px solid var(--line); background: var(--bg); min-height: 0; display: flex; flex-direction: column; }
.rail-scroll { overflow-y: auto; padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 18px; }
.rail-group { display: flex; flex-direction: column; gap: 7px; }
.rail-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.rail-view {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: var(--r-md); border: none; background: none;
  color: var(--text-2); font-size: 13px; font-family: var(--font-sans); cursor: pointer;
  transition: color var(--t-fast);
}
.rail-view:hover { background: var(--surface-hover); color: var(--text); }
.rail-view.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.rail-view.dim { color: var(--text-3); }
.rail-view > span:first-of-type { flex: 1; }
.rail-view-count { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rail-view.active .rail-view-count { color: var(--text-2); }

/* slider */
.rail-slider { display: flex; flex-direction: column; gap: 9px; padding: 2px 2px 0; }
.rail-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--pct), var(--surface-3) var(--pct)); cursor: pointer; }
.rail-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: grab; }
.rail-slider-val { display: flex; align-items: baseline; gap: 8px; }
.rail-slider-val span:first-child { font-size: 15px; font-weight: 600; color: var(--text); }
.rail-slider-val span:last-child { font-size: 11.5px; color: var(--text-3); }

.rail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-chip { font-size: 11.5px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; font-family: var(--font-sans); transition: all var(--t-fast); }
.rail-chip:hover { border-color: var(--line-strong); color: var(--text); }
.rail-chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 500; }

.seg { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.seg button { flex: 1; height: 26px; border: none; background: none; border-radius: 6px; font-size: 11.5px; font-family: var(--font-sans); color: var(--text-3); cursor: pointer; transition: color var(--t-fast); white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface-3); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

.rail-toggle { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-2); cursor: pointer; }
.switch { width: 34px; height: 20px; border-radius: 20px; border: none; background: var(--switch-off); cursor: pointer; padding: 0; position: relative; transition: background var(--t-fast); flex-shrink: 0; }
.switch span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left var(--t-fast); }
.switch.on { background: var(--accent); }
.switch.on span { left: 17px; background: #fff; }

/* disclosure rows (Done, Filters) */
.rail-disc {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: var(--r-md); border: none; background: none;
  color: var(--text-2); font-size: 13px; font-family: var(--font-sans); cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.rail-disc:hover { background: var(--surface-hover); color: var(--text); }
.rail-disc > span:not(.rail-view-count):not(.rail-disc-badge):not(.rail-disc-clear):not(.sig-spacer) { flex: 1; }
.rail-disc-chev { color: var(--text-faint); transition: transform var(--t-fast); flex-shrink: 0; }
.rail-disc.open .rail-disc-chev { transform: rotate(90deg); }
.rail-disc.has-active { color: var(--text); }
.rail-disc.has-active .rail-disc-chev { color: var(--accent); }
.rail-disc-body { display: flex; flex-direction: column; gap: 7px; padding-left: 13px; margin-top: 4px; border-left: 1px solid var(--line); margin-left: 6px; animation: fadeUp 140ms var(--ease); }

.rail-disc-lg { font-weight: 500; color: var(--text); }
.rail-disc-lg svg:nth-of-type(2) { color: var(--text-3); }
.rail-disc-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rail-disc-clear { font-size: 11px; color: var(--text-3); padding: 2px 6px; border-radius: 5px; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.rail-disc-clear:hover { color: var(--accent); background: var(--accent-soft); }
.rail-filters { gap: 15px; }
.rail-sub { display: flex; flex-direction: column; gap: 7px; }

/* active filter chips (surface collapsed-group state) */
.rail-active { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-active-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 7px 4px 9px; border-radius: 7px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; transition: background var(--t-fast); }
.rail-active-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-active-chip svg { flex-shrink: 0; opacity: 0.7; }
.rail-active-chip:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); }
.rail-active-chip:hover svg { opacity: 1; }

/* ---------- center list ---------- */
.sig-list-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); }
.sig-offline-banner { display: flex; align-items: center; gap: 9px; padding: 9px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--text-3); font-size: 12px; line-height: 1.4; flex-shrink: 0; }
.sig-offline-banner svg { color: var(--text-faint); flex-shrink: 0; }
.sig-offline-banner.paused { background: var(--warn-soft); color: var(--text-2); }
.sig-offline-banner.paused svg { color: var(--warn); }
.sig-banner-up { margin-left: auto; flex-shrink: 0; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--surface-2); border: 1px solid var(--accent-line); border-radius: 20px; padding: 3px 11px; cursor: pointer; }
.sig-banner-up:hover { background: var(--accent-soft); }
.sig-offline-banner b { color: var(--text-2); font-weight: 600; }
.sig-list-head { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sig-count { font-size: 13px; color: var(--text-2); } .sig-count b { color: var(--text); font-weight: 600; }
.sig-list-hint { font-size: 11.5px; color: var(--text-faint); }
.sig-sort { display: inline-flex; align-items: center; gap: 3px; }
.sig-sort-label { font-size: 11.5px; color: var(--text-faint); margin-right: 3px; }
.sig-sort-btn { font-size: 11.5px; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 3px 8px; border-radius: 6px; transition: color var(--t-fast), background var(--t-fast); }
.sig-sort-btn:hover { color: var(--text); background: var(--surface-hover); }
.sig-sort-btn.on { color: var(--text); background: var(--surface-2); font-weight: 500; }
.sig-assignee { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 8.5px; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; border: 1px solid var(--accent-line); }
.sig-spacer { flex: 1; }
.kbd-hint { font-size: 11px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 4px; }
.kbd-hint .kbd { margin: 0 1px; }

.bulk-bar { display: flex; align-items: center; gap: 7px; width: 100%; animation: fadeUp 140ms var(--ease); }
.bulk-n { font-size: 13px; color: var(--text-2); margin-right: 4px; } .bulk-n b { color: var(--accent); }

.sig-list { overflow-y: auto; flex: 1; min-height: 0; padding: 8px 12px 40px; }

/* signal card */
.sig-card {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: start;
  padding: var(--row-pad-y) var(--row-pad-x); border-radius: var(--r-lg);
  cursor: pointer; position: relative; border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.sig-card + .sig-card { margin-top: 2px; }
.sig-card:hover { background: var(--surface-hover); }
.sig-card.active { background: var(--selected); border-color: var(--accent-line); }
.sig-card.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2.5px; border-radius: 3px; background: var(--accent); }
.sig-card.removed { opacity: 0.6; }
.sig-card.selected { background: var(--accent-soft); }

.sig-check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; margin-top: 2px; display: grid; place-items: center; color: #fff; transition: all var(--t-fast); padding: 0; }
.sig-card:hover .sig-check { border-color: var(--text-faint); }
.sig-check.on { background: var(--accent); border-color: var(--accent); }

.sig-body { min-width: 0; }
.sig-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.sig-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; flex: 1; min-width: 0; }
.sig-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-top: 1px; }
.sig-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--text-2); min-width: 0; }
.sig-sub svg { color: var(--text-3); flex-shrink: 0; }
.sig-kind { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.sig-age { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.sig-age.stale { opacity: 0.45; font-style: italic; }
.sig-removed-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: var(--risk); background: var(--risk-soft); padding: 1px 6px; border-radius: 5px; }
.sig-return { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: var(--med); background: var(--med-soft); padding: 1px 6px; border-radius: 5px; }
.sig-title { font-size: 14px; font-weight: 550; line-height: 1.35; color: var(--text); margin-bottom: 3px; letter-spacing: -0.005em; text-wrap: pretty; }
.sig-snippet { font-size: 12.5px; line-height: 1.45; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 9px; }
.sig-foot { display: flex; align-items: center; gap: 10px; }
.sig-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.sig-intent { padding-top: 1px; }

.list-end { text-align: center; font-size: 11.5px; color: var(--text-faint); padding: 22px 0 8px; }

/* empty / loading states */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 70px 40px; gap: 13px; }
.empty-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.empty-sub { font-size: 13px; color: var(--text-3); line-height: 1.5; max-width: 320px; }
.empty-icon.listening { position: relative; color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); overflow: visible; }
.listening-pulse { position: absolute; inset: -1px; border-radius: 14px; border: 1.5px solid var(--accent); animation: listenpulse 2.2s ease-out infinite; }
@keyframes listenpulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.45); opacity: 0; } }

/* skeleton rows */
.sig-card.skeleton { cursor: default; pointer-events: none; }
.sk-check { width: 18px; height: 18px; border-radius: 5px; background: var(--surface-3); flex-shrink: 0; }
.sk-line { height: 10px; border-radius: 5px; background: var(--surface-3); }
.sk-top { width: 42%; margin-bottom: 11px; }
.sk-title { width: 86%; height: 13px; margin-bottom: 9px; }
.sk-snip { width: 100%; margin-bottom: 7px; }
.sk-snip.short { width: 58%; margin-bottom: 12px; }
.sk-foot { display: flex; justify-content: space-between; }
.sk-author { width: 32%; } .sk-stat { width: 16%; }
.sk-intent { width: 46px; height: 42px; border-radius: 8px; background: var(--surface-3); flex-shrink: 0; }
@keyframes skpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }
.sig-card.skeleton .sk-line, .sig-card.skeleton .sk-check, .sig-card.skeleton .sk-intent { animation: skpulse 1.2s ease-in-out infinite; }

/* ---------- detail panel ---------- */
.detail-panel { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-panel); container: detail / inline-size; }
.dp-bar { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--surface); flex-wrap: nowrap; }
.dp-bar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dp-bar-mid { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; justify-content: flex-end; overflow: hidden; }
.dp-bar-mid .dp-assign-cur { flex-shrink: 0; }
.dp-bar-mid .dp-camp-chip { flex-shrink: 1; min-width: 78px; max-width: 190px; }
.dp-bar-mid .dp-camp-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-open-icon { padding: 6px; }
.dp-bar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.dp-bar-right .dp-open { flex-shrink: 1; min-width: 0; }
.dp-bar-right .dp-open span, .dp-open.mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-assignee { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 11.5px; color: var(--text-2); font-weight: 500; }
.dp-assignee-av { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 8.5px; font-weight: 600; border: 1px solid var(--accent-line); }
.dp-open { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-3); cursor: pointer; padding: 5px 8px; border-radius: 6px; }
.dp-open:hover { color: var(--accent); background: var(--accent-soft); }
.dp-close { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; border: none; background: none; color: var(--text-3); cursor: pointer; transition: all var(--t-fast); flex-shrink: 0; }
.dp-close:hover { background: var(--surface-hover); color: var(--text); }

.detail-scroll { overflow-y: auto; flex: 1; min-height: 0; }
.dp-section { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dp-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 13px; letter-spacing: 0.01em; }
.dp-h svg { color: var(--text-3); }
.dp-h-meta { margin-left: auto; font-size: 11px; color: var(--text-faint); font-weight: 400; }

/* collapsible depth sections (P12-2) */
.dp-collapse { padding: 0; }
.dp-collapse-head { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 15px 20px; border: none; background: none; font-family: var(--font-sans); cursor: pointer; transition: background var(--t-fast); }
.dp-collapse-head:hover { background: var(--surface-hover); }
.dp-collapse-icon { color: var(--text-3); flex-shrink: 0; }
.dp-collapse-title { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.01em; }
.dp-collapse-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); font-size: 10.5px; font-weight: 600; flex-shrink: 0; }
.dp-collapse-summary { flex: 1; min-width: 0; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-collapse-summary.quiet { flex: none; color: var(--accent); }
.dp-collapse-meta { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.dp-collapse-chev { color: var(--text-faint); margin-left: auto; flex-shrink: 0; transition: transform var(--t-fast); }
.dp-collapse.open .dp-collapse-chev { transform: rotate(180deg); }
.dp-collapse-body { padding: 0 20px 18px; }
.dp-collapse-body .author-card { margin-top: 2px; }

/* compliance detail toggle (P12-2) */
.comp-expand { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); font-family: var(--font-sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--t-fast); }
.comp-expand:hover { border-color: var(--line-strong); color: var(--text); }
.comp-expand-chev { color: var(--text-3); transition: transform var(--t-fast); }
.comp-expand.open .comp-expand-chev { transform: rotate(180deg); }
.comp-detail { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.comp-detail > * { margin-bottom: 0; }

.dp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* P20-2 — compact score + plain-English reason */
.dp-score-sec { padding-top: 16px; padding-bottom: 16px; }
.dp-score-line { display: flex; align-items: center; gap: 12px; }
.dp-score-reason { font-size: 13px; line-height: 1.45; color: var(--text); font-weight: 500; text-wrap: pretty; min-width: 0; }
.dp-why-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }

/* P21-3 — thread body clamps to 3 lines with an inline “…more” at the end of line 3 */
.thread-body-wrap { position: relative; margin-bottom: 2px; }
.thread-body-wrap:not(.expanded) .thread-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.thread-more-inline { position: absolute; right: 0; bottom: 0; padding: 0 0 0 42px; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.6; font-weight: 600; color: var(--accent); background: linear-gradient(90deg, transparent, var(--surface) 34%); }
.thread-more-inline:hover { text-decoration: underline; }
.thread-meta { flex-wrap: wrap; }

/* P19-2 — additive "reply to you" chip on engaged cards */
.sig-reply-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 1px 7px 1px 6px; border-radius: 5px; white-space: nowrap; }
.sig-reply-chip svg { flex-shrink: 0; }

/* thread */
.thread-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); margin-bottom: 9px; }
.thread-dot { color: var(--text-faint); }
.thread-stat { display: inline-flex; align-items: center; gap: 4px; }
.thread-stat svg { color: var(--text-faint); }
/* P23-4 \u2014 sentiment is information, not danger: neutral word + a small calm
   dot. Negative no longer borrows the risk-red family. */
.thread-sent-word { font-weight: 600; text-transform: capitalize; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.thread-sent-word::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sent-neu); flex-shrink: 0; }
.thread-sent-word.sent-neg, .thread-sent-word.sent-neu, .thread-sent-word.sent-pos { background: none; color: var(--text-2); }
.thread-sent-word.sent-neg::before { background: var(--sent-neg); }
.thread-sent-word.sent-neu::before { background: var(--sent-neu); }
.thread-sent-word.sent-pos::before { background: var(--sent-pos); }
.thread-title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 10px; text-wrap: pretty; }
.thread-body { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0; }
.thread-sent { font-size: 11px; padding: 2px 8px 2px 7px; border-radius: 6px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.thread-sent::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sent-neu); flex-shrink: 0; }
.sent-neg { background: var(--sent-neg-soft); color: var(--text-2); }
.sent-neu { background: var(--surface-3); color: var(--text-3); }
.sent-pos { background: var(--sent-pos-soft); color: var(--text-2); }
.thread-sent.sent-neg::before { background: var(--sent-neg); }
.thread-sent.sent-pos::before { background: var(--sent-pos); }

/* author */
.author-card { display: flex; gap: 12px; align-items: flex-start; }
.author-avatar { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(150deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--text-2); flex-shrink: 0; }
.author-card-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.author-card-stats { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-3); margin-bottom: 5px; }
.author-card-stats b { color: var(--text); font-weight: 600; }
.author-card-hist { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.author-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }

/* why */
.why-summary { font-size: 13px; line-height: 1.6; color: var(--text-2); margin: 0 0 16px; }
.why-factors { display: flex; flex-direction: column; gap: 13px; }
.why-factor-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.why-factor-label { font-size: 12.5px; font-weight: 500; color: var(--text); }
.why-weight { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1.5px 6px; border-radius: 5px; }
.w-strong { color: var(--high); background: var(--high-soft); }
.w-medium { color: var(--med); background: var(--med-soft); }
.w-weak { color: var(--text-3); background: var(--surface-3); }
.why-factor-bar { height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-bottom: 6px; }
.why-factor-bar span { display: block; height: 100%; border-radius: 3px; }
.why-factor-detail { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }

/* removed banner */
.removed-banner { display: flex; gap: 11px; align-items: flex-start; margin: 16px 20px 0; padding: 13px 15px; border-radius: var(--r-md); background: var(--risk-soft); border: 1px solid color-mix(in oklab, var(--risk) 25%, transparent); color: var(--risk); }
.removed-banner svg { margin-top: 1px; flex-shrink: 0; }
.removed-banner b { display: block; font-size: 13px; margin-bottom: 2px; }
.removed-banner span { font-size: 12px; opacity: 0.85; line-height: 1.4; }

/* tombstone treatment — deleted threads: content gone, triage preserved */
.sig-title.tomb { color: var(--text-faint); font-style: italic; font-weight: 500; }
.sig-tomb-line { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-faint); margin-top: 3px; line-height: 1.4; }
.sig-tomb-line svg { flex-shrink: 0; }
.sig-card.removed .sig-title.tomb { opacity: 1; }
.thread-tomb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-faint); font-style: italic; padding: 6px 0 2px; }
.thread-tomb svg { flex-shrink: 0; font-style: normal; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); font-size: 13px; font-weight: 500; color: var(--text); animation: toastIn 200ms var(--ease); }
.toast-msg { min-width: 0; }
.toast-undo { margin-left: 4px; padding: 4px 11px; border-radius: 7px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--t-fast); }
.toast-undo:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
@keyframes toastIn { from { transform: translate(-50%, 10px); } to { transform: translate(-50%, 0); } }

/* ---------- origin chip on cards (mention / alert lenses) ---------- */
.sig-origin { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.01em; padding: 2px 8px; border-radius: 20px; margin-bottom: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-origin svg { flex-shrink: 0; }
.sig-origin.mention { color: var(--accent); background: var(--accent-soft); }
.sig-origin.alert { color: var(--med); background: var(--med-soft); }

/* ---------- lens banner above the list ---------- */
.sig-lens-banner { display: flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.sig-lens-banner svg { color: var(--accent); flex-shrink: 0; }

/* ---------- triggered-by banner in detail ---------- */
.dp-trigger { display: flex; align-items: center; gap: 11px; margin: 16px 20px 0; padding: 11px 14px; border-radius: var(--r-md); background: var(--med-soft); border: 1px solid color-mix(in oklab, var(--med) 28%, transparent); }
.dp-trigger svg { color: var(--med); flex-shrink: 0; }
.dp-trigger b { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--med); margin-bottom: 1px; }
.dp-trigger span { font-size: 13px; color: var(--text); font-weight: 500; }

/* ---------- save-to-collection popover ---------- */
.dp-save { position: relative; }
.dp-save-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 230px; padding: 6px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); animation: fadeUp 140ms var(--ease); }
.dp-save-head { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 6px 9px 8px; }
.dp-save-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: none; background: none; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 13px; color: var(--text); cursor: pointer; text-align: left; transition: background var(--t-fast); }
.dp-save-item:hover:not(:disabled) { background: var(--surface-hover); }
.dp-save-item:disabled { cursor: default; color: var(--text-3); }
.dp-save-item span:not(.dp-save-n) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-save-n { font-size: 10.5px; color: var(--text-faint); }
.dp-save-item.add { color: var(--accent); font-weight: 500; }
.dp-save-item.add svg { color: var(--accent); }
.dp-save-new { display: flex; gap: 6px; padding: 6px 7px; }
.dp-save-new input { flex: 1; min-width: 0; border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-sm); padding: 6px 9px; font-family: var(--font-sans); font-size: 12.5px; color: var(--text); outline: none; }
.dp-save-new input:focus { border-color: var(--accent); }

/* ============================================================
   SIGNAL — Compliance panel + Composer (Hero 2)
   ============================================================ */

/* ---------- compliance ---------- */
.dp-section.compliance { background: color-mix(in oklab, var(--surface-2) 60%, var(--surface)); }

/* P31 — capture provenance + posting-identity binding */
.cap-prov { display: inline-flex; align-items: center; gap: 4px; }
.cap-prov svg { color: var(--text-faint); }
.comp-id-prompt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--accent); background: none; border: none; padding: 2px 0 0; cursor: pointer; font-family: var(--font-sans); text-align: left; line-height: 1.35; }
.comp-id-prompt:hover { text-decoration: underline; }
.comp-id-prompt svg { flex-shrink: 0; }
.comp-id-caveat { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in oklab, var(--warn) 10%, var(--surface)); border: 1px solid color-mix(in oklab, var(--warn) 28%, var(--line)); font-size: 12px; color: var(--text-2); line-height: 1.45; }
.comp-id-caveat svg { color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.comp-id-caveat b { color: var(--text); }
.comp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.comp-head-l { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.comp-head-l svg { color: var(--accent); }
.comp-sub { font-size: 11.5px; color: var(--text-3); }

.comp-risk { display: flex; flex-direction: column; gap: 9px; padding: 13px 14px; border-radius: var(--r-md); margin-bottom: 14px; border: 1px solid var(--line); }
.comp-risk.risk-clear { background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok) 22%, transparent); }
.comp-risk.risk-heads { background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn) 22%, transparent); }
.comp-risk.risk-risky { background: var(--risk-soft); border-color: color-mix(in oklab, var(--risk) 22%, transparent); }
.comp-risk p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }

/* P21-3 — verdict word lives in the section header; the card colour does the rest */
.comp-head-dot { color: var(--text-faint); }
.comp-head-verdict { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.comp-head-verdict svg { flex-shrink: 0; }
.comp-head-verdict.v-heads { color: var(--warn); }
.comp-head-verdict.v-risky { color: var(--risk); }
.comp-head-verdict.v-clear { color: var(--ok); }

.comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; }
.comp-cell { padding: 11px 13px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.comp-cell-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 7px; }
.comp-yesno { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.comp-yesno.yes { color: var(--ok); }
.comp-yesno.no { color: var(--risk); }
.comp-standing { display: flex; flex-direction: column; gap: 4px; }
.comp-good { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.comp-stand-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.comp-standing .mono { font-size: 11px; color: var(--text-3); }

.comp-ratio { padding: 12px 13px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
.comp-ratio-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.comp-ratio-val { font-size: 12px; color: var(--text); font-weight: 500; }
.comp-ratio-track { position: relative; height: 7px; border-radius: 7px; background: var(--surface-3); overflow: visible; margin-bottom: 9px; }
.comp-ratio-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--ok), color-mix(in oklab, var(--ok) 70%, var(--accent))); }
.comp-ratio-mark { position: absolute; top: -3px; width: 2px; height: 13px; background: var(--text-faint); border-radius: 2px; }
.comp-ratio-legend { font-size: 11.5px; }
.comp-ratio-legend span { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }

.comp-rules { padding: 12px 13px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.comp-rules .comp-cell-label { margin-bottom: 3px; }
.comp-rule { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.comp-rule svg { margin-top: 2px; flex-shrink: 0; }

.comp-disclosure { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.comp-disclosure svg { color: var(--accent); margin-top: 1px; flex-shrink: 0; }
.comp-disclosure b { display: block; font-size: 12.5px; color: var(--text); margin-bottom: 2px; }
.comp-disclosure span { font-size: 12px; color: var(--text-2); line-height: 1.45; }

/* P20-5 — quiet-when-clear compliance line */
.dp-section.compliance-quiet { padding-top: 14px; padding-bottom: 14px; }
.comp-quiet { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 0; border: none; background: none; font-family: var(--font-sans); cursor: pointer; }
.comp-quiet-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; flex-shrink: 0; }
.comp-quiet-text { font-size: 12.5px; color: var(--text-2); line-height: 1.4; flex: 1; min-width: 0; }
.comp-quiet-text b { color: var(--ok); font-weight: 600; }
.comp-quiet-sub { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.comp-quiet .comp-expand-chev { color: var(--text-faint); transition: transform var(--t-fast); flex-shrink: 0; }
.comp-quiet .comp-expand-chev.open { transform: rotate(180deg); }
.comp-detail-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* ---------- composer (P21-2 chrome diet) ---------- */
.dp-section.composer { border-bottom: none; padding-bottom: 22px; }
.composer-tones { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; margin-bottom: 11px; }
.composer-tones .voice-pick { flex-shrink: 0; }
.composer-tone { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); font-size: 12px; font-family: var(--font-sans); font-weight: 500; cursor: pointer; transition: all var(--t-fast); flex-shrink: 0; }
.composer-tone:hover { color: var(--text); border-color: var(--line-strong); }
.composer-tone.on { background: var(--surface-2); color: var(--text); border-color: var(--accent-line); }
.composer-tone-tab { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 600; background: var(--surface-3); color: var(--text-3); flex-shrink: 0; }
.composer-tone.on .composer-tone-tab { background: var(--accent); color: #fff; }
.composer-regen { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--text-3); background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; flex-shrink: 0; transition: all var(--t-fast); }
.composer-regen:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }

/* one control row, enforced: at narrow panel widths the tone labels drop, leaving
   the lettered A/B/C segments (with tooltips) so voice + regenerate still fit. */
@container detail (max-width: 480px) {
  .composer-tone-label { display: none; }
  .composer-tone { padding: 6px; gap: 0; }
}

.composer-editor { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); overflow: hidden; transition: border-color var(--t-fast); }
.composer-editor:focus-within { border-color: var(--accent); }
.composer-editor textarea {
  display: block; width: 100%; min-height: 112px; max-height: 320px; resize: vertical; border: none; background: none; outline: none; overflow-y: auto;
  padding: 13px 15px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.6; color: var(--text);
  transition: min-height var(--t-mid) var(--ease);
}
.composer-editor:focus-within textarea { min-height: 188px; }
.composer-note { font-size: 11.5px; line-height: 1.5; color: var(--text-3); margin: 12px 0 0; text-align: center; }

/* P23-2 — trial-expired drafting lock (quiet, inline, no modal) */
.composer-lock { display: flex; align-items: center; gap: 13px; padding: 16px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.composer-lock-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.composer-lock-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.composer-lock-body b { font-size: 13px; font-weight: 600; color: var(--text); }
.composer-lock-body span { font-size: 12px; color: var(--text-3); line-height: 1.5; text-wrap: pretty; }

/* ---------- P22-1/2 — sticky-when-needed act bar ---------- */
/* The bar lives at the end of the composer's flow. It pins to the scroll
   container's bottom edge only while its natural spot is below the fold;
   on short content it just sits under the editor, no gap. */
.actbar-sentinel { height: 1px; margin: 0; pointer-events: none; }
.composer-actbar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  margin: 14px -20px -22px; padding: 13px 20px;
  border-top: 1px solid transparent; background: transparent;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
/* P22-2 — elevation appears ONLY while floating over scrolled content; once it
   settles it reads as the composer's last row, not a toolbar. */
.composer-actbar.floating {
  border-top-color: var(--line);
  background: color-mix(in oklab, var(--surface-2) 62%, var(--surface));
  box-shadow: 0 -10px 24px -18px rgba(0,0,0,0.45);
}
.actbar-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.actbar-meta .composer-disc { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ok); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actbar-meta .composer-disc svg { flex-shrink: 0; }
.actbar-meta .composer-count { font-size: 10.5px; color: var(--text-faint); }
.actbar-buttons { display: flex; gap: 9px; flex-shrink: 0; }

.actbar-watch { flex-direction: column; align-items: stretch; gap: 6px; }
.actbar-watch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.actbar-watch .watch-dot { margin-top: 0; }
.actbar-watch-text { flex: 1; min-width: 170px; font-size: 12px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.actbar-watch .composer-watch-fallback { margin: 0; flex-shrink: 0; white-space: nowrap; }
/* P22-3 — restored P18 privacy line, small and quiet */
.actbar-watch-trust { margin: 0; padding-left: 16px; font-size: 11px; line-height: 1.4; color: var(--text-faint); text-wrap: pretty; }

.actbar-detected { display: flex; align-items: center; gap: 10px; width: 100%; }
.actbar-detected .detected-tick { width: 22px; height: 22px; }
.actbar-detected .composer-detected-text { font-size: 12.5px; font-weight: 600; color: var(--text); }

/* P19-2 — follow-up composer: a quiet "replying to" line, accented frame */
.dp-section.composer-followup { background: color-mix(in oklab, var(--accent-soft) 40%, var(--surface)); border-top: 1px solid var(--accent-line); }
.composer-replying-to { display: flex; align-items: flex-start; gap: 7px; margin: -2px 0 12px; padding: 9px 11px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; color: var(--text-3); text-wrap: pretty; }
.composer-replying-to svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.composer-replying-to b { color: var(--text-2); font-weight: 600; }

/* ============================================================
   SIGNAL — Today / Research / Onboarding screens
   ============================================================ */

/* coming soon */
.coming { display: grid; place-items: center; height: 100%; padding: 40px; }
.coming-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 380px; }
.coming-card h2 { font-size: 19px; font-weight: 600; margin: 0; }
.coming-card p { font-size: 13.5px; color: var(--text-3); line-height: 1.6; margin: 0; }
.coming-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.coming-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.coming-list li svg { margin-top: 3px; flex-shrink: 0; }
.coming-tag { font-size: 11px; color: var(--text-faint); padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line); margin-top: 6px; }

/* ============================================================
   TODAY
   ============================================================ */
.today-wrap { overflow-y: auto; height: 100%; }
.today-inner { max-width: 1080px; margin: 0 auto; padding: 36px 40px 60px; }
.today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.today-greeting { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 7px; }
.today-sub { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0; max-width: 540px; text-wrap: pretty; }

.today-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px; }
.today-stat { text-align: left; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: all var(--t-fast); position: relative; overflow: hidden; }
.today-stat:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.today-stat::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc); }
.today-stat.tone-high { --tc: var(--high); } .today-stat.tone-accent { --tc: var(--accent); } .today-stat.tone-med { --tc: var(--med); }
.today-stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--tc); margin-bottom: 14px; }
.today-stat-go { color: var(--text-faint); transition: transform var(--t-fast); }
.today-stat:hover .today-stat-go { transform: translateX(2px); color: var(--text-3); }
.today-stat-n { font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; margin-bottom: 6px; }
.today-stat-label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.today-stat-delta { font-size: 11.5px; color: var(--text-3); }

.today-cols { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 26px; align-items: start; }
@media (max-width: 1040px) { .today-cols { grid-template-columns: 1fr; } .today-side { display: grid; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .today-side { grid-template-columns: 1fr; } }
.today-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.today-sec-head h3 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.today-sec-meta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

.today-list { display: flex; flex-direction: column; gap: 8px; }
.today-listening { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 44px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.today-listening-title { font-size: 16px; font-weight: 600; }
.today-listening-sub { font-size: 13px; color: var(--text-2); max-width: 400px; line-height: 1.55; text-wrap: pretty; }
.today-row { display: grid; grid-template-columns: 124px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 13px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); transition: border-color var(--t-fast); }
.today-row:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.today-row.done { opacity: 0.4; }
.today-row-intent { display: flex; align-items: center; }
.today-row-body { min-width: 0; cursor: pointer; }
.today-row-top { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.today-row-title { font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-row-actions { display: flex; align-items: center; gap: 6px; }
.today-row-snooze { width: 30px; height: 27px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); cursor: pointer; transition: all var(--t-fast); }
.today-row-snooze:hover { color: var(--med); border-color: var(--med); background: var(--med-soft); }
.today-clear { display: flex; align-items: center; gap: 9px; padding: 16px; font-size: 13px; color: var(--text-2); justify-content: center; }

.today-side { display: flex; flex-direction: column; gap: 14px; }
.pulse-card { padding: 16px 17px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: block; width: 100%; text-align: left; }
button.pulse-card { cursor: pointer; transition: all var(--t-fast); font-family: var(--font-sans); }
button.pulse-card:hover { border-color: var(--line-strong); }
.pulse-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 13px; }
.pulse-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-2); padding: 5px 0; }
.pulse-row b { font-weight: 600; color: var(--text); font-size: 13px; }
.comp-good-text { color: var(--high); }
.health-good { color: var(--high); font-weight: 600; font-size: 12.5px; }
.pulse-bar { height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; margin: 11px 0 8px; }
.pulse-bar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--high), color-mix(in oklab, var(--high) 60%, var(--accent))); }
.pulse-note { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.sync-card-meta { font-size: 11px; color: var(--text-3); line-height: 1.5; }

/* consolidated System + Health cards (P12-3) */
.system-card .pulse-head, .health-card .pulse-head { margin-bottom: 11px; }
.sys-pip { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.sys-pip.live { background: var(--high); box-shadow: 0 0 0 0 var(--high); animation: pulse 2.4s var(--ease) infinite; }
.sys-pip.offline { background: var(--text-3); }
.sys-pip.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.sys-howlink { font-family: var(--font-sans); color: var(--accent); cursor: pointer; margin-left: 7px; white-space: nowrap; }
.sys-howlink:hover { text-decoration: underline; }
.sys-upgrade { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.sys-upgrade:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.sys-group { display: flex; flex-direction: column; }
.sys-group .pulse-row { padding: 4px 0; }
.sys-sync { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 11px; padding: 10px 11px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font-family: var(--font-sans); transition: border-color var(--t-fast), background var(--t-fast); }
.sys-sync:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.sys-sync .sync-dot { margin-top: 4px; align-self: flex-start; }
.sys-sync-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sys-sync-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.sys-sync-meta { font-size: 11px; color: var(--text-3); line-height: 1.4; }
.sys-go { color: var(--text-faint); flex-shrink: 0; }

/* P32 — per-profile list in the system card */
.sys-profiles { margin-top: 9px; display: flex; flex-direction: column; }
.sys-prof-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12px; }
.sys-prof-row .sync-dot { flex-shrink: 0; }
.sys-prof-row .sys-prof-name { color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-prof-row .sys-prof-state { color: var(--text-faint); font-size: 10.5px; flex-shrink: 0; }
.sys-prof-add { display: flex; align-items: center; gap: 6px; margin-top: 5px; padding: 5px 2px; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--accent); }
.sys-prof-add:hover { text-decoration: underline; }
.sys-prof-add svg { flex-shrink: 0; }

.sys-usage { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.sys-usage-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 13px; }
.sys-usage-head .usage-up { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 2px 7px; border-radius: 6px; }
.sys-usage-head .usage-up:hover { background: var(--accent-soft); }
.health-card { background: linear-gradient(165deg, var(--accent-soft), transparent 62%); }
.health-tuned { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-2); line-height: 1.4; }
.health-tuned svg { color: var(--accent); flex-shrink: 0; }
.health-tuned b { color: var(--accent); font-weight: 600; font-size: 14px; }

/* ============================================================
   ONBOARDING
   ============================================================ */
.onb { display: grid; grid-template-columns: 280px 1fr; height: 100%; background: var(--bg); }
.onb-rail { background: var(--bg-deep); border-right: 1px solid var(--line); padding: 18px 18px 22px; display: flex; flex-direction: column; }
.onb-rail-steps { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; }
.onb-rail-step { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); color: var(--text-3); font-size: 13.5px; font-weight: 450; transition: color var(--t-fast); }
.onb-rail-step.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.onb-rail-step.done { color: var(--text-2); }
.onb-rail-num { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text-3); flex-shrink: 0; }
.onb-rail-step.active .onb-rail-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.onb-rail-step.done .onb-rail-num { background: var(--high-soft); border-color: color-mix(in oklab, var(--high) 35%, transparent); color: var(--high); }
.onb-rail-foot { margin-top: auto; }
.onb-rail-quote { font-size: 13px; line-height: 1.5; color: var(--text-3); font-style: italic; padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }

.onb-main { display: grid; place-items: center; overflow-y: auto; padding: 40px; }
.onb-card { width: 100%; max-width: 540px; }
.onb-step.wide ~ *, .onb-card:has(.wide) { max-width: 720px; }
.onb-card:has(.onb-step.wide) { max-width: 720px; }
.onb-step { animation: fadeUp 240ms var(--ease); }
.onb-step.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.onb-h { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 9px; text-wrap: balance; }
.onb-h.big { font-size: 28px; }
.onb-p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 0 0 26px; max-width: 480px; text-wrap: pretty; }
.onb-p.center { margin-inline: auto; }

.onb-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.onb-field label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.onb-input { font-family: var(--font-sans); font-size: 14px; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); outline: none; transition: border-color var(--t-fast); width: 100%; }
.onb-input:focus { border-color: var(--accent); }
.onb-input.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.onb-input.small { width: 200px; padding: 9px 12px; font-size: 13px; }
textarea.onb-input { resize: vertical; line-height: 1.5; }

.onb-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-faint); font-size: 12px; }
.onb-or::before, .onb-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.onb-reddit-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--t-fast); }
.onb-reddit-btn:hover { border-color: var(--text-faint); background: var(--surface-2); }
.onb-reddit-btn svg { color: #ff5414; }
.onb-fine { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 16px 0 0; }
.onb-reddit-btn.connected { border-color: color-mix(in oklab, var(--ok) 40%, transparent); background: var(--ok-soft); cursor: default; }
.onb-reddit-btn.connected svg { color: var(--ok); }
.onb-connect-perms { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.onb-connect-perm { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); }

.onb-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.onb-actions-r { display: flex; gap: 10px; }

/* auth (sign in / sign up / plan / forgot) */
.auth-rail { justify-content: flex-start; }
.auth-pitch { margin-top: 40px; }
.auth-pitch-h { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 18px; color: var(--text); }
.auth-pitch-list { display: flex; flex-direction: column; gap: 14px; list-style: none; padding: 0; margin: 0; }
.auth-pitch-list li { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.auth-pitch-list li svg { color: var(--accent); flex-shrink: 0; }
.auth-card { max-width: 420px; }
.onb-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.onb-google-btn:hover { border-color: var(--text-faint); background: var(--surface-2); }
.onb-google-btn .g-mark { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--accent); width: 18px; text-align: center; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.auth-link { color: var(--accent); font-size: 12.5px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.auth-link:hover { text-decoration: underline; }
.auth-switch { font-size: 13px; color: var(--text-3); margin: 20px 0 0; text-align: center; }
.plan-card { border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 18px; background: var(--surface); margin: 4px 0 18px; }
.plan-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.plan-card-name { font-size: 16px; font-weight: 600; }
.plan-card-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.plan-card-price { text-align: right; flex-shrink: 0; }
.plan-card-price b { font-size: 22px; letter-spacing: -0.02em; }
.plan-card-price span { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.plan-card-feats { display: flex; flex-direction: column; gap: 9px; padding: 15px 0; }
.plan-feat { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.plan-card-trial { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); padding: 11px 13px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); }

/* product context */
.onb-step.wide { width: 100%; }
.onb-ctx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.onb-ctx-progress { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.onb-ctx-progress span { font-size: 11px; color: var(--text-3); }
.onb-prefill { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 22px; }
.onb-prefill > svg { color: var(--accent); flex-shrink: 0; }
.onb-prefill-body { flex: 1; min-width: 0; }
.onb-prefill-body b { display: block; font-size: 13px; }
.onb-prefill-body span { font-size: 12px; color: var(--text-2); }
.onb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; transition: opacity var(--t-mid); }
.onb-form.loading { opacity: 0.5; pointer-events: none; }
.onb-form .onb-field { margin-bottom: 0; }
.onb-field.full { grid-column: 1 / -1; }

.onb-generate { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.onb-generate .btn { flex-shrink: 0; }
.onb-generate-note { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.onb-ctx-formhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-top: 6px; }
.onb-ctx-formhead > span:first-child { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }

.chip-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); min-height: 42px; align-items: center; }
.chip-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 4px 6px 4px 10px; border-radius: 7px; background: var(--surface-3); color: var(--text); }
.chip-tag button { border: none; background: none; color: var(--text-3); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 4px; }
.chip-tag button:hover { color: var(--risk); background: var(--risk-soft); }
.chip-input input { flex: 1; min-width: 100px; border: none; background: none; outline: none; font-family: var(--font-sans); font-size: 13px; color: var(--text); padding: 4px; }

/* targets */
.onb-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onb-sub { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; transition: all var(--t-fast); }
.onb-sub:hover { border-color: var(--line-strong); }
.onb-sub.on { border-color: var(--accent-line); background: var(--accent-soft); }
.onb-sub-check { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: #fff; flex-shrink: 0; margin-top: 1px; transition: all var(--t-fast); }
.onb-sub.on .onb-sub-check { background: var(--accent); border-color: var(--accent); }
.onb-sub-body { flex: 1; min-width: 0; }
.onb-sub-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.onb-sub-name { font-size: 14px; font-weight: 600; }
.onb-fit { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.fit-hi { color: var(--high); background: var(--high-soft); }
.fit-md { color: var(--med); background: var(--med-soft); }
.fit-lo { color: var(--text-3); background: var(--surface-3); }
.onb-sub-meta { font-size: 11.5px; color: var(--text-3); }

/* extension */
.onb-ext { padding: 30px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 18px; }
.onb-ext-viz { display: flex; align-items: center; gap: 0; }
.onb-ext-node { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); }
.onb-ext-node.browser svg { color: #ff5414; }
.onb-ext-wire { width: 90px; height: 2px; background: var(--line-strong); position: relative; overflow: hidden; border-radius: 2px; }
.onb-ext-wire span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: translateX(-100%); }
.state-pairing .onb-ext-wire span { animation: wire 1.2s linear infinite; }
.state-paired .onb-ext-wire { background: var(--high); }
.state-paired .onb-ext-node { border-color: color-mix(in oklab, var(--high) 40%, transparent); color: var(--high); }
@keyframes wire { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
.onb-ext-status { font-size: 13px; color: var(--text-3); }
.onb-ext-status .pairing { color: var(--accent); }
.onb-ext-status .paired { color: var(--high); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.onb-ext-actions { display: flex; gap: 10px; }
.onb-ext-actions .btn { flex: 1; }

/* done */
.onb-done-mark { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--high-soft); border: 1px solid color-mix(in oklab, var(--high) 35%, transparent); color: var(--high); margin-bottom: 22px; }
.onb-done-stats { display: flex; gap: 30px; margin: 26px 0; padding: 20px 30px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.onb-done-stats > div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.onb-done-stats b { font-size: 26px; font-weight: 600; }
.onb-done-stats span { font-size: 12px; color: var(--text-3); }

/* ============================================================
   RESEARCH
   ============================================================ */
.research-wrap { overflow-y: auto; height: 100%; }
.research-inner { max-width: 1080px; margin: 0 auto; padding: 32px 40px 60px; display: flex; flex-direction: column; gap: 34px; }
.research-sec { display: block; }
.research-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.research-head h3 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.research-meta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

.research-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.research-sub { padding: 18px; }
.research-sub-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.research-sub .sig-sub { font-size: 14px; }
.research-growth { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--high); }
.research-sub-members { font-size: 11.5px; color: var(--text-3); margin-bottom: 13px; }
.research-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
.research-sub-rows { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.research-sub-row { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.research-sub-row svg { color: var(--text-faint); margin-top: 1px; flex-shrink: 0; }

.research-cols { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 26px; align-items: start; }
@media (max-width: 1040px) { .research-cols { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .research-subs { grid-template-columns: 1fr; } }

.cluster-list { display: flex; flex-direction: column; gap: 8px; }
.cluster { display: flex; align-items: center; gap: 16px; padding: 14px 16px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.cluster:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.cluster-body { flex: 1; min-width: 0; }
.cluster-theme { font-size: 13.5px; font-weight: 500; color: var(--text); margin-bottom: 3px; }
.cluster-example { font-size: 12px; color: var(--text-3); font-style: italic; }
.cluster-stats { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.cluster-freq { display: flex; flex-direction: column; gap: 5px; width: 90px; }
.cluster-freq > span { font-size: 13px; font-weight: 600; }
.cluster-bar { height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.cluster-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.cluster-sent { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }

.lang-card { padding: 6px 0; margin-bottom: 14px; }
.lang-head { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 10px; padding: 8px 16px 10px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); border-bottom: 1px solid var(--line); }
.lang-head span:last-child { color: var(--accent); }
.lang-row { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 10px; align-items: center; padding: 9px 16px; font-size: 13px; }
.lang-row + .lang-row { border-top: 1px solid var(--line); }
.lang-them { color: var(--text-3); }
.lang-you { color: var(--text); font-weight: 500; }
.research-saved { padding: 14px 16px; }
.saved-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--text-2); }
.saved-row svg { color: var(--text-faint); }
.saved-row .mono { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }

/* ============================================================
   RESEARCH — explain / evidence / ask  (additions)
   ============================================================ */

/* tooltips */
.tip { position: relative; display: inline-flex; }
.tip[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); background: var(--text); color: var(--bg); font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; padding: 6px 9px; border-radius: 7px; white-space: normal; width: max-content; max-width: 210px; text-align: center; box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease), transform 120ms var(--ease); z-index: 90; }
.tip[data-tip]::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text); opacity: 0; transition: opacity 120ms var(--ease); z-index: 90; }
.tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.tip:hover::before { opacity: 1; }
.cluster-bar-tip { display: block; }
.lang-row-tip { display: block; }

/* ask your research */
.ask-sec { margin-bottom: 4px; }
.ask-bar { display: flex; align-items: center; gap: 11px; padding: 7px 7px 7px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.ask-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ask-bar > svg { color: var(--accent); flex-shrink: 0; }
.ask-bar input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--font-sans); font-size: 14px; color: var(--text); }
.ask-bar input::placeholder { color: var(--text-3); }
.ask-suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-suggest-l { font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
.ask-chip { font-family: var(--font-sans); font-size: 12px; color: var(--text-2); padding: 6px 11px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: all var(--t-fast); }
.ask-chip:hover { border-color: var(--accent-line); color: var(--text); background: var(--accent-soft); }
.ask-answer { margin-top: 14px; padding: 16px 18px; }
.ask-answer.thinking { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); }
.ask-q { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.ask-q svg { color: var(--accent); flex-shrink: 0; }
.ask-a { font-size: 13.5px; line-height: 1.65; color: var(--text-2); margin: 0 0 16px; text-wrap: pretty; }
.ask-cites { padding-top: 14px; border-top: 1px solid var(--line); }
.ask-cites-l { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.ask-cite-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ask-cite { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; color: var(--accent); padding: 6px 11px; border-radius: 20px; border: 1px solid var(--accent-line); background: var(--accent-soft); cursor: pointer; transition: all var(--t-fast); }
.ask-cite svg { flex-shrink: 0; }
.ask-cite:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.ask-cite-t { color: var(--text-2); font-weight: 400; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* subhead + clickable cards */
.research-subhead { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: -6px 0 14px; max-width: 560px; text-wrap: pretty; }
button.research-sub { font-family: var(--font-sans); text-align: left; cursor: pointer; display: flex; flex-direction: column; transition: border-color var(--t-fast), transform var(--t-fast); }
button.research-sub:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.research-sub-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--accent); margin-top: 13px; opacity: 0; transition: opacity var(--t-fast); }
button.research-sub:hover .research-sub-cta { opacity: 1; }
.cluster-trend { display: inline-flex; align-items: center; gap: 5px; }
.cluster-pct { font-size: 11px; font-weight: 600; }

/* collections */
button.saved-row { width: 100%; font-family: var(--font-sans); background: none; border: none; cursor: pointer; text-align: left; transition: color var(--t-fast); }
button.saved-row:hover { color: var(--text); }
button.saved-row:hover > svg:first-child { color: var(--accent); }
button.saved-row > span:not(.mono) { flex: 1; }
.saved-new-btn { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 5px; }
.saved-new-btn:hover { background: var(--accent-soft); }
.saved-new { display: flex; gap: 6px; margin-top: 8px; }
.saved-new input { flex: 1; min-width: 0; border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-sm); padding: 7px 10px; font-family: var(--font-sans); font-size: 12.5px; color: var(--text); outline: none; }
.saved-new input:focus { border-color: var(--accent); }

/* evidence drawer */
.ev-scrim { position: fixed; inset: 0; z-index: 190; background: color-mix(in oklab, var(--bg-deep) 45%, transparent); backdrop-filter: blur(2px); animation: fadeUp 140ms var(--ease); }
.ev-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(490px, 94vw); z-index: 200; background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: -28px 0 70px -22px rgba(0,0,0,0.4); display: flex; flex-direction: column; animation: evIn 220ms var(--ease); }
@keyframes evIn { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.ev-bar { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ev-bar-titles { flex: 1; min-width: 0; }
.ev-bar-kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); display: block; margin-bottom: 4px; }
.ev-bar-titles h3 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.01em; line-height: 1.3; text-wrap: pretty; }
.ev-scroll { overflow-y: auto; flex: 1; min-height: 0; padding: 18px; }
.ev-stat-row { display: flex; gap: 26px; padding: 2px 2px 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ev-stat { display: flex; flex-direction: column; gap: 4px; }
.ev-stat-n { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.ev-stat-l { font-size: 11px; color: var(--text-3); }
.ev-lead { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 4px; text-wrap: pretty; }
.ev-section-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin: 18px 0 10px; }
.ev-rows { display: flex; flex-direction: column; gap: 8px; }
.ev-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.ev-row:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.ev-row-body { flex: 1; min-width: 0; }
.ev-row-top { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); margin-bottom: 5px; }
.ev-row-top .sig-sub { font-size: 11.5px; }
.ev-row-top .mono { display: inline-flex; align-items: center; gap: 3px; }
.ev-dot { color: var(--text-faint); }
.ev-open { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 600; opacity: 0; transition: opacity var(--t-fast); }
.ev-row:hover .ev-open { opacity: 1; }
.ev-row-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ev-rules { display: flex; flex-direction: column; gap: 8px; }
.ev-rules .comp-rule { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); }
.ev-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ev-meta-cell { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.ev-meta-l { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); margin-bottom: 5px; }
.ev-meta-l svg { color: var(--text-faint); flex-shrink: 0; }
.ev-meta-v { font-size: 12.5px; font-weight: 500; color: var(--text); }
.ev-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-empty { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--text-3); border: 1px dashed var(--line-strong); border-radius: var(--r-md); line-height: 1.55; }

/* ============================================================
   SIGNAL — secondary screens: Mentions, AI Visibility,
   Analytics, Settings, Extension popup
   ============================================================ */

.pad-wrap { overflow-y: auto; height: 100%; }
.pad-inner { max-width: 1080px; margin: 0 auto; padding: 30px 40px 60px; display: flex; flex-direction: column; gap: 22px; }
.m-cols { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 1040px) { .m-cols { grid-template-columns: 1fr; } }
.num { text-align: right; }

/* ---------- Mentions ---------- */
.m-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 760px) { .m-top { grid-template-columns: 1fr; } }
.m-sov, .m-sent { padding: 18px 20px; }
.sov-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; margin: 6px 0 16px; }
.sov-seg { border-radius: 3px; transition: width var(--t-mid) var(--ease); }
.sov-you { background: var(--accent); } .sov-a { background: var(--med); } .sov-b { background: var(--low); } .sov-c { background: var(--min); }
.sov-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.sov-leg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.sov-leg b { color: var(--text); margin-left: 2px; }
.sov-dot { width: 9px; height: 9px; border-radius: 3px; }
.m-sent-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 11.5px; color: var(--text-3); }
.m-sent-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot-ok, .dot-risk { width: 8px; height: 8px; border-radius: 50%; }
.dot-ok { background: var(--sent-pos); } .dot-risk { background: var(--sent-neg); }

.m-day { margin-bottom: 16px; }
.m-day-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin: 0 0 8px 2px; }
.m-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; margin-bottom: 7px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.m-item:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.m-sent-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.sent-dot-pos { background: var(--sent-pos); } .sent-dot-neg { background: var(--sent-neg); } .sent-dot-neu { background: var(--sent-neu); }
.m-item-body { flex: 1; min-width: 0; }
.m-item-top { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.m-tag { font-size: 10px; font-weight: 600; padding: 1.5px 6px; border-radius: 5px; white-space: nowrap; }
.m-tag.you { color: var(--accent); background: var(--accent-soft); }
.m-tag.comp { color: var(--med); background: var(--med-soft); }
.m-item-text { font-size: 13px; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.m-item-up { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-faint); align-self: center; }
.m-filter { width: auto; }
.m-filter button { flex: 0 0 auto; padding: 0 11px; }
.m-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--text-3); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.m-lead { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: -4px 0 14px; max-width: 560px; text-wrap: pretty; }

/* clickable mention cards */
.m-item-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--accent); margin-top: 7px; opacity: 0; transition: opacity var(--t-fast); }
.m-item:hover .m-item-cta { opacity: 1; }
.m-status { font-size: 10px; font-weight: 600; padding: 1.5px 7px; border-radius: 5px; white-space: nowrap; }
.m-status.replied { color: var(--high); background: var(--high-soft); }
.m-status.snoozed { color: var(--med); background: var(--med-soft); }
.m-status.ignored { color: var(--text-3); background: var(--surface-3); }

/* alert rules — overflow-safe rows (P4-5) */
.m-rules { box-sizing: border-box; overflow: hidden; padding: 16px 18px; }
.m-rules-head { margin-bottom: 12px; }
.m-rule-add { flex-shrink: 0; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); cursor: pointer; transition: all var(--t-fast); }
.m-rule-add:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.m-rules .m-rule { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.m-rules .m-rule:first-of-type { border-top: none; }
.m-rule-body { flex: 1 1 auto; min-width: 0; }
.m-rule-name { font-size: 12.5px; font-weight: 500; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-rule-scope { font-size: 10.5px; color: var(--text-3); white-space: normal; overflow-wrap: anywhere; }
.m-rule-hits { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; font-weight: 600; }
.m-rule-hits:hover { text-decoration: underline; }
.m-rule-channels { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.m-chan { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 7px; border-radius: 11px; max-width: 100%; }
.m-chan-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.m-rules .switch { flex-shrink: 0; }

/* detail panel as a fixed drawer (Mentions reuse of Signals detail) */
.detail-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 94vw); z-index: 200; box-shadow: -28px 0 70px -22px rgba(0,0,0,0.4); }
.detail-drawer .detail-panel { height: 100%; }

/* new alert-rule modal */
.nr-modal { width: 540px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); overflow: hidden; animation: cmdPop 160ms var(--ease); }
.nr-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.nr-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.nr-field { display: flex; flex-direction: column; gap: 7px; }
.nr-field > label { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; }
.nr-intent-val { color: var(--accent); }
.nr-hint { font-size: 11.5px; color: var(--text-3); }
.nr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.nr-chans { display: flex; flex-wrap: wrap; gap: 8px; }
.nr-chan-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 7px 12px; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; transition: all var(--t-fast); }
.nr-chan-btn.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.nr-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--accent) var(--pct), var(--surface-3) var(--pct)); outline: none; }
.nr-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--accent); cursor: pointer; box-shadow: var(--shadow-pop); }
.nr-slider::-moz-range-thumb { width: 17px; height: 17px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--accent); cursor: pointer; }
.nr-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-deep); }

/* ---------- AI Visibility ---------- */
.ai-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .ai-summary { grid-template-columns: 1fr; } }
.ai-stat { padding: 18px 20px; }
.ai-stat-n { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.ai-stat-d { font-size: 18px; color: var(--text-faint); font-weight: 500; }
.ai-stat-label { font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.ai-stat-label b { color: var(--text); font-weight: 600; }
.ai-stat-trend { font-size: 11.5px; color: var(--high); display: inline-flex; align-items: center; gap: 5px; }
.ai-stat-sub { font-size: 11px; color: var(--text-3); }

.ai-matrix-card { padding: 18px 20px; }
.ai-volatility-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); margin: 10px 0 4px; line-height: 1.4; }
.ai-volatility-note svg { color: var(--med); flex-shrink: 0; }
.ai-qcol .ai-q { display: block; }
.ai-vol { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.ai-vol-swingy { color: var(--med); }
.ai-vol-stable { color: var(--text-faint); }
.ai-legend { display: flex; gap: 14px; }
.ai-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.ai-leg { width: 11px; height: 11px; border-radius: 4px; }
.ai-leg.you { background: var(--high); } .ai-leg.comp { background: var(--med); } .ai-leg.none { background: var(--surface-3); border: 1px solid var(--line-strong); }
.ai-matrix-scroll { overflow-x: auto; margin-top: 14px; }
.ai-matrix { width: 100%; border-collapse: collapse; }
.ai-matrix th { font-size: 11px; font-weight: 600; color: var(--text-3); text-align: center; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ai-matrix th.ai-qcol { text-align: left; }
.ai-matrix td.ai-qcol { text-align: left; }
.ai-qcol { min-width: 220px; }
.ai-q { font-size: 12.5px; color: var(--text); }
.ai-matrix td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.ai-matrix tr:last-child td { border-bottom: none; }
.ai-cell .ai-pip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--high-soft); color: var(--high); }
.ai-cell.comp .ai-comp-name { font-size: 11px; font-weight: 500; color: var(--med); background: var(--med-soft); padding: 3px 8px; border-radius: 6px; }
.ai-cell .ai-dash { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: var(--line-strong); }

.ai-threads { padding: 18px 20px; }
.ai-threads .ai-thread { display: block; padding: 11px 0; border-top: 1px solid var(--line); }
.ai-threads .ai-thread:first-of-type { border-top: none; }
.ai-thread-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ai-dot { color: var(--text-faint); }
.ai-thread-cites { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ai-gap { padding: 18px 20px; }
.ai-gap-note { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 0 0 14px; }
.ai-gap-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text); padding: 8px 0; border-top: 1px solid var(--line); }
.ai-gap-row span { flex: 1; min-width: 0; }
.ai-gap-row svg { color: var(--med); flex-shrink: 0; }
.ai-gap-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--text-3); margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); line-height: 1.4; }
.ai-gap-foot svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* ---------- Analytics ---------- */
.an-funnel { padding: 20px 22px; }
.funnel { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 6px; }
.funnel-stage { display: block; }
.funnel-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.funnel-stage-name { font-size: 13px; font-weight: 600; }
.funnel-conv { font-size: 11px; color: var(--text-3); }
.funnel-bar-track { background: var(--surface-3); border-radius: var(--r-sm); overflow: hidden; }
.funnel-bar { height: 38px; border-radius: var(--r-sm); display: flex; align-items: center; padding: 0 14px; transition: width var(--t-mid) var(--ease); min-width: 60px; }
.funnel-bar.tone-min { background: #d8d4ca; }
.funnel-bar.tone-low { background: #a9c0e8; }
.funnel-bar.tone-med { background: #e3cd92; }
.funnel-bar.tone-high { background: #9fd8bd; }
.funnel-n { font-size: 15px; font-weight: 600; color: var(--text); }
.funnel-note { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
.an-honest { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-3); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.an-honest svg { color: var(--accent); }

.an-breakdown { padding: 18px 20px; }
.an-bd-row { margin-bottom: 14px; }
.an-bd-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: 12.5px; }
.an-bd-val { font-size: 11px; color: var(--text-3); } .an-bd-val b { color: var(--high); }
.an-bd-track { position: relative; height: 8px; background: var(--surface-3); border-radius: 8px; }
.an-bd-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 8px; background: #a9b4e0; }
.an-bd-bar.win { background: var(--high); }
.an-bd-legend { display: flex; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-3); }
.an-bd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-bd-key { width: 10px; height: 10px; border-radius: 3px; background: #a9b4e0; }
.an-bd-key.win { background: var(--high); }

/* ---------- Settings ---------- */
.set-inner { max-width: 940px; margin: 0 auto; padding: 30px 40px 60px; display: grid; grid-template-columns: 180px 1fr; gap: 30px; align-items: start; }
@media (max-width: 820px) { .set-inner { grid-template-columns: 1fr; } .set-nav { display: none; } }
.set-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 1px; }
.set-nav-item { font-size: 13px; color: var(--text-3); padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; transition: color var(--t-fast); }
.set-nav-item:hover { color: var(--text); }
.set-nav-item.active { color: var(--text); font-weight: 500; background: var(--surface-2); }
.set-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-sec { padding: 20px 22px; }
.set-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.set-sec-head h3 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }

.set-device { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.set-device:first-of-type { border-top: none; }
.set-device-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); }
.set-device-body { flex: 1; }
.set-device-name { font-size: 13px; font-weight: 500; }
.set-current { font-size: 10px; font-weight: 600; color: var(--high); background: var(--high-soft); padding: 1px 6px; border-radius: 5px; margin-left: 6px; }
.set-device-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.set-device-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.set-device-dot.live { background: var(--high); }
.set-device-dot.warn { background: var(--warn); }
.set-device-dot.offline { background: var(--text-faint); }

/* P32 — capture profile throughput + per-profile session */
.cp-throughput { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 9px 11px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.cp-throughput .sync-dot { flex-shrink: 0; }
.cp-throughput b { color: var(--text); }
.cp-needs { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--warn); }
.cp-needs svg { flex-shrink: 0; }
.cp-needs button { background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; font-family: var(--font-sans); font-size: 11px; cursor: pointer; }
.cp-needs button:hover { text-decoration: underline; }
.cp-add-hint { display: block; margin-top: 9px; font-size: 11px; color: var(--text-3); }

.set-device.just-paired { background: var(--high-soft); border-radius: var(--r-md); margin: 0 -10px; padding: 11px 10px; border-top-color: transparent; }
.set-current.paired { color: var(--accent); background: var(--accent-soft); }

/* ---------- P26 — pair / revoke device modals ---------- */
.pair-modal {
  width: 520px; max-width: 94vw; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-pop); overflow: hidden;
  animation: cmdPop 160ms var(--ease);
}
.pair-modal.sm { width: 460px; }
.pair-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.pair-modal-titles { flex: 1; }
.pair-modal-kicker { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.pair-modal-titles h3 { font-size: 17px; font-weight: 600; margin: 3px 0 0; letter-spacing: -0.01em; }
.pair-modal-body { padding: 18px 20px; overflow-y: auto; }
.pair-modal-lead { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 18px; text-wrap: pretty; }
.pair-modal-lead b { color: var(--text); font-weight: 600; }
.pair-modal-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.pair-modal-foot .btn { flex-shrink: 0; }

/* error block */
.pair-err { margin-top: 18px; padding: 14px 15px; border-radius: var(--r-md); border: 1px solid color-mix(in oklab, var(--risk) 22%, transparent); background: var(--risk-soft); }
.pair-err-top { display: flex; align-items: center; gap: 9px; color: var(--risk); font-size: 13.5px; }
.pair-err-top b { font-weight: 600; }
.pair-err-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 7px 0 0; text-wrap: pretty; }
.pair-err-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-3); line-height: 1.5; margin-top: 12px; padding-top: 11px; border-top: 1px solid color-mix(in oklab, var(--risk) 16%, transparent); text-wrap: pretty; }
.pair-err-hint svg { color: var(--text-faint); margin-top: 1px; flex-shrink: 0; }

/* error viz wire */
.onb-ext-viz.state-error .onb-ext-wire { background: var(--risk); }
.onb-ext-viz.state-error .onb-ext-wire span { display: none; }
.onb-ext-viz.state-error .onb-ext-node.browser { border-color: color-mix(in oklab, var(--risk) 40%, transparent); border-style: dashed; }

/* demo picker */
.pair-modal-demo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 11px 20px 14px; border-top: 1px dashed var(--line); background: var(--bg-deep); }
.pair-modal-demo > span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-right: 4px; }
.pair-modal-demo button { font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.pair-modal-demo button:hover { border-color: var(--line-strong); color: var(--text); }
.pair-modal-demo button.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* revoke columns */
.revoke-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.revoke-col { padding: 13px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.revoke-col-h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 9px; white-space: nowrap; }
.revoke-col.stop .revoke-col-h { color: var(--risk); }
.revoke-col.keep .revoke-col-h { color: var(--high); }
.revoke-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.revoke-col li { font-size: 12px; color: var(--text-2); line-height: 1.4; padding-left: 13px; position: relative; }
.revoke-col li::before { content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }

.set-license { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.set-plan { display: flex; align-items: baseline; gap: 12px; }
.set-plan-name { font-size: 18px; font-weight: 600; }
.set-plan-price { font-size: 13px; color: var(--text-3); }
.set-seats { display: flex; align-items: center; gap: 11px; }
.set-seats-bar { width: 120px; height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.set-seats-bar span { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.set-seats .mono { font-size: 11.5px; color: var(--text-3); }

.set-retention { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.set-label { font-size: 13px; color: var(--text-2); }
.set-data-actions { display: flex; gap: 10px; }

.set-rules { display: flex; flex-wrap: wrap; gap: 8px; }
.set-rule-chip { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 8px 11px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); width: calc(50% - 4px); cursor: pointer; transition: border-color var(--t-fast); }
.set-rule-chip:hover { border-color: var(--line-strong); }
@media (max-width: 560px) { .set-rule-chip { width: 100%; } }

.set-notif { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.set-notif:first-of-type { border-top: none; }

.set-sec.whatwe { background: color-mix(in oklab, var(--surface-2) 50%, var(--surface)); }
.set-pc-lead { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 16px; }
.set-pc-prefill { margin-bottom: 18px; flex-wrap: wrap; }
.set-pc-prefill .onb-prefill-body { min-width: 200px; }
.set-pc-prefill .onb-input.small { width: auto; flex: 1; min-width: 160px; }
.set-pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.set-pc-updated { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.set-pc-updated svg { color: var(--text-faint); }
.whatwe-intro { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 16px; }
.whatwe-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 560px) { .whatwe-list { grid-template-columns: 1fr; } }
.whatwe-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.whatwe-item svg { color: var(--risk); flex-shrink: 0; }
.whatwe-scope { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 13px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); line-height: 1.5; text-wrap: pretty; }
.whatwe-scope svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* ---------- P31 Posting identities ---------- */
.set-id-empty { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); padding: 14px; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 12px; line-height: 1.45; }
.set-id-empty svg { color: var(--text-faint); flex-shrink: 0; }
.set-identity { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: 10px; }
.set-identity-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-identity-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.set-id-remove { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-3); background: none; border: none; cursor: pointer; font-family: var(--font-sans); padding: 4px 7px; border-radius: var(--r-sm); }
.set-id-remove:hover { color: var(--risk); background: var(--surface-2); }
.set-identity-health { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); margin-top: 8px; }
.set-identity-health b { color: var(--text); }
.set-id-dot { color: var(--text-faint); }
.set-identity-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.set-standing-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); }
.set-standing-chip b { font-family: var(--font-mono); }
.set-standing-chip.s-good { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 30%, var(--line)); }
.set-standing-chip.s-thin { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 30%, var(--line)); }
.set-standing-chip.s-low { color: var(--risk); border-color: color-mix(in oklab, var(--risk) 30%, var(--line)); }
.set-identity-foot { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--text-3); margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); line-height: 1.45; }
.set-identity-foot svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.set-id-add { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.set-id-prefix { font-size: 13px; color: var(--text-3); }
.set-id-add input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13px; font-family: var(--font-mono); color: var(--text); }
.set-id-add input::placeholder { font-family: var(--font-sans); color: var(--text-faint); }

/* ---------- Context page + knowledge sources ---------- */
.ctx-inner { max-width: 820px; margin: 0 auto; padding: 30px 40px 60px; display: flex; flex-direction: column; gap: 16px; }
.ctx-intro { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; }
.ctx-intro > svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.ctx-intro b { font-weight: 600; }
.ctx-intro > div > b { display: block; font-size: 14px; margin-bottom: 3px; }
.ctx-intro span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }

.ks { display: flex; flex-direction: column; gap: 14px; }
.ks-inputs { display: flex; flex-direction: column; gap: 10px; }
.ks-link-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); transition: border-color var(--t-fast); }
.ks-link-row:focus-within { border-color: var(--accent); }
.ks-link-row > svg { color: var(--text-3); flex-shrink: 0; }
.ks-link-row input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--font-sans); font-size: 13.5px; color: var(--text); padding: 9px 0; }
.ks-drop { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: all var(--t-fast); }
.ks-drop:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.ks-drop svg { color: var(--text-3); }
.ks-drop b { font-weight: 600; }

.ks-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .ks-list { grid-template-columns: 1fr; } }
.ks-card { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-fast); }
.ks-card.reading { border-style: dashed; }
.ks-card-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); }
.ks-favicon { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); }
.ks-card-body { flex: 1; min-width: 0; }
.ks-card-label { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-card-meta { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.ks-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ks-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.ks-status.read { color: var(--high); background: var(--high-soft); }
.ks-status.reading { color: var(--text-3); background: var(--surface-3); }
.ks-spin { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); border-top-color: var(--accent); animation: ksspin 0.7s linear infinite; }
@keyframes ksspin { to { transform: rotate(360deg); } }
.ks-remove { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: none; background: none; color: var(--text-faint); cursor: pointer; transition: all var(--t-fast); }
.ks-remove:hover { color: var(--risk); background: var(--risk-soft); }

/* ---------- Extension popup ---------- */
.ext-stage { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background:
  radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--accent) 10%, var(--bg)), var(--bg) 60%); padding: 30px; }
.ext-stage-top { display: flex; align-items: center; gap: 14px; }
.ext-back { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 6px 10px; border-radius: var(--r-sm); font-family: var(--font-sans); }
.ext-back:hover { color: var(--text); background: var(--surface-hover); }
.ext-demo-seg { width: 220px; }
.ext-popup { width: 340px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; }
.ext-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.ext-brand { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.ext-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.ext-status.muted { color: var(--text-3); }
.ext-page { padding: 15px; border-bottom: 1px solid var(--line); }
.ext-page-label, .ext-section-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 9px; }
.ext-thread { padding: 11px 13px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 11px; }
.ext-thread-title { font-size: 13px; font-weight: 500; line-height: 1.4; margin-top: 5px; text-wrap: pretty; }
.ext-capture { width: 100%; height: 40px; border-radius: var(--r-md); border: none; background: var(--accent); color: var(--accent-text); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--t-fast); }
.ext-capture:hover { background: var(--accent-2); }
.ext-targets { padding: 15px; }
.ext-section-label { display: flex; align-items: center; gap: 6px; }
.ext-section-label .mono { color: var(--text-3); }
.ext-target { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 12.5px; }
.ext-target-n { font-size: 11px; color: var(--text-faint); }
.ext-target-n.hot { color: var(--accent); font-weight: 600; }
.ext-foot { padding: 12px 15px; border-top: 1px solid var(--line); background: var(--bg-deep); }
.ext-sync { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
.ext-foot-actions { display: flex; gap: 8px; }
.ext-foot-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-family: var(--font-sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--t-fast); }
.ext-foot-btn:hover { color: var(--text); border-color: var(--text-faint); }
.ext-foot-btn.primary { background: var(--surface-2); color: var(--text); }
.ext-auth { padding: 26px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ext-auth-icon { width: 48px; height: 48px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; }
.ext-auth-title { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.ext-auth-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-bottom: 18px; }
.ext-auth .onb-input { width: 100%; margin-bottom: 11px; }
.ext-auth .small-pad { padding: 10px 12px; font-size: 13px; text-align: center; }
.ext-caption { font-size: 11.5px; color: var(--text-faint); }


/* ============================================================
   P15 — onboarding rework: one-URL context, live first capture,
   Today first-run progress, Signals first-visit spotlight
   ============================================================ */

.onb-rail-step span { white-space: nowrap; }
.onb-ext-status span { white-space: nowrap; }

/* step 1 — what you sell */
.onb-urlrow { display: flex; gap: 10px; align-items: stretch; }
.onb-urlrow .onb-input { flex: 1; }
.onb-modeflip { border: none; background: none; padding: 0; margin-top: 12px; font-family: var(--font-sans); font-size: 12.5px; color: var(--accent); cursor: pointer; }
.onb-modeflip:hover { text-decoration: underline; }
.onb-analyzing { display: flex; gap: 13px; align-items: center; padding: 18px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); animation: fadeUp 240ms var(--ease); }
.onb-analyzing-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.onb-analyzing-txt b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-analyzing-txt span { font-size: 12.5px; color: var(--text-3); animation: fadeUp 220ms var(--ease); }
.onb-spin { animation: onbspin 0.9s linear infinite; }
@keyframes onbspin { to { transform: rotate(360deg); } }

.onb-confirm { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; animation: fadeUp 240ms var(--ease); }
.onb-confirm-sec { padding: 14px 16px; }
.onb-confirm-sec + .onb-confirm-sec { border-top: 1px solid var(--line); }
.onb-confirm-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 7px; white-space: nowrap; }
.onb-confirm-label svg { color: var(--accent); }
.onb-confirm-src { margin-left: auto; font-family: var(--font-mono); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.onb-confirm-sum { font-size: 13.5px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.onb-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.onb-chiprow .chip-tag { white-space: nowrap; }
.onb-chiprow .chip-tag svg:first-child { color: var(--text-3); }
.onb-chiprow .chip-tag.kw { background: var(--accent-soft); color: var(--accent); }
.onb-chiprow .chip-tag.kw svg:first-child { color: var(--accent); }

/* step 2 — session detected */
.onb-session { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: var(--r-md); background: var(--high-soft); border: 1px solid color-mix(in oklab, var(--high) 26%, transparent); animation: fadeUp 240ms var(--ease); }
.onb-session-check { width: 20px; height: 20px; border-radius: 50%; background: var(--high); color: #fff; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.onb-session-txt { display: flex; flex-direction: column; gap: 2px; }
.onb-session-txt b { font-size: 13px; font-weight: 600; }
.onb-session-txt span { font-size: 12px; color: var(--text-3); }

/* step 3 — live first capture */
.onb-cap { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.onb-cap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.onb-cap-stat { background: var(--surface); padding: 12px 14px; }
.onb-cap-stat b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; display: block; white-space: nowrap; }
.onb-cap-stat span { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-top: 6px; }
.onb-cap-bar { height: 5px; background: var(--surface-3); overflow: hidden; }
.onb-cap-fill { height: 100%; background: var(--accent); transition: width 420ms var(--ease); }
.onb-led { height: 168px; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.onb-led-line { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); padding: 4px 0; animation: fadeUp 240ms var(--ease) both; }
.onb-led-line svg { color: var(--text-3); flex-shrink: 0; }
.onb-led-line.muted { color: var(--text-3); }
.onb-led-line.hi { color: var(--text); font-weight: 500; }
.onb-led-line.hi svg { color: var(--accent); }
.onb-led-cursor { display: inline-block; width: 7px; height: 13px; background: var(--accent); border-radius: 1px; animation: onbblink 1s steps(2) infinite; }
@keyframes onbblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .onb-led-cursor { animation: none; } }
.onb-cap-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg-deep); font-size: 11.5px; color: var(--text-3); }
.onb-cap-foot svg { color: var(--text-faint); }
.onb-escape { display: flex; justify-content: center; margin-top: 16px; animation: fadeUp 300ms var(--ease); }

/* step 3 — the reveal */
.onb-reveal-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--high); margin-bottom: 12px; white-space: nowrap; }
.onb-reveal-kicker.neutral { color: var(--text-3); }
.onb-reveal-kicker.neutral svg { color: var(--text-faint); }

/* P23-1 — zero-signal reveal */
.onb-zero-card { display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); margin-bottom: 14px; }
.onb-zero-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 10px; }
.onb-zero-label svg { color: var(--text-3); }
.onb-zero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.onb-zero-stat { display: flex; flex-direction: column; gap: 3px; }
.onb-zero-stat b { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.onb-zero-stat span { font-size: 12px; color: var(--text-3); }
.onb-zero-broaden { padding: 15px 17px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--accent-soft); margin-bottom: 6px; }
.onb-zero-broaden .onb-zero-label { color: var(--accent); }
.onb-zero-broaden .onb-zero-label svg { color: var(--accent); }
.chip-tag.add { background: var(--surface-2); border: 1px dashed var(--accent-line); color: var(--accent); }
.chip-tag.add svg { color: var(--accent); }
.onb-digest { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 20px; padding: 7px 14px; cursor: pointer; transition: all var(--t-fast); }
.onb-digest:hover { border-color: var(--text-faint); color: var(--text); }
.onb-digest.on { color: var(--high); border-color: color-mix(in oklab, var(--high) 35%, transparent); background: var(--high-soft); }
.onb-digest.on svg { color: var(--high); }

/* P23-1 — presentation-only reveal-state picker */
.onb-statepick { display: inline-flex; align-items: center; gap: 4px; margin: 22px auto 0; padding: 4px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-3); }
.onb-statepick-l { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: 0 8px 0 6px; }
.onb-statepick button { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text-3); background: none; border: none; border-radius: 16px; padding: 5px 12px; cursor: pointer; transition: all var(--t-fast); }
.onb-statepick button:hover { color: var(--text-2); }
.onb-statepick button.on { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 2px rgba(33,30,24,0.1); }
.onb-step.wide .onb-statepick { display: flex; width: fit-content; }
.onb-sigcard { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); padding: 15px 17px; display: flex; flex-direction: column; gap: 12px; animation: fadeUp 280ms var(--ease) both; }
.onb-sigcard + .onb-sigcard { margin-top: 8px; }
.onb-sigcard.hero { box-shadow: var(--shadow-panel); border-color: color-mix(in oklab, var(--accent) 28%, var(--line-strong)); }
.onb-sigcard.mini { flex-direction: row; align-items: center; gap: 13px; padding: 11px 15px; }
.onb-sigcard.mini:nth-of-type(2) { animation-delay: 90ms; }
.onb-sigcard.mini:nth-of-type(3) { animation-delay: 180ms; }
.onb-sig-top { display: flex; gap: 14px; align-items: flex-start; }
.onb-sig-head { min-width: 0; flex: 1; }
.onb-sig-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); margin-bottom: 4px; }
.onb-sig-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; text-wrap: pretty; }
.onb-sig-title.sm { font-size: 13.5px; font-weight: 500; }
.onb-sig-why { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.onb-sig-why svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.onb-sig-draft { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-deep); padding: 11px 13px 0; }
.onb-sig-draft-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 8px; white-space: nowrap; }
.onb-sig-draft-body { font-size: 12.5px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; max-height: 108px; overflow: hidden; }
.onb-sig-draft::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 44px; border-radius: 0 0 var(--r-md) var(--r-md); background: linear-gradient(transparent, var(--bg-deep)); pointer-events: none; }

/* Today — first-run live capture line (P15-4) */
.today-capline { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); padding: 10px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); margin-bottom: 16px; animation: fadeUp 240ms var(--ease); }
.today-capline .mono { font-variant-numeric: tabular-nums; }
.today-capline-pct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.capline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: caplinepulse 2.2s var(--ease) infinite; }
@keyframes caplinepulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .capline-dot { animation: none; } }
.today-scoring { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-3); padding: 18px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }

/* Signals — first-run live counts */
.empty-capline { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Signals — first-visit spotlight (P15-5) */
.spot-wrap { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.spot-dim { position: absolute; background: rgba(33, 30, 24, 0.42); animation: spotin 380ms var(--ease) both; }
@keyframes spotin { from { opacity: 0; } to { opacity: 1; } }
.spot-ring { position: absolute; border-radius: 13px; border: 1.5px solid color-mix(in oklab, var(--accent) 55%, transparent); animation: spotin 380ms var(--ease) both; }
.spot-line { position: absolute; max-width: 380px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 11px 14px; font-size: 13px; line-height: 1.5; color: var(--text-2); animation: fadeUp 320ms var(--ease) 150ms both; }
.spot-line b { color: var(--text); }
.spot-hint { display: block; margin-top: 5px; font-size: 11px; color: var(--text-faint); }


/* ============================================================
   RESTORED — second half of screens2.css (campaigns, team, notes,
   activity, notifications, digest, author panel, voice, discover,
   AEO detail, mention spike/archive, integrations). This was lost in
   a truncated read/rewrite; restored verbatim from the last good build.
   ============================================================ */
/* ============================================================
   SIGNAL — extensions for P9 / P10 / P11 feedback.
   Follows the established paper/graphite tokens.
   ============================================================ */

/* ---------- P9-1 Campaigns ---------- */
.camp-card { padding: 20px 22px; }
.camp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; padding: 34px 30px 30px; }
.camp-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); }
.camp-empty-title { font-size: 14px; font-weight: 600; color: var(--text); }
.camp-empty-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.55; max-width: 380px; }
.camp-rows { display: flex; flex-direction: column; gap: 8px; }
.camp-row { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; font-family: var(--font-sans); transition: border-color var(--t-fast), transform var(--t-fast); }
.camp-row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.camp-row-main { flex: 1; min-width: 0; }
.camp-row-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.camp-row-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.camp-pill { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 20px; }
.camp-pill.active { background: var(--high-soft); color: var(--high); }
.camp-pill.paused { background: var(--min-soft); color: var(--text-3); }
.camp-row-targets { display: flex; flex-wrap: wrap; gap: 5px; }
.camp-target-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; }
.camp-target-chip.sm { font-size: 10.5px; padding: 2px 7px; }
.camp-target-chip.rule { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.camp-target-chip svg { opacity: 0.7; }
.camp-target-more { font-size: 11px; color: var(--text-faint); align-self: center; }
.camp-row-funnel { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.camp-mini { font-size: 11.5px; color: var(--text-3); }
.camp-mini b { color: var(--text); font-size: 13px; margin-right: 3px; }
.camp-mini.won b { color: var(--high); }
.camp-mini-arr { color: var(--text-faint); }
.camp-row-go { color: var(--text-faint); transition: transform var(--t-fast), color var(--t-fast); }
.camp-row:hover .camp-row-go { color: var(--accent); transform: translateX(2px); }

.camp-rep-head { margin-bottom: 14px; }
.camp-rep-title { font-size: 19px; font-weight: 600; margin: 8px 0 0; letter-spacing: -0.015em; }
.camp-rep-goal { font-size: 13px; color: var(--text-2); margin: 5px 0 0; line-height: 1.5; max-width: 560px; text-wrap: pretty; }
.camp-rep-targets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.camp-targets-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-right: 4px; white-space: nowrap; }
.camp-status-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; font-family: var(--font-sans); padding: 5px 11px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.camp-status-toggle:hover { border-color: var(--accent-line); color: var(--accent); }

.camp-kw-row { display: flex; gap: 6px; }
.camp-select { font-family: var(--font-sans); cursor: pointer; }

/* campaign picker (detail panel) */
.dp-camp-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-left: auto; }
.dp-camp-status.paused { color: var(--text-3); }
.dp-camp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); margin-left: 8px; min-width: 0; max-width: 160px; }
.dp-camp-chip svg { flex-shrink: 0; }
.dp-camp-chip, .dp-assign-cur { overflow: hidden; }
.dp-camp-chip > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* paused campaign chip in the rail */
.rail-chip.paused { opacity: 0.7; }
.rail-chip.paused svg { opacity: 0.8; }

/* ---------- P9-2 Team ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; font-family: var(--font-sans); color: #fff; flex-shrink: 0; line-height: 1; }
.avatar.tone-you { background: var(--accent); }
.avatar.tone-a { background: #9a4bb8; }
.avatar.tone-b { background: #1f8aa0; }
.avatar.tone-min { background: var(--text-faint); }

/* assign picker rows */
.assign-row-av { margin-right: 1px; }
.assign-row-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.assign-row-name { font-size: 13px; color: var(--text); }
.assign-row-role { font-size: 10.5px; color: var(--text-faint); }
.dp-assign-cur { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }

/* notes strip */
.dp-notes { margin: 0; }
.dp-notes .dp-h { margin-bottom: 4px; }
.dp-note { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.dp-note:last-of-type { border-bottom: none; }
.dp-note-body { flex: 1; min-width: 0; }
.dp-note-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.dp-note-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.dp-note-name.you { color: var(--accent); }
.dp-note-at { font-size: 10.5px; color: var(--text-faint); }
.dp-note-text { font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.dp-note-add { display: flex; gap: 8px; align-items: flex-start; padding-top: 12px; }
.dp-note-add textarea { flex: 1; resize: none; border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; font-family: var(--font-sans); font-size: 12.5px; color: var(--text); line-height: 1.5; }
.dp-note-add textarea:focus { outline: none; border-color: var(--accent-line); }

/* activity log (settings) */
.act-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.act-filter { font-size: 12px; font-family: var(--font-sans); padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.act-filter:hover { border-color: var(--line-strong); color: var(--text); }
.act-filter.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 500; }
.act-list { display: flex; flex-direction: column; }
.act-item { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.act-item:last-child { border-bottom: none; }
.act-item-body { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.act-item-body b { color: var(--text); font-weight: 600; }
.act-item-target { color: var(--text); }
.act-item-at { font-size: 11px; color: var(--text-faint); white-space: nowrap; font-family: var(--font-mono); }
.act-type-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-3); color: var(--text-3); flex-shrink: 0; }

/* ---------- P9-3 Notification center ---------- */
.notif-wrap { position: relative; flex-shrink: 0; }
/* lift the topbar (and its notif popover) above scrolling screen content */
.topbar { position: relative; z-index: 50; }
.notif-head-n { white-space: nowrap; }
.notif-readall { white-space: nowrap; }
.notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.notif-bell:hover { border-color: var(--line-strong); color: var(--text); }
.notif-bell.on { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 20px; background: var(--accent); color: var(--accent-text); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 390px; max-width: 92vw; max-height: 76vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.notif-head-n { font-size: 11px; font-weight: 500; color: var(--accent); margin-left: 8px; background: var(--accent-soft); padding: 2px 7px; border-radius: 20px; }
.notif-readall { font-size: 12px; font-family: var(--font-sans); color: var(--text-3); background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); }
.notif-readall:hover { color: var(--accent); background: var(--accent-soft); }
.notif-list { overflow-y: auto; padding: 6px; }
.notif-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 30px; }
.notif-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); }
.notif-empty-title { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-empty-sub { font-size: 12px; color: var(--text-3); line-height: 1.5; max-width: 260px; }
.notif-group { margin-bottom: 4px; }
.notif-group-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding: 8px 9px 5px; }
.notif-item { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 10px 10px 18px; border: none; background: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-sans); transition: background var(--t-fast); }
.notif-item:hover { background: var(--surface-hover); }
.notif-item.read { opacity: 0.62; }
.notif-dot { position: absolute; left: 7px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.notif-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.notif-icon.alert { background: var(--accent-soft); color: var(--accent); }
.notif-icon.digest { background: var(--high-soft); color: var(--high); }
.notif-icon.mention { background: var(--risk-soft); color: var(--risk); }
.notif-icon.engaged { background: var(--high-soft); color: var(--high); }
.notif-icon.reply { background: var(--accent-soft); color: var(--accent); }
.notif-icon.system { background: var(--surface-3); color: var(--text-3); }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
.notif-sub { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.notif-at { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; padding-top: 1px; }

/* digest email preview (settings) */
.digest-preview { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.digest-preview-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 11px; }
.digest-card { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); max-width: 460px; }
.digest-card-bar { display: flex; align-items: baseline; gap: 9px; padding: 11px 14px; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.digest-from { font-size: 12px; font-weight: 600; color: var(--accent); }
.digest-subject { font-size: 12px; color: var(--text-2); }
.digest-card-body { padding: 15px 16px 16px; }
.digest-greeting { font-size: 13px; color: var(--text); margin-bottom: 13px; }
.digest-item { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.digest-item svg { margin-top: 3px; flex-shrink: 0; }
.digest-item b { display: block; font-size: 12.5px; color: var(--text); margin-bottom: 1px; }
.digest-item span { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.digest-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12px; font-weight: 600; font-family: var(--font-sans); color: var(--accent-text); background: var(--accent); border: none; padding: 8px 13px; border-radius: var(--r-sm); cursor: pointer; }

/* ---------- P10-1 Author intelligence ---------- */
.engaged-before-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.author-chip.clickable { cursor: pointer; border-radius: 5px; transition: background var(--t-fast); }
.author-chip.clickable:hover { background: var(--accent-soft); }
.author-chip.clickable:hover .author-name { color: var(--accent); }
.author-card.clickable { cursor: pointer; position: relative; transition: border-color var(--t-fast); }
.author-card.clickable:hover { border-color: var(--accent-line); }
.author-card-go { margin-left: auto; align-self: center; color: var(--text-faint); transition: transform var(--t-fast), color var(--t-fast); }
.author-card.clickable:hover .author-card-go { color: var(--accent); transform: translateX(2px); }

.author-pan .ev-scroll { display: flex; flex-direction: column; }
.aup-top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.aup-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; flex-shrink: 0; }
.aup-top-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.aup-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-3); }
.aup-stats b { color: var(--text); font-size: 13px; }
.aup-flag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 11px; font-weight: 500; color: var(--med); background: var(--med-soft); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.aup-read { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0 0 16px; padding: 12px 14px; background: var(--surface-3); border-radius: var(--r-md); border-left: 2px solid var(--accent-line); text-wrap: pretty; }
.aup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 520px) { .aup-grid { grid-template-columns: 1fr; } }
.aup-cell { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.aup-cell-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 9px; }
.aup-engage { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.aup-engage.none { color: var(--text-3); }
.aup-engage svg { margin-top: 1px; flex-shrink: 0; }
.aup-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.aup-watch { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 13px; font-weight: 500; font-family: var(--font-sans); padding: 9px 15px; border-radius: var(--r-md); border: 1px solid var(--accent-line); background: var(--surface-2); color: var(--accent); cursor: pointer; margin-bottom: 22px; transition: all var(--t-fast); }
.aup-watch:hover { background: var(--accent-soft); }
.aup-watch.on { background: var(--accent-soft); }

/* watched authors row (research saved column) */
.saved-row .saved-author-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }

/* ---------- P10-2 Voice profiles ---------- */
.voice-pick { position: relative; }
.voice-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; font-family: var(--font-sans); padding: 4px 9px; border-radius: 20px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); cursor: pointer; white-space: nowrap; }
.voice-chip:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.voice-pop { width: 270px; left: auto; right: 0; }
.voice-opt { display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left; padding: 9px; border: none; background: none; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-sans); transition: background var(--t-fast); }
.voice-opt:hover { background: var(--surface-hover); }
.voice-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voice-opt-body b { font-size: 12.5px; color: var(--text); }
.voice-opt-body span { font-size: 11px; color: var(--text-3); line-height: 1.4; }

.voice-intro { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 14px; max-width: 580px; text-wrap: pretty; }
.voice-learning { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.voice-active-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.voice-setactive { margin-left: auto; font-size: 12px; font-family: var(--font-sans); color: var(--text-3); background: none; border: 1px solid var(--line-strong); padding: 4px 10px; border-radius: var(--r-sm); cursor: pointer; transition: all var(--t-fast); }
.voice-setactive:hover { border-color: var(--accent-line); color: var(--accent); }

/* voice tabs (per-voice sample sets) */
.voice-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.voice-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--surface-2); cursor: pointer; transition: all var(--t-fast); }
.voice-tab:hover { border-color: var(--accent-line); color: var(--text); }
.voice-tab svg { color: var(--text-3); }
.voice-tab.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.voice-tab.on svg { color: var(--accent); }
.voice-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.5px; font-weight: 600; background: var(--surface-3); color: var(--text-3); }
.voice-tab.on .voice-tab-count { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
.voice-tab-active { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* selected voice panel */
.voice-panel { padding: 16px 17px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.voice-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.voice-panel-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.voice-panel-name svg { color: var(--text-3); }

.vs-add { display: flex; flex-direction: column; gap: 10px; }
.vs-add-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.vs-paste textarea { width: 100%; resize: vertical; }
.vs-paste-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

.voice-samples-list { margin-top: 14px; grid-template-columns: minmax(0, 1fr); }
.voice-analyze-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.voice-analyze-hint { font-size: 12px; color: var(--text-3); }

.voice-summary-block { margin-top: 16px; }
.voice-summary-block .vs-add-label { margin-bottom: 8px; }
.voice-summary-edit { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 20px; }
.voice-summary { width: 100%; resize: vertical; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 9px 11px; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.voice-summary:focus { outline: none; border-color: var(--accent-line); color: var(--text); }

/* ---------- P10-3 Ask follow-ups ---------- */
.ask-turn.followup { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.ask-followthink { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); margin-top: 14px; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ask-action { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; font-family: var(--font-sans); padding: 7px 13px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.ask-action:hover:not(:disabled) { border-color: var(--accent-line); color: var(--accent); }
.ask-action:disabled, .ask-action.done { cursor: default; color: var(--high); border-color: color-mix(in oklab, var(--high) 30%, transparent); background: var(--high-soft); }

/* ---------- P10-4 Subreddit discovery ---------- */
.disc-limit { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid color-mix(in oklab, var(--warn) 26%, transparent); font-size: 12.5px; color: var(--text-2); margin-bottom: 12px; }
.disc-limit svg { color: var(--warn); flex-shrink: 0; }
.disc-limit-up { background: none; border: none; color: var(--accent); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.disc-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.disc-card { padding: 15px 16px; display: flex; flex-direction: column; }
.disc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.disc-fit { display: inline-flex; align-items: baseline; gap: 3px; font-size: 11px; color: var(--text-3); padding: 2px 8px; border-radius: 20px; }
.disc-fit b { font-size: 13px; }
.disc-fit.tone-high { background: var(--high-soft); color: var(--high); }
.disc-fit.tone-med { background: var(--med-soft); color: var(--med); }
.disc-fit.tone-low { background: var(--min-soft); color: var(--text-3); }
.disc-meta { font-size: 11.5px; color: var(--text-3); margin-bottom: 11px; }
.disc-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.disc-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.disc-row svg { color: var(--text-faint); margin-top: 2px; flex-shrink: 0; }
.disc-watch { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; font-size: 12.5px; font-weight: 500; font-family: var(--font-sans); padding: 8px 13px; border-radius: var(--r-sm); border: 1px solid var(--accent-line); background: var(--surface-2); color: var(--accent); cursor: pointer; transition: all var(--t-fast); }
.disc-watch:hover { background: var(--accent-soft); }
.disc-watch.on { background: var(--high-soft); border-color: color-mix(in oklab, var(--high) 30%, transparent); color: var(--high); }

/* ---------- P11-1 AEO trend + content-gap bridge ---------- */
.aeo-changes { padding: 16px 20px; }
.aeo-changes-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.aeo-changes-h svg { color: var(--accent); }
.aeo-changes-h .research-meta { margin-left: auto; font-weight: 400; }
.aeo-changes-list { display: flex; flex-direction: column; gap: 2px; }
.aeo-change-row { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast); }
.aeo-change-row:hover { background: var(--surface-hover); }
.aeo-change-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; font-family: var(--font-mono); white-space: nowrap; }
.aeo-change-pill.sm { font-size: 10px; padding: 1px 6px; }
.aeo-change-pill.up { background: var(--high-soft); color: var(--high); }
.aeo-change-pill.down { background: var(--risk-soft); color: var(--risk); }
.aeo-change-q { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ai-row { cursor: pointer; }
.ai-row:hover { background: var(--surface-hover); }
.ai-row.on { background: var(--accent-soft); }
.ai-q-chev { color: var(--text-faint); margin-right: 5px; vertical-align: -1px; transition: transform var(--t-fast); }
.ai-q-tags { display: inline-flex; align-items: center; gap: 7px; }
.aeo-trend-row td { padding: 0 !important; background: color-mix(in oklab, var(--surface-2) 50%, var(--surface)); }
.aeo-trend { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.aeo-trend-l { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.aeo-trend-bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; flex: 1; max-width: 260px; }
.aeo-bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.aeo-bar { width: 100%; border-radius: 2px; background: var(--accent-line); transition: height var(--t-mid); }
.aeo-bar.last.up { background: var(--high); }
.aeo-bar.last.down { background: var(--risk); }
.aeo-bar.last.flat { background: var(--accent); }
.aeo-change { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.aeo-change.up { color: var(--high); }
.aeo-change.down { color: var(--risk); }

.aeo-gap-card { padding: 20px 22px; }
.aeo-gap { padding: 15px 0; border-bottom: 1px solid var(--line); }
.aeo-gap:last-of-type { border-bottom: none; }
.aeo-gap-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.aeo-gap-q { font-size: 14px; font-weight: 600; color: var(--text); }
.aeo-answer { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.aeo-answer.weak { background: var(--med-soft); color: var(--med); }
.aeo-answer.thin { background: var(--risk-soft); color: var(--risk); }
.aeo-gap-led { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 11px; text-wrap: pretty; }
.aeo-gap-lang { font-size: 12.5px; color: var(--text); background: var(--surface-3); border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 12px; line-height: 1.5; }
.aeo-gap-lang-l { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 3px; }
.aeo-gap-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aeo-gap-threads-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.aeo-gap-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.aeo-gap-thread { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-family: var(--font-sans); padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.aeo-gap-thread:hover { border-color: var(--accent-line); color: var(--accent); }
.aeo-gap-draft { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; font-family: var(--font-sans); padding: 5px 11px; border-radius: var(--r-sm); border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.aeo-gap-draft:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }

/* ---------- P11-2 Mentions spike + archive ---------- */
.m-spike { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r-md); background: var(--med-soft); border: 1px solid color-mix(in oklab, var(--med) 28%, transparent); margin-bottom: 14px; position: relative; }
.m-spike-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--med); flex-shrink: 0; box-shadow: 0 0 0 0 color-mix(in oklab, var(--med) 60%, transparent); animation: spikePulse 2s var(--ease) infinite; }
@keyframes spikePulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--med) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.m-spike-body { flex: 1; min-width: 0; }
.m-spike-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.m-spike-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--med); white-space: nowrap; flex-shrink: 0; }
.m-spike-target { font-size: 11px; font-weight: 500; color: var(--text-3); padding: 1px 7px; border-radius: 20px; background: var(--surface-2); white-space: nowrap; flex-shrink: 0; }
.m-spike-driver { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; text-wrap: pretty; }
.m-spike-driver svg { color: var(--med); margin-top: 2px; flex-shrink: 0; }
.m-spike-view { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; font-family: var(--font-sans); padding: 6px 11px; border-radius: var(--r-sm); border: none; background: var(--med); color: #fff; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.m-spike-x { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 3px; border-radius: var(--r-sm); flex-shrink: 0; align-self: flex-start; }
.m-spike-x:hover { color: var(--text); background: var(--surface-2); }

.m-archive { margin-bottom: 16px; }
.m-archive-bar { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); }
.m-archive-bar input { flex: 1; border: none; background: none; outline: none; font-family: var(--font-sans); font-size: 13.5px; color: var(--text); }
.m-archive-clear { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 2px; display: flex; }
.m-archive-clear:hover { color: var(--text); }
.m-archive-ranges { display: flex; gap: 6px; margin-top: 9px; }
.m-range { font-size: 11.5px; font-family: var(--font-sans); padding: 4px 11px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.m-range:hover { border-color: var(--line-strong); color: var(--text); }
.m-range.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 500; }
.m-archive-count { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.m-archive-count b { color: var(--text); }

/* ---------- P11-4 Integrations hub ---------- */
.intg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.intg-card { display: flex; flex-direction: column; padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.intg-card.on { border-color: var(--accent-line); }
.intg-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.intg-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
.intg-mark.tone-a { background: #9a4bb8; }
.intg-mark.tone-b { background: #1f8aa0; }
.intg-mark.tone-high { background: var(--high); }
.intg-mark.tone-med { background: var(--med); }
.intg-mark.tone-risk { background: var(--risk); }
.intg-mark.tone-min { background: var(--text-3); }
.intg-mark.tone-accent { background: var(--accent); }
.intg-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.intg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--high); margin-left: auto; box-shadow: 0 0 0 3px var(--high-soft); }
.intg-desc { font-size: 12px; color: var(--text-3); line-height: 1.45; margin-bottom: 11px; flex: 1; text-wrap: pretty; }
.intg-detail { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--high); margin-bottom: 11px; }
.intg-btn { font-size: 12.5px; font-weight: 500; font-family: var(--font-sans); padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--accent-line); background: var(--surface-2); color: var(--accent); cursor: pointer; transition: all var(--t-fast); }
.intg-btn:hover { background: var(--accent-soft); }
.intg-btn.on { border-color: var(--line-strong); color: var(--text-3); }
.intg-btn.on:hover { border-color: var(--risk); color: var(--risk); background: var(--risk-soft); }
.intg-api { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-3); }
.intg-api-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.intg-api-l { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.intg-api-l svg { color: var(--accent); }
.intg-api-note { font-size: 12px; color: var(--text-3); }
.intg-key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intg-key-v { flex: 1; min-width: 180px; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 11px; }
.intg-key-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-family: var(--font-sans); padding: 7px 11px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all var(--t-fast); }
.intg-key-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.m-chan.connect { border: none; background: none; font-family: var(--font-sans); color: var(--accent); cursor: pointer; padding: 0; font-size: 11px; font-weight: 500; }
.m-chan.connect:hover { text-decoration: underline; }

/* GTMCat — landing hero. Page chrome + the embedded product window.
   Reuses theme tokens; the window hides the wide app/onboarding shells so each
   real screen shows as a single readable column. */

.lp { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; --reddit: #ff4500; --reddit-soft: rgba(255,69,0,0.10); }
.lp-inner { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---------- nav ---------- */
.lp-nav { display: flex; align-items: center; gap: 40px; height: 86px; }
.lp-brand { display: flex; align-items: center; gap: 10px; }
.lp-wm { font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.lp-brand .cat { color: var(--accent); }
.lp-brand img { width: 32px; height: 32px; display: block; }
.lp-nav-links { display: flex; gap: 28px; }
.lp-nav-links a { color: var(--text-2); font-size: 14.5px; text-decoration: none; font-weight: 500; cursor: pointer; }
.lp-nav-links a:hover { color: var(--text); }
.lp-nav-spacer { flex: 1; }
.lp-cta { background: linear-gradient(180deg, #5667df, #4257d6 52%, #3a4ccb); color: #fff; border: none; border-radius: 15px; padding: 12px 22px; font-family: inherit; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; box-shadow: 0 5px 0 0 #2c3a93, 0 9px 16px -5px rgba(38,50,130,0.5), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast); }
.lp-cta:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 6px 0 0 #2c3a93, 0 13px 22px -6px rgba(38,50,130,0.55), inset 0 1px 0 rgba(255,255,255,0.32); }
.lp-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #2c3a93, 0 3px 7px -4px rgba(38,50,130,0.5), inset 0 1px 0 rgba(255,255,255,0.22); }
/* white tactile variant — pairs with the primary (like the reference "Log in") */
.lp-cta.secondary { background: var(--surface-2); color: var(--text); box-shadow: 0 5px 0 0 #dcd8cf, 0 9px 16px -6px rgba(33,30,24,0.18), inset 0 0 0 1px rgba(33,30,24,0.10), inset 0 1px 0 rgba(255,255,255,0.6); }
.lp-cta.secondary:hover { filter: none; background: var(--surface); transform: translateY(-1px); box-shadow: 0 6px 0 0 #dcd8cf, 0 13px 22px -7px rgba(33,30,24,0.2), inset 0 0 0 1px rgba(33,30,24,0.10), inset 0 1px 0 rgba(255,255,255,0.6); }
.lp-cta.secondary:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #dcd8cf, 0 3px 7px -4px rgba(33,30,24,0.18), inset 0 0 0 1px rgba(33,30,24,0.12); }

/* ---------- hero ---------- */
.lp-hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 60px; align-items: center; padding: 44px 0 84px; }
.lp-copy { max-width: 560px; }
.lp-badge { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; }
.lp-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.lp-head { font-family: 'Bricolage Grotesque', var(--font-sans); font-size: clamp(25px, 1.9vw + 16px, 40px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; color: var(--text); margin: 0; }
.lp-reddit { color: var(--reddit); white-space: nowrap; }
.lp-reddit-glyph { width: 0.92em; height: 0.92em; vertical-align: -0.16em; margin-right: 0.08em; filter: drop-shadow(0 2px 6px rgba(255,69,0,0.28)); }
.lp-gtm { white-space: nowrap; color: var(--accent); }
.lp-gtm-mark { width: 1.0em; height: 1.0em; vertical-align: -0.2em; margin-left: 0.03em; }
.lp-gtm-cat { color: var(--accent); }
.lp-ai { display: inline-flex; align-items: center; justify-content: center; width: 1.16em; height: 1.16em; margin: 0 0.16em; vertical-align: -0.28em; border-radius: 0.3em; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line), 0 2px 7px -3px rgba(33,30,24,0.2); }
.lp-ai-img { width: 100%; height: 100%; object-fit: contain; display: block; }

@keyframes lp-rise { from { transform: translateY(16px); } }
@media (prefers-reduced-motion: no-preference) {
  .lp-head { animation: lp-rise 0.6s var(--ease) 0.05s both; }
  .lp-copy .lp-form { animation: lp-rise 0.55s var(--ease) 0.22s both; }
}
.lp-form { display: flex; gap: 10px; margin: 32px 0 0; max-width: 470px; }
.lp-input { flex: 1; min-width: 0; height: 52px; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--surface-2); padding: 0 18px; font-family: inherit; font-size: 15px; color: var(--text); outline: none; box-shadow: 0 5px 0 0 #dbd7cd, 0 8px 14px -6px rgba(33,30,24,0.12); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.lp-input::placeholder { color: var(--text-faint); }
.lp-input:focus { border-color: var(--accent); box-shadow: 0 5px 0 0 #ccd2f5, 0 8px 16px -6px rgba(66,87,214,0.20); }
.lp-form .lp-cta { height: 52px; padding: 0 22px; white-space: nowrap; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.lp-form .lp-cta svg { margin-right: -3px; opacity: 0.92; }
.lp-note { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); margin: 15px 0 0; }
.lp-bullets { display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 20px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.lp-bullets span { display: inline-flex; align-items: center; gap: 8px; }
.lp-bullets span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ---------- product window ---------- */
.lw-wrap { width: 100%; }
.lw-frame { width: 800px; border-radius: 15px; overflow: hidden; background: var(--surface);
  box-shadow: 0 2px 6px rgba(20,16,10,0.09), 0 42px 90px -34px rgba(20,16,10,0.42), 0 0 0 1px rgba(20,16,10,0.05); }
.lw-chrome { height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: #ecebe6; border-bottom: 1px solid var(--line); }
.lw-lights { display: flex; gap: 8px; }
.lw-lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.lw-lights i:nth-child(1){ background:#ec6a5e; } .lw-lights i:nth-child(2){ background:#f3bd4f; } .lw-lights i:nth-child(3){ background:#61c554; }
.lw-url { flex: 1; max-width: 360px; margin: 0 auto; height: 28px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); font-family: var(--font-mono); font-size: 12.5px; }
.lw-url svg { color: var(--ok); flex-shrink: 0; }
.lw-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 11px; flex-shrink: 0; }
.lw-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: lwpulse 1.8s ease-in-out infinite; }
@keyframes lwpulse { 50% { opacity: 0.3; } }

.lw-tabs { display: flex; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.lw-tab { flex: 1; padding: 14px 0 13px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; position: relative; }
.lw-tab-bar { position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); pointer-events: none; }

.lw-body { position: relative; height: 700px; background: var(--bg); overflow: hidden; }
.lw-screen { position: absolute; inset: 0; will-change: opacity; }

/* hide the wide shells — show each real screen as a single column */
.lw-screen .onb-rail { display: none; }
.lw-screen .onb { display: block; height: 100%; }
.lw-screen .onb-main { height: 100%; padding: 24px 40px; align-items: flex-start; justify-content: flex-start; }
.lw-screen .onb-card { max-width: none; width: 100%; }
.lw-screen .onb-h { font-size: 27px; }
.lw-screen .onb-p { font-size: 15px; max-width: 620px; }

.lw-screen .gc-rail, .lw-screen .gc-top, .lw-screen .gc-list, .lw-screen .dp-bar { display: none !important; }
.lw-screen .gc-app, .lw-screen .gc-main, .lw-screen .gc-cols { display: block !important; height: 100%; min-height: 0; }
.lw-screen .detail-panel { position: relative !important; inset: auto !important; width: 100% !important; height: 100%; z-index: auto !important; box-shadow: none !important; border: none !important; }
.lw-screen .detail-scrim { display: none !important; }
.lw-screen .detail-scroll { overflow: hidden; padding: 26px 30px; }
.lw-screen .onb-led { height: auto; max-height: none; overflow: visible; }
.lw-screen .composer-actbar { position: relative !important; }
.lw-screen .composer-editor textarea { min-height: 150px !important; max-height: 150px !important; }

/* nav right group */
.lp-nav-right { display: flex; align-items: center; gap: 20px; }
.lp-login { color: var(--text-2); font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; }
.lp-login:hover { color: var(--text); }
.lp-cta--sm { padding: 9px 16px; font-size: 13.5px; border-radius: 12px; box-shadow: 0 4px 0 0 #2c3a93, 0 7px 13px -5px rgba(38,50,130,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
.lp-cta--sm:hover { box-shadow: 0 5px 0 0 #2c3a93, 0 10px 18px -6px rgba(38,50,130,0.55), inset 0 1px 0 rgba(255,255,255,0.32); }
.lp-cta--sm:active { box-shadow: 0 1px 0 0 #2c3a93, 0 3px 6px -4px rgba(38,50,130,0.5), inset 0 1px 0 rgba(255,255,255,0.22); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .lp-hero { grid-template-columns: 1fr; gap: 44px; padding: 24px 0 64px; align-items: start; }
}
@media (max-width: 560px) {
  .lp-nav { height: 64px; }
  .lp-hero { gap: 28px; padding: 6px 0 48px; }
  .lp-form { flex-direction: column; align-items: stretch; gap: 12px; max-width: 420px; }
  .lp-form .lp-cta { width: 100%; }
}

/* ==========================================================================
   GTMCat sibling pages — privacy / terms / support / pricing / refunds
   ADDITIVE ONLY. Reuses the landing's own tokens + fonts above. Namespaced
   `gp-` so it cannot affect any existing landing class. The landing file
   (GTMCat Landing (standalone).html) is NOT styled by this sheet.
   ========================================================================== */
html[data-theme="paper"], body { min-height: 100%; }
body { margin: 0; background: var(--bg); }
.lp { min-height: 100vh; }
a.lp-cta { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
a.lp-login { text-decoration: none; }

.gp-main { padding-bottom: 8px; }
.gp-pagehead { padding: 40px 0 4px; }
.gp-pagehead h1 { font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 800; font-size: clamp(30px, 2vw + 18px, 46px); letter-spacing: -0.03em; line-height: 1.08; color: var(--text); margin: 0; }
.gp-updated { margin-top: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--text-3); }
.gp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 6px 12px; border-radius: 999px; }

/* ---- prose ---- */
.gp-prose { padding: 22px 0 8px; max-width: 760px; }
.gp-prose > * + * { margin-top: 18px; }
.gp-prose p, .gp-prose li { color: var(--text); font-size: 16.5px; line-height: 1.7; }
.gp-prose .lead { font-size: 18.5px; color: var(--text-2); line-height: 1.6; }
.gp-prose h2 { font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; margin-top: 40px; color: var(--text); }
.gp-prose h3 { font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 700; font-size: 18.5px; letter-spacing: -0.015em; margin-top: 26px; color: var(--text); }
.gp-prose ul, .gp-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.gp-prose strong { font-weight: 700; }
.gp-prose a { color: var(--accent); font-weight: 500; }
.gp-prose hr { border: none; height: 1px; background: var(--line); margin: 34px 0; }
.gp-prose blockquote { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 20px; }
.gp-prose blockquote p { font-size: 15.5px; }
.gp-prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-3); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--r-sm); }
.gp-tablewrap { overflow-x: auto; }
.gp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.gp-table th, .gp-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.gp-table thead th { background: var(--surface-3); font-weight: 600; font-size: 13px; }
.gp-table tbody tr:last-child td { border-bottom: none; }

/* ---- contact card ---- */
.gp-contact { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: 22px 26px; box-shadow: var(--shadow-panel); }
.gp-contact .lbl { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.gp-contact .email { font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin-top: 3px; }

/* ---- faq ---- */
.gp-faq { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; }
.gp-faq details { border-bottom: 1px solid var(--line); }
.gp-faq details:last-child { border-bottom: none; }
.gp-faq summary { cursor: pointer; padding: 17px 20px; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--text); }
.gp-faq summary::-webkit-details-marker { display: none; }
.gp-faq summary::after { content: "+"; color: var(--accent); font-size: 20px; font-weight: 400; line-height: 1; }
.gp-faq details[open] summary::after { content: "\2013"; }
.gp-faq .a { padding: 0 20px 17px; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.gp-faq .a a { color: var(--accent); font-weight: 500; }

/* ---- sections + pricing ---- */
.gp-section { padding: 38px 0; }
.gp-section-head { max-width: 660px; margin-bottom: 26px; }
.gp-section-head h2 { font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 800; font-size: clamp(26px, 1.4vw + 18px, 34px); letter-spacing: -0.025em; line-height: 1.12; }
.gp-section-head p { margin-top: 12px; color: var(--text-2); font-size: 17px; }
.gp-center { text-align: center; }
.gp-sub { color: var(--text-2); font-size: 18px; max-width: 42em; }

.gp-pricegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .gp-pricegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gp-pricegrid { grid-template-columns: 1fr; } }
.gp-plan { position: relative; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-panel); }
.gp-plan.featured { border-color: color-mix(in oklab, var(--accent) 55%, var(--line-strong)); box-shadow: 0 2px 6px rgba(20,16,10,.07), 0 30px 60px -30px rgba(66,87,214,.5); }
.gp-plan-badge { position: absolute; top: -11px; left: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 4px 10px; border-radius: 999px; }
.gp-plan-name { font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.gp-plan-for { color: var(--text-3); font-size: 13px; margin-top: 2px; min-height: 34px; }
.gp-plan-price { margin: 12px 0 2px; font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 800; font-size: 33px; letter-spacing: -0.03em; }
.gp-plan-price span { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--text-3); letter-spacing: 0; }
.gp-plan .lp-cta { width: 100%; margin: 16px 0 18px; }
.gp-plan-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--line); padding-top: 18px; margin: 0; }
.gp-plan-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); }
.gp-plan-feats li::before { content: ""; flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' stroke='%231f9d6b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gp-plan-feats li b { color: var(--text); font-weight: 600; }
.gp-plan-feats li.off { color: var(--text-faint); }
.gp-plan-feats li.off::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='3' y1='6' x2='9' y2='6' stroke='%238c887e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.gp-callout { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-lg); padding: 18px 22px; font-size: 15.5px; color: var(--text); }
.gp-callout strong { color: var(--accent-2); }
.gp-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.gp-cta-band { text-align: center; padding: 56px 0; }
.gp-cta-band h2 { font-family: 'Bricolage Grotesque', var(--font-sans); font-weight: 800; font-size: clamp(26px, 2vw + 14px, 38px); letter-spacing: -0.025em; }
.gp-cta-band p { margin-top: 10px; color: var(--text-2); font-size: 17px; }
.gp-cta-band .gp-cta-row { justify-content: center; }
.gp-fine { margin-top: 14px; font-size: 13px; color: var(--text-faint); }

/* ---- footer ---- */
.gp-foot { border-top: 1px solid var(--line); padding: 42px 0 56px; margin-top: 48px; }
.gp-foot-grid { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.gp-foot-brand { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.gp-foot-tag { color: var(--text-3); font-size: 14px; }
.gp-foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.gp-foot-links a { color: var(--text-2); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.gp-foot-links a:hover { color: var(--text); }
.gp-foot-legal { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; color: var(--text-faint); font-size: 13px; }
.gp-foot-legal .disc { max-width: 640px; }

/* --- bigger header logo (user request): nav only; footer wordmark unchanged --- */
.lp-nav .lp-brand img { width: 46px; height: 46px; }
.lp-nav .lp-wm { font-size: 26px; }