/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Barlow_Condensed","arguments":[{"subsets":["latin"],"weight":["400","500","600","700","800","900"],"variable":"--font-barlow","display":"swap"}],"variableName":"barlowCondensed"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/05af89ad76258aac-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/c047de4e6e16a01b-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/1f54c84255ccf44e-s.p.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/5de5dda68c9a1053-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ac44098818d287e8-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/3667c091265cf81b-s.p.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/d6e015f239232eb3-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/55b35d87b6156eea-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/5fb5c05ff73c0616-s.p.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/8599be8653318abe-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/3352fdb488e19d84-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/437e5f23c97e320c-s.p.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/bd4099f982a70777-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/adc67d25e358ad72-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/79f0f365efbf4f90-s.p.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/506cbc5bf31ce8c3-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/24c81c8cc8559206-s.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/67d60655232d436d-s.p.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;
}@font-face {font-family: 'Barlow Condensed Fallback';src: local("Arial");ascent-override: 130.73%;descent-override: 26.15%;line-gap-override: 0.00%;size-adjust: 76.49%
}.__className_bdb1f0 {font-family: 'Barlow Condensed', 'Barlow Condensed Fallback';font-style: normal
}.__variable_bdb1f0 {--font-barlow: 'Barlow Condensed', 'Barlow Condensed Fallback'
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"weight":["400","500","600","700"],"variable":"--font-inter","display":"swap"}],"variableName":"inter"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.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;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_8b3a0b {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_8b3a0b {--font-inter: 'Inter', 'Inter Fallback'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* ══════════════════════════════════════════════════
   VICTOR COMMAND CENTRE — Design System
   ══════════════════════════════════════════════════
   Fonts: Barlow Condensed (headings/numbers) + Inter (body)
   Accent: #FF6B00 (Victor orange)
   Dark command centre — JARVIS-inspired
   ══════════════════════════════════════════════════ */

/* ── Colour Tokens ─────────────────────────────── */

:root {
  /* Grey scale (dark mode) */
  --grey-900: #f5f5f7;
  --grey-800: #e4e4e8;
  --grey-700: #c8c8d0;
  --grey-600: #9898a8;
  --grey-500: #6e6e82;
  --grey-400: #4a4a5e;
  --grey-300: #2e2e3e;
  --grey-200: #1e1e2a;
  --grey-100: #161620;
  --grey-75: #121218;
  --grey-50: #0e0e14;
  --grey-25: #0a0a0f;
  --grey-1: #08080c;

  /* Blue (Primary) */
  --blue-50: rgba(59, 130, 246, 0.08);
  --blue-100: rgba(59, 130, 246, 0.15);
  --blue-200: #93c5fd;
  --blue-300: #60a5fa;
  --blue-400: #3b82f6;
  --blue-500: #2563eb;
  --blue-600: #1d4ed8;

  /* Teal */
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;

  /* Pink */
  --pink-400: #f472b6;
  --pink-500: #ec4899;

  /* Green */
  --green-50: rgba(34, 197, 94, 0.10);
  --green-100: rgba(34, 197, 94, 0.18);
  --green-400: #4ade80;
  --green-500: #22c55e;

  /* Yellow */
  --yellow-50: rgba(234, 179, 8, 0.10);
  --yellow-100: rgba(234, 179, 8, 0.18);
  --yellow-400: #facc15;
  --yellow-500: #eab308;

  /* Orange */
  --orange-50: rgba(249, 115, 22, 0.10);
  --orange-100: rgba(249, 115, 22, 0.18);
  --orange-400: #fb923c;
  --orange-500: #f97316;

  /* Red */
  --red-50: rgba(239, 68, 68, 0.10);
  --red-100: rgba(239, 68, 68, 0.18);
  --red-400: #f87171;
  --red-500: #ef4444;

  /* Purple */
  --purple-50: rgba(168, 85, 247, 0.10);
  --purple-100: rgba(168, 85, 247, 0.18);
  --purple-400: #c084fc;
  --purple-500: #a855f7;

  /* Victor orange accent */
  --victor-accent: #FF6B00;
  --victor-accent-hover: #FF8533;
  --victor-accent-subtle: rgba(255, 107, 0, 0.15);
  --victor-accent-glow: rgba(255, 107, 0, 0.3);
  --victor-accent-text: #FF6B00;

  /* Victor backgrounds */
  --bg-primary: #0D0D0D;
  --bg-secondary: #141414;
  --bg-tertiary: #1A1A1A;
  --bg-hover-v: #242424;
  --bg-active-v: #2A2A2A;

  /* Victor status */
  --status-success: #00D68F;
  --status-warning: #FFB800;
  --status-error: #FF3B3B;
  --status-info: #3B82F6;

  /* Victor borders */
  --border-v: rgba(255, 255, 255, 0.06);
  --border-accent-v: rgba(255, 107, 0, 0.3);

  /* Victor shadows */
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.4);
  --shadow-accent: 0 0 20px rgba(255,107,0,0.15);
  --shadow-hover: 0 0 30px rgba(255,107,0,0.2);

  /* Semantic tokens */
  --bg: var(--bg-primary);
  --bg-elevated: var(--bg-secondary);
  --bg-card: var(--bg-secondary);
  --bg-surface: var(--bg-tertiary);
  --bg-hover: var(--bg-hover-v);
  --bg-active: var(--victor-accent-subtle);
  --border: var(--border-v);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-active: var(--victor-accent);
  --text-primary: #FFFFFF;
  --text-secondary: #B3B3B3;
  --text-tertiary: #666666;
  --text-inverse: var(--bg-primary);
  --accent: var(--victor-accent);
  --accent-hover: var(--victor-accent-hover);

  /* Font */
  --font: var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: var(--font-barlow, 'Barlow Condensed'), sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Radius — upgraded for command centre */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ── Reset ─────────────────────────────────────── */

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

html, body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--victor-accent-hover); }

::selection {
  background: var(--victor-accent);
  color: white;
}

/* Scrollbar — dark, minimal */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-hover-v); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--victor-accent); }

/* ── Shell Layout ──────────────────────────────── */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  background: var(--grey-1);
  border-right: 1px solid var(--border-subtle);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar::-webkit-scrollbar { width: 0; }

.sidebar-brand {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-brand h1 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.sidebar-brand span {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* ── Navigation ────────────────────────────────── */

nav {
  padding: 6px 0;
  flex: 1 1;
}

.nav-section {
  padding: 14px 16px 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  color: var(--grey-600);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.1s, background 0.1s;
  border-left: 2px solid transparent;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--grey-100);
  text-decoration: none;
}

.nav-link.active {
  color: var(--text-primary);
  background: var(--blue-50);
  border-left-color: var(--accent);
  font-weight: 600;
}

.nav-link .nav-icon {
  width: 14px;
  text-align: center;
  font-size: 10px;
  opacity: 0.5;
}

.nav-link.active .nav-icon {
  opacity: 1;
  color: var(--accent);
}

.nav-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: var(--radius);
  background: var(--red-100);
  color: var(--red-400);
  min-width: 16px;
  text-align: center;
  line-height: 16px;
}

/* ── Main Content ──────────────────────────────── */

.main-content {
  margin-left: 220px;
  flex: 1 1;
  padding: 20px 24px;
  min-width: 0;
  max-width: 100%;
}

/* ── Page Header (legacy — use .page-title) ───── */

/* ── Cards ─────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 14px;
}

.card-compact {
  padding: 10px 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-title {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ── Stat Cards ────────────────────────────────── */

.stat-value-sm {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}

.stat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stat-sublabel {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-top: 2px;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--radius);
}

.stat-trend.up { background: var(--green-50); color: var(--green-400); }
.stat-trend.down { background: var(--red-50); color: var(--red-400); }
.stat-trend.flat { background: var(--grey-200); color: var(--text-tertiary); }

/* ── Metric Row (inline stats) ─────────────────── */

.metric-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 8px 0;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ── Grids ─────────────────────────────────────── */

.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 8px; gap: 8px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; gap: 8px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 8px; gap: 8px; }

/* ── Tables ────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-elevated);
}

td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-primary);
}

tr:hover td {
  background: var(--grey-100);
}

tr:last-child td {
  border-bottom: none;
}

/* ── Badges ────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.badge-green { background: var(--green-100); color: var(--green-400); }
.badge-yellow { background: var(--yellow-100); color: var(--yellow-400); }
.badge-red { background: var(--red-100); color: var(--red-400); }
.badge-blue { background: var(--blue-100); color: var(--blue-300); }
.badge-purple { background: var(--purple-100); color: var(--purple-400); }
.badge-orange { background: var(--orange-100); color: var(--orange-400); }
.badge-grey { background: var(--grey-300); color: var(--grey-600); }
.badge-teal { background: rgba(20, 184, 166, 0.15); color: var(--teal-400); }

/* ── Kanban ────────────────────────────────────── */

.kanban {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.kanban::-webkit-scrollbar { height: 3px; }
.kanban::-webkit-scrollbar-track { background: transparent; }
.kanban::-webkit-scrollbar-thumb { background: var(--grey-400); border-radius: 2px; }

.kanban-column {
  min-width: 200px;
  max-width: 240px;
  flex-shrink: 0;
}

.kanban-column-header {
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  border-bottom: 2px solid var(--border);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 4px;
  cursor: default;
  transition: border-color 0.1s;
}

.kanban-card:hover {
  border-color: var(--grey-400);
}

.kanban-card h4 {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.kanban-card .meta {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* ── Buttons ───────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--grey-400);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-sm {
  padding: 2px 7px;
  font-size: 10px;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.btn-approve {
  background: var(--green-100);
  border-color: var(--green-400);
  color: var(--green-400);
  font-size: 10px;
  padding: 2px 8px;
}

.btn-approve:hover {
  background: var(--green-400);
  color: var(--grey-1);
}

.btn-reject {
  background: transparent;
  border-color: var(--grey-400);
  color: var(--text-tertiary);
  font-size: 10px;
  padding: 2px 8px;
}

.btn-reject:hover {
  border-color: var(--red-400);
  color: var(--red-400);
}

.btn-advance {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.1s;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.btn-advance:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.btn-advance.won {
  color: var(--green-400);
  border-color: var(--green-400);
}

.btn-advance.won:hover {
  background: var(--green-400);
  color: var(--grey-1);
}

.btn-advance.lost {
  color: var(--text-tertiary);
}

.btn-advance.lost:hover {
  border-color: var(--red-400);
  color: var(--red-400);
  background: var(--red-50);
}

/* ── Priority Items (Operator Inbox) ───────────── */

.priority-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.priority-item:last-child {
  border-bottom: none;
}

.priority-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.priority-dot.critical { background: var(--red-400); box-shadow: 0 0 6px var(--red-100); }
.priority-dot.high { background: var(--orange-400); }
.priority-dot.medium { background: var(--blue-400); }
.priority-dot.low { background: var(--grey-500); }

.priority-content {
  flex: 1 1;
  min-width: 0;
}

.priority-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.priority-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Agent Cards (Legacy) ──────────────────────── */

.agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: border-color 0.1s;
}

.agent-card:hover {
  border-color: var(--grey-400);
}

.agent-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.agent-indicator.active { background: var(--green-400); box-shadow: 0 0 6px var(--green-400); }
.agent-indicator.idle { background: var(--grey-500); }
.agent-indicator.error { background: var(--red-400); box-shadow: 0 0 6px var(--red-400); }

.agent-body {
  flex: 1 1;
  min-width: 0;
}

.agent-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.agent-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.3;
  margin-top: 1px;
}

.agent-meta {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* ── Role Agent Cards (Agent HQ) ──────────────── */

.role-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color 0.15s, background 0.15s;
}

.role-card:hover {
  border-color: var(--grey-400);
  background: var(--bg-elevated);
}

.role-card-boss {
  background: var(--bg-elevated);
}

.role-card-boss:hover {
  background: var(--grey-200);
}

.role-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ── Side Panel Slide Animation ───────────────── */

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ── Management Panel ─────────────────────────── */

.mgmt-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--grey-100);
}

.mgmt-tab {
  flex: 1 1;
  padding: 8px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font);
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.mgmt-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.mgmt-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.mgmt-section {
  margin-bottom: 14px;
}

.mgmt-section-title {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.mgmt-kpi-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.mgmt-kpi-label {
  width: 90px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgmt-kpi-track {
  flex: 1 1;
  height: 6px;
  background: var(--grey-300);
  border-radius: 3px;
  overflow: hidden;
}

.mgmt-kpi-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.mgmt-kpi-value {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  min-width: 48px;
  text-align: right;
}

.mgmt-kpi-pct {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  min-width: 30px;
  text-align: right;
}

.mgmt-mode-btn {
  padding: 4px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mgmt-mode-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.mgmt-mode-btn.active {
  background: var(--blue-50);
  border-color: var(--accent);
  color: var(--accent);
}

.mgmt-directive {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-secondary);
}

.mgmt-directive-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.mgmt-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 0;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 8px;
}

.mgmt-open-btn:hover {
  background: var(--blue-50);
  border-color: var(--accent);
  color: var(--accent);
}

/* Deep view back button */
.office-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  background: var(--grey-200);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 12px;
}

.office-back-btn:hover {
  background: var(--grey-300);
  color: var(--text-primary);
}

/* ── Score Bars ────────────────────────────────── */

.score-bar {
  height: 2px;
  background: var(--grey-300);
  border-radius: 1px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 0.3s ease;
}

.score-bar-fill.high { background: var(--green-400); }
.score-bar-fill.medium { background: var(--yellow-400); }
.score-bar-fill.low { background: var(--red-400); }

/* ── Section Dividers ──────────────────────────── */

.section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

/* ── Map Layout ────────────────────────────────── */

.map-shell {
  display: flex;
  gap: 0;
  height: calc(100vh - 80px);
  min-height: 400px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.map-canvas {
  flex: 1 1;
  min-height: 0;
  height: 100%;
  position: relative;
  background: #0d0d14;
}

.map-panel {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.map-panel-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-panel-search {
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 11px;
  outline: none;
}

.map-panel-search:focus {
  border-color: var(--accent);
}

.map-panel-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 4px;
}

.map-panel-scroll::-webkit-scrollbar { width: 3px; }
.map-panel-scroll::-webkit-scrollbar-thumb { background: var(--grey-400); border-radius: 2px; }

.map-item {
  padding: 6px 8px;
  margin-bottom: 2px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.1s;
}

.map-item:hover {
  border-color: var(--grey-400);
}

.map-item-name {
  font-weight: 600;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-item-location {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.map-item-metric {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10px;
}

.map-legend {
  padding: 6px 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 9px;
  color: var(--text-tertiary);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.map-legend-dot {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── Forms ─────────────────────────────────────── */

.input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.1s;
  width: 100%;
}

.input:focus {
  border-color: var(--accent);
}

.input::placeholder {
  color: var(--text-tertiary);
}

select.input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236e6e82'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
  cursor: pointer;
}

select.input option {
  background: var(--grey-200);
  color: var(--text-primary);
}

textarea.input {
  resize: vertical;
  min-height: 40px;
}

.form-row {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-row-4 { grid-template-columns: repeat(4, 1fr); }

.form-inline {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Inline Editing ───────────────────────────── */

.inline-editable {
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s, color 0.15s;
  padding-bottom: 1px;
}

.inline-editable:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.inline-edit-wrap {
  display: inline-flex;
  align-items: center;
}

.inline-edit-input {
  width: auto !important;
}

.form-inline .input { flex: 1 1; }

/* ── Pipeline Stage Bar ────────────────────────── */

.stage-bar {
  display: flex;
  gap: 2px;
  height: 28px;
  border-radius: var(--radius);
  overflow: hidden;
}

.stage-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 0;
  transition: flex 0.3s ease;
}

/* ── Tabs ──────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}

.tab {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: all 0.1s;
  font-family: var(--font);
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Utilities ─────────────────────────────────── */

.mono { font-family: var(--font-mono); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-tertiary); }
.text-green { color: var(--green-400); }
.text-yellow { color: var(--yellow-400); }
.text-red { color: var(--red-400); }
.text-blue { color: var(--blue-300); }
.text-orange { color: var(--orange-400); }
.text-purple { color: var(--purple-400); }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }
.font-mono { font-family: var(--font-mono); font-size: 11px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ── Empty States ──────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-tertiary);
}

.empty-state p {
  font-size: 12px;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── Pulse Dot (live indicator) ────────────────── */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ── Fade In ───────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.15s ease-out;
}

/* ── Leaflet Dark Popup ────────────────────────── */

.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 8px 10px !important;
  line-height: 1.4 !important;
  color: var(--text-primary) !important;
}

.leaflet-popup-tip {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.leaflet-popup-close-button {
  color: var(--text-tertiary) !important;
  font-size: 16px !important;
  top: 4px !important;
  right: 6px !important;
}

.leaflet-popup-close-button:hover {
  color: var(--text-primary) !important;
}

.leaflet-container a.leaflet-popup-close-button {
  color: var(--text-tertiary) !important;
}

/* ── Page Header (unified) ────────────────────── */

.page-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.page-title h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-title .subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.page-title .aside {
  text-align: right;
  flex-shrink: 0;
}

.page-title .aside-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.page-title .aside-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Metric Row (header counters) ─────────────── */

.metric-counters {
  display: flex;
  gap: 12px;
}

.metric-counter {
  text-align: center;
}

.metric-counter-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.metric-counter-label {
  font-size: 9px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Inline Credentials / Dot Status ──────────── */

.dot-status {
  display: flex;
  gap: 16px;
}

.dot-status-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.dot-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.dot-status-label {
  font-weight: 500;
  text-transform: capitalize;
}

/* ── Action Groups ────────────────────────────── */

.action-group {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}

/* ── Transitions & Interaction Polish ─────────── */

.card {
  transition: border-color 0.12s ease;
}

.priority-item {
  transition: background 0.1s ease;
}

.priority-item:hover {
  background: var(--bg-elevated);
}

.badge {
  transition: background 0.1s ease, color 0.1s ease;
}

tr {
  transition: background 0.08s ease;
}

/* ── Focus & Disabled States ──────────────────── */

.input:disabled,
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn:focus-visible,
.input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn-advance:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Prospect Detail ──────────────────────────── */

.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.score-large {
  width: 48px;
  height: 48px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

/* Score Breakdown Bars */
.score-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-bar-label {
  width: 110px;
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-600);
  flex-shrink: 0;
}

.score-bar-track {
  flex: 1 1;
  height: 6px;
  background: var(--grey-300);
  border-radius: 1px;
  overflow: hidden;
}

.score-bar-value {
  width: 32px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', monospace;
}

/* Activity Timeline */
.timeline {
  position: relative;
  padding-left: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grey-300);
}

.timeline-item {
  position: relative;
  padding-bottom: 14px;
  display: flex;
  gap: 10px;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--grey-200);
  background: var(--grey-400);
  z-index: 1;
}

.timeline-dot.email { background: var(--blue-400); border-color: var(--blue-400); }
.timeline-dot.call { background: var(--green-400); border-color: var(--green-400); }
.timeline-dot.meeting { background: var(--purple-400); border-color: var(--purple-400); }
.timeline-dot.stage_change { background: var(--orange-400); border-color: var(--orange-400); }
.timeline-dot.score_update { background: var(--yellow-400); border-color: var(--yellow-400); }

.timeline-content {
  flex: 1 1;
  min-width: 0;
}

.timeline-time {
  font-size: 10px;
  color: var(--grey-500);
}

.timeline-desc {
  font-size: 13px;
  color: var(--grey-800);
  line-height: 1.4;
}

.timeline-meta {
  font-size: 10px;
  color: var(--grey-500);
  margin-top: 2px;
}

/* ── Upload Zone ──────────────────────────────── */

.upload-zone {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--blue-50);
}

/* ── Video Recorder ───────────────────────────── */

.video-recorder {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-preview {
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius);
  background: var(--grey-50);
  aspect-ratio: 16/9;
  object-fit: cover;
}

.recording-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-500);
  animation: pulse-recording 1s ease-in-out infinite;
}

@keyframes pulse-recording {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Next Actions ─────────────────────────────── */

.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--grey-400);
  text-decoration: none;
  transition: background 0.1s;
}

.action-item:hover {
  background: var(--bg-hover);
}

.action-item + .action-item {
  border-top: 1px solid var(--border-subtle);
}

/* ── Schedule Items (Home Page) ───────────────── */

.schedule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  flex-shrink: 0;
}

.schedule-content {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.schedule-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.schedule-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-title:hover {
  color: var(--accent);
}

.schedule-company {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Card Link (clickable cards) ─────────────── */

.card-link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s, background 0.1s;
  cursor: pointer;
}

.card-link:hover {
  border-color: var(--border-active);
  background: var(--bg-elevated);
}

/* ── Badge Variants ──────────────────────────── */

.badge-yellow {
  background: var(--yellow-100);
  color: var(--yellow-400);
}

/* ── Responsive ────────────────────────────────── */

@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .map-panel { width: 280px; }
}

/* ── Tablet ───────────────────────────────────── */

@media (max-width: 1024px) and (min-width: 769px) {
  .sidebar {
    width: 180px;
  }

  .main-content {
    margin-left: 180px;
    padding: 14px 18px;
  }

  .grid-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile ───────────────────────────────────── */

@media (max-width: 768px) {
  .shell {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    bottom: 0;
    width: 240px;
    z-index: 1000;
    transition: left 0.2s ease;
  }

  .sidebar.open {
    left: 0;
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .sidebar-overlay.show {
    display: block;
  }

  .main-content {
    margin-left: 0;
    padding: 12px 14px;
    padding-top: 52px;
  }

  .mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: var(--grey-100);
    border-bottom: 1px solid var(--grey-300);
    align-items: center;
    padding: 0 14px;
    z-index: 998;
    gap: 10px;
  }

  .mobile-menu-btn {
    background: none;
    border: none;
    color: var(--grey-900);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
  }

  .mobile-brand {
    font-size: 13px;
    font-weight: 600;
    color: var(--grey-900);
  }

  /* Grids stack — but metrics stay 2-col */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Metric counters wrap */
  .metric-counters {
    flex-wrap: wrap;
  }

  .metric-counter {
    min-width: calc(50% - 6px);
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(50% - 6px);
  }

  /* Tables scroll */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 500px;
  }

  /* Page title */
  .page-title h2 {
    font-size: 20px;
  }

  /* Cards */
  .card {
    padding: 10px 12px;
  }

  /* Kanban horizontal scroll */
  .kanban {
    overflow-x: auto;
    flex-direction: row;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column {
    min-width: 200px;
    max-width: 240px;
  }

  /* Stage bar compact */
  .stage-bar {
    flex-wrap: wrap;
  }

  /* Priority items compact */
  .priority-item {
    padding: 6px 8px;
  }

  /* Agent cards compact */
  .agent-card {
    padding: 8px 10px;
  }

  /* Role cards compact */
  .role-card {
    padding: 10px 12px;
  }

  .role-avatar {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  /* Map layout mobile */
  .map-shell {
    flex-direction: column;
    height: auto;
  }

  .map-canvas {
    min-height: 300px;
  }

  .map-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    max-height: 300px;
  }
}

/* ── Very small screens ───────────────────────── */

@media (max-width: 480px) {
  .metric-counter {
    min-width: 100%;
    flex: 0 0 100%;
  }

  .page-title {
    flex-direction: column;
    gap: 8px;
  }

  .detail-header {
    flex-direction: column;
  }

  .detail-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Desktop: hide mobile header ──────────────── */

@media (min-width: 769px) {
  .mobile-header {
    display: none;
  }

  .sidebar-overlay {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════
   COMMAND PALETTE
   ══════════════════════════════════════════════════ */

.palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 140px);
  animation: fadeIn 0.1s ease-out;
}

.palette {
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  background: var(--grey-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.palette-icon {
  font-size: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.palette-input {
  flex: 1 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
}

.palette-input::placeholder {
  color: var(--text-tertiary);
}

.palette-kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--grey-300);
  color: var(--text-tertiary);
  border: 1px solid var(--grey-400);
  flex-shrink: 0;
}

.palette-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 4px;
}

.palette-list::-webkit-scrollbar { width: 3px; }
.palette-list::-webkit-scrollbar-thumb { background: var(--grey-400); border-radius: 2px; }

.palette-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.06s;
}

.palette-item:hover,
.palette-item.selected {
  background: var(--bg-hover);
}

.palette-item.selected {
  background: var(--blue-50);
}

.palette-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--grey-200);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.palette-item.selected .palette-item-icon {
  background: var(--blue-100);
  color: var(--blue-300);
}

.palette-item-label {
  flex: 1 1;
  font-weight: 500;
}

.palette-item-cat {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.palette-footer {
  display: flex;
  gap: 14px;
  padding: 6px 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 10px;
  color: var(--text-tertiary);
}

.palette-footer kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 0 3px;
  border-radius: var(--radius-sm);
  background: var(--grey-300);
  border: 1px solid var(--grey-400);
  margin-right: 2px;
}

/* Command Palette — Create Forms */

.palette-form {
  padding: 12px 14px;
}

.palette-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.palette-form-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Palette — Entity search results */

.palette-group-header {
  padding: 4px 10px 2px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.palette-item-content {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.palette-item-sublabel {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--grey-400);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: paletteSpinAnim 0.5s linear infinite;
  flex-shrink: 0;
}

@keyframes paletteSpinAnim {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════
   NOTIFICATIONS
   ══════════════════════════════════════════════════ */

.notif-wrap {
  position: relative;
}

.notif-bell {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.1s, background 0.1s;
}

.notif-bell:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.notif-bell.urgent {
  color: var(--red-400);
}

.notif-bell-icon {
  font-size: 16px;
  line-height: 1;
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--blue-400);
  color: white;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-badge.urgent {
  background: var(--red-500);
  animation: notifPulse 2s ease-in-out infinite;
}

@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.notif-panel {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 320px;
  max-height: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1100;
  animation: fadeIn 0.1s ease-out;
}

.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.notif-dismiss-all {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 10px;
  font-family: var(--font);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius);
}

.notif-dismiss-all:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.notif-panel-list {
  overflow-y: auto;
  flex: 1 1;
}

.notif-panel-list::-webkit-scrollbar { width: 3px; }
.notif-panel-list::-webkit-scrollbar-thumb { background: var(--grey-400); border-radius: 2px; }

.notif-empty {
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: none;
  color: var(--text-primary);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: background 0.06s;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: var(--bg-hover);
}

.notif-item-icon {
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.notif-item-content {
  flex: 1 1;
  min-width: 0;
}

.notif-item-title {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item-dismiss {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s;
  flex-shrink: 0;
}

.notif-item:hover .notif-item-dismiss {
  opacity: 1;
}

.notif-item-dismiss:hover {
  color: var(--text-primary);
}

/* Sidebar footer for bell */
.sidebar-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Mobile notification panel ─────────────────── */

@media (max-width: 768px) {
  .notif-panel {
    position: fixed;
    bottom: 60px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 50vh;
  }
}

/* ══════════════════════════════════════════════════
   VOICE COMMAND
   ══════════════════════════════════════════════════ */

.voice-btn {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.voice-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-elevated);
}

.voice-btn.listening {
  border-color: var(--red-400);
  background: var(--red-50);
  color: var(--red-400);
}

@keyframes voicePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

.voice-pulse {
  animation: voicePulse 1s ease-in-out infinite;
  color: var(--red-400);
  font-size: 18px;
}

.voice-overlay {
  position: fixed;
  bottom: 130px;
  right: 16px;
  z-index: 901;
  animation: fadeIn 0.15s ease-out;
}

.voice-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  min-width: 200px;
  max-width: 320px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@keyframes listeningRing {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.voice-listening-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red-100);
  border: 2px solid var(--red-400);
  animation: listeningRing 1.5s ease-out infinite;
}

.voice-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.voice-transcript {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  max-width: 260px;
}

.voice-success { color: var(--green-400); }
.voice-error { color: var(--red-400); }

.voice-confirm-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* Voice text fallback */

.voice-text-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 100px;
}

.voice-text-form {
  display: flex;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  width: 360px;
  max-width: calc(100vw - 32px);
}

.voice-text-input {
  flex: 1 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
}

.voice-text-input:focus {
  border-color: var(--accent);
}

.voice-text-input::placeholder {
  color: var(--text-tertiary);
}

/* ══════════════════════════════════════════════════
   OPERATOR BAR (Mobile bottom bar)
   ══════════════════════════════════════════════════ */

.operator-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--grey-1);
  border-top: 1px solid var(--border-subtle);
  z-index: 950;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.op-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-family: var(--font);
  cursor: pointer;
  padding: 4px 12px;
  transition: color 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.op-btn.active {
  color: var(--accent);
}

.op-btn:hover {
  color: var(--text-primary);
}

.op-icon {
  font-size: 18px;
  line-height: 1;
}

.op-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.op-btn-center {
  position: relative;
}

.op-icon-plus {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

@media (max-width: 768px) {
  .operator-bar {
    display: flex;
  }

  .main-content {
    padding-bottom: 70px !important;
  }

  .voice-btn {
    bottom: 70px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .voice-overlay {
    bottom: 116px;
    right: 12px;
  }

  /* Tighter action items on mobile */
  .action-item {
    padding: 7px 10px;
    gap: 8px;
  }

  .action-item > div > div:first-child {
    font-size: 12px !important;
  }

  .action-item > div > div:last-child {
    font-size: 10px !important;
  }

  /* Schedule items tighter */
  .schedule-time {
    min-width: 50px;
    font-size: 10px;
  }

  .schedule-company {
    display: none;
  }

  /* Sidebar footer notification bell */
  .sidebar-footer {
    display: none;
  }
}

/* ── Focus visible states for keyboard users ───── */

.btn:focus-visible,
.nav-link:focus-visible,
.card-link:focus-visible,
.palette-item:focus-visible,
.notif-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Smooth page transitions ─────────────────── */

.main-content {
  animation: pageIn 0.15s ease-out;
}

@keyframes pageIn {
  from { opacity: 0.6; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   OFFICE VIEW — Isometric Game World
   ═══════════════════════════════════════════════════ */

/* ── View Toggle ─────────────────────────────────── */

.office-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--grey-200);
  border-radius: 2px;
  padding: 2px;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 12px;
}

.office-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.office-toggle-btn:hover {
  color: var(--text-primary);
}

.office-toggle-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.office-toggle-icon {
  font-size: 13px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════
   CANVAS HYBRID OFFICE WORLD
   ═══════════════════════════════════════════════════ */

.office-world {
  position: relative;
  background: #06060a;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  min-height: 700px;
}

.office-world-immersive {
  position: fixed;
  inset: 0;
  z-index: 9999;
  min-height: 100vh;
  border-radius: 0;
  border: none;
}

.office-canvas {
  display: block;
  width: 100%;
}

.office-hud-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.office-hud-overlay > * { pointer-events: none; }
.office-hud-overlay .office-qbar,
.office-hud-overlay .office-qbar-btn,
.office-hover-card,
.office-hover-action-btn { pointer-events: auto; }

/* ── Header ─────────────────────────────────────── */

.office-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 21;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  pointer-events: none;
}

.office-header-left { display: flex; align-items: center; gap: 10px; }

.office-header-brand {
  font-size: 18px;
  font-weight: 900;
  color: rgba(250,204,21,0.6);
  text-shadow: 0 0 20px rgba(250,204,21,0.2);
}

.office-header-title {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.25);
  font-family: var(--font-mono);
}

.office-header-center { position: absolute; left: 50%; transform: translateX(-50%); }

.office-header-op {
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(74,222,128,0.3);
  font-family: var(--font-mono);
  animation: opPulse 3s ease-in-out infinite;
}

@keyframes opPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.office-header-right { display: flex; align-items: center; gap: 8px; }

.office-header-agents {
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
  font-family: var(--font-mono);
}

.office-header-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* ── HUD Overlays ──────────────────────────────── */

/* Quick action bar */
.office-qbar {
  position: absolute;
  z-index: 30;
  display: flex;
  gap: 3px;
  transform: translateX(-50%);
  animation: qbarIn 0.15s ease-out;
}

@keyframes qbarIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.office-qbar-btn {
  background: rgba(8,8,14,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  color: rgba(255,255,255,0.7);
  font-size: 8px;
  font-weight: 600;
  font-family: var(--font);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.office-qbar-btn:hover {
  background: rgba(59,130,246,0.2);
  border-color: rgba(59,130,246,0.4);
  color: #f5f5f7;
}

/* Nameplate */
.office-nameplate {
  position: absolute;
  z-index: 30;
  text-align: center;
  width: 88px;
  padding: 3px 8px 2px;
  background: rgba(0,0,0,0.8);
  border: 1px solid;
  border-radius: 2px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  pointer-events: none;
  transform: translateX(-50%);
}

.office-nameplate-name {
  display: block;
  font-size: 8px;
  font-weight: 700;
  color: #f5f5f7;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.office-nameplate-status {
  display: block;
  font-size: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Activity tag */
.office-activity-tag {
  position: absolute;
  z-index: 30;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  border: 1px solid;
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 7px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  pointer-events: none;
}

.office-activity-dot {
  width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
  animation: activityPulse 1.5s ease-in-out infinite;
}

@keyframes activityPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Queue bubble */
.office-bubble {
  position: absolute;
  z-index: 30;
  display: flex; align-items: center; gap: 3px;
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 2px 7px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  white-space: nowrap;
}

.office-bubble-count { font-size: 10px; font-weight: 700; font-family: var(--font-mono); }

.office-bubble-urgent {
  font-size: 8px; font-weight: 700;
  color: #f87171;
  background: rgba(248,113,113,0.15);
  padding: 0 4px;
  border-radius: 4px;
  animation: urgentFlash 1.5s ease-in-out infinite;
}

@keyframes urgentFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ── Wall Data Displays (OWD) ──────────────────── */

.owd {
  position: absolute;
  z-index: 30;
  background: rgba(6,6,10,0.92);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  padding: 6px 8px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  pointer-events: none;
  min-height: 36px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.owd-boss { padding: 8px 10px; }
.owd-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.owd-title { font-size: 7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-mono); }
.owd-badge { font-size: 7px; font-weight: 600; color: rgba(255,255,255,0.35); font-family: var(--font-mono); margin-left: auto; }
.owd-brand { font-size: 10px; font-weight: 900; color: rgba(250,204,21,0.4); line-height: 1; }
.owd-body { display: flex; flex-direction: column; gap: 2px; }
.owd-row { display: flex; align-items: center; gap: 4px; font-size: 8px; }
.owd-label { width: 58px; font-size: 7px; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owd-bar { flex: 1 1; height: 3px; background: rgba(255,255,255,0.06); border-radius: 1px; overflow: hidden; }
.owd-bar > div { height: 100%; border-radius: 1px; transition: width 0.4s ease; }
.owd-count { font-size: 8px; font-weight: 700; font-family: var(--font-mono); color: rgba(255,255,255,0.6); width: 14px; text-align: right; }
.owd-val { font-size: 7px; font-weight: 600; font-family: var(--font-mono); color: rgba(255,255,255,0.3); width: 32px; text-align: right; }
.owd-empty { font-size: 8px; color: rgba(255,255,255,0.2); font-style: italic; padding: 2px 0; }
.owd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 6px 8px; gap: 6px 8px; }
.owd-metrics-compact { gap: 4px 6px; }
.owd-metric { display: flex; flex-direction: column; gap: 1px; }
.owd-metric-label { font-size: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.3); font-family: var(--font-mono); }
.owd-metric-value { font-size: 11px; font-weight: 700; font-family: var(--font-mono); color: #f5f5f7; }
.owd-metric-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 1px; overflow: hidden; margin-top: 1px; }
.owd-metric-bar > div { height: 100%; border-radius: 1px; transition: width 0.4s ease; }
.owd-agents-dots { display: flex; gap: 3px; margin-top: 2px; }
.owd-dot { width: 5px; height: 5px; border-radius: 50%; }
.owd-task-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
.owd-task-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.owd-task-text { font-size: 7px; color: rgba(255,255,255,0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Ticker ──────────────────────────────────────── */

.office-ticker {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  z-index: 21;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 20px;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.03);
  overflow: hidden;
}

.office-ticker-marker { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }

.office-ticker-text {
  font-size: 9px; font-weight: 500;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  animation: tickerFade 0.4s ease-out;
}

@keyframes tickerFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Status Bar ──────────────────────────────────── */

.office-statusbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 21;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  background: rgba(0,0,0,0.7);
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 8px; font-weight: 600;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.06em;
}

.office-statusbar-left { display: flex; align-items: center; gap: 6px; }
.office-statusbar-center { position: absolute; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.1); letter-spacing: 0.14em; font-size: 7px; }
.office-statusbar-right { display: flex; align-items: center; gap: 12px; }
.office-statusbar-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 900px) {
  .office-header-center { display: none; }
}

@media (max-width: 640px) {
  .office-statusbar-center { display: none; }
}

@media (max-width: 480px) {
  .office-view-toggle { width: 100%; }
  .office-toggle-btn { flex: 1 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════
   IMMERSIVE MODE
   ═══════════════════════════════════════════════════ */

.agent-hq-immersive {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #06060a;
}

.office-immersive-btn {
  margin-left: auto;
  background: rgba(250,204,21,0.06) !important;
  border: 1px solid rgba(250,204,21,0.15) !important;
  color: rgba(250,204,21,0.6) !important;
}

.office-immersive-btn:hover {
  background: rgba(250,204,21,0.12) !important;
  color: rgba(250,204,21,0.85) !important;
}

.office-immersive-exit {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10001;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 6px 14px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: all 0.15s ease;
  letter-spacing: 0.06em;
}

.office-immersive-exit:hover {
  background: rgba(248,113,113,0.15);
  border-color: rgba(248,113,113,0.4);
  color: #f87171;
}

.office-header-immersive {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  padding: 12px 24px;
}

/* ── Camera Controls ──────────────────────────────── */

.office-camera-controls {
  position: absolute;
  bottom: 52px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 20;
  pointer-events: auto;
}

.office-cam-btn {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  background: rgba(0,0,0,0.6);
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.office-cam-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
}

.office-cam-zoom {
  font-size: 8px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
  padding: 0 4px;
  min-width: 32px;
  text-align: center;
}

.office-cam-reset {
  font-size: 14px;
  margin-left: 2px;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes contextIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.office-hover-card {
  position: absolute;
  z-index: 40;
  background: rgba(8,8,14,0.95);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  width: 240px;
  padding: 10px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  pointer-events: auto;
  animation: fadeSlideIn 0.15s ease-out;
}

.office-hover-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.office-hover-icon {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.office-hover-name {
  font-weight: 700;
  font-size: 12px;
  font-family: var(--font);
  color: #f5f5f7;
}

.office-hover-status {
  font-weight: 600;
  font-size: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.office-hover-kpis {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
  margin-bottom: 6px;
}

.office-hover-kpi-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.office-hover-kpi-label {
  font-weight: 600;
  font-size: 7px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.4);
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-hover-kpi-bar {
  flex: 1 1;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 1px;
  overflow: hidden;
}

.office-hover-kpi-bar > div {
  height: 100%;
  border-radius: 1px;
  transition: width 0.3s;
}

.office-hover-kpi-pct {
  font-weight: 700;
  font-size: 8px;
  font-family: var(--font-mono);
  width: 28px;
  text-align: right;
}

.office-hover-task {
  font-weight: 400;
  font-size: 8px;
  font-family: var(--font);
  color: rgba(255,255,255,0.5);
  padding: 2px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 4px;
}

.office-hover-actions {
  display: flex;
  gap: 3px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
}

.office-hover-action-btn {
  background: rgba(8,8,14,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  color: rgba(255,255,255,0.7);
  font-size: 9px;
  font-weight: 600;
  font-family: var(--font);
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.office-hover-action-btn:hover {
  background: rgba(59,130,246,0.2);
  border-color: rgba(59,130,246,0.4);
  color: #f5f5f7;
}

.office-context-menu {
  position: fixed;
  z-index: 10002;
  background: rgba(8,8,14,0.96);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  min-width: 180px;
  padding: 4px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  animation: contextIn 0.1s ease-out;
}

.office-ctx-item {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 11px;
  font-family: var(--font);
  color: rgba(255,255,255,0.7);
  transition: background 0.1s;
}

.office-ctx-item:hover {
  background: rgba(255,255,255,0.06);
}

.office-ctx-item-icon {
  width: 14px;
  text-align: center;
  font-size: 11px;
  flex-shrink: 0;
}

.office-ctx-item-label {
  flex: 1 1;
}

.office-ctx-item-shortcut {
  font-weight: 500;
  font-size: 9px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.25);
}

.office-ctx-separator {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 3px 0;
}

.office-ctx-header {
  padding: 4px 12px;
  font-weight: 600;
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.office-music-player {
  position: absolute;
  z-index: 35;
  background: rgba(8,8,14,0.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  width: 220px;
  padding: 8px;
}

.office-music-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.office-music-title {
  font-weight: 700;
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.office-music-embed {
  width: 100%;
  height: 80px;
  border-radius: 2px;
  overflow: hidden;
}

.office-music-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.office-music-btn {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.office-music-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
}

/* ── CEO Command Board ──────────────────────── */
.ceo-command-board {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(10, 10, 20, 0.95);
  border: 1px solid rgba(250, 204, 21, 0.15);
  border-radius: 4px;
  z-index: 100;
  font-family: Inter, sans-serif;
  color: #f5f5f7;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.ceo-command-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(250, 204, 21, 0.08);
}
.ceo-command-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ceo-command-h {
  font-size: 20px;
  font-weight: 900;
  color: rgba(250, 204, 21, 0.5);
}
.ceo-command-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(250, 204, 21, 0.4);
}
.ceo-command-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.ceo-command-close:hover { color: rgba(255, 255, 255, 0.7); }
.ceo-command-metrics {
  display: flex;
  gap: 0;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ceo-metric {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ceo-metric-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}
.ceo-metric-value {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
.ceo-metric-target {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono, monospace);
}
.ceo-metric-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
}
.ceo-metric-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 1px;
  margin-top: 4px;
  overflow: hidden;
}
.ceo-metric-bar > div {
  height: 100%;
  border-radius: 1px;
  transition: width 0.3s ease;
}
.ceo-team-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}
.ceo-team-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.ceo-team-agent {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  flex-shrink: 0;
}
.ceo-team-agent:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.ceo-team-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ceo-team-name {
  font-size: 9px;
  font-weight: 600;
}
.ceo-team-count {
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 2px;
}
.ceo-priorities, .ceo-approvals {
  padding: 12px 18px;
}
.ceo-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ceo-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(250, 204, 21, 0.4);
}
.ceo-section-count {
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 2px;
}
.ceo-empty {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  padding: 8px 0;
}
.ceo-priority-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.ceo-priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.ceo-priority-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ceo-priority-title {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.ceo-priority-suggested {
  font-size: 9px;
  font-weight: 600;
}
.ceo-assign-btn {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 2px;
  border: 1px solid rgba(250, 204, 21, 0.2);
  background: rgba(250, 204, 21, 0.06);
  color: rgba(250, 204, 21, 0.7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ceo-assign-btn:hover {
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.35);
  color: rgba(250, 204, 21, 0.9);
}
.ceo-assign-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.ceo-approval-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
}
.ceo-approval-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #facc15;
  flex-shrink: 0;
}
.ceo-approval-title {
  flex: 1 1;
  color: rgba(255, 255, 255, 0.75);
}
.ceo-approval-type {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: capitalize;
}

/* ══════════════════════════════════════════════════
   VICTOR — Command Desk Styles
   ══════════════════════════════════════════════════ */

.victor-layout {
  width: 100vw;
  height: 100vh;
  background: var(--grey-50);
  overflow: hidden;
}

.victor-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

/* ── Header ─────────────────────────────────── */

.victor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.victor-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  letter-spacing: -0.5px;
}

.victor-header-text {
  display: flex;
  flex-direction: column;
}

.victor-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--grey-900);
}

.victor-status {
  font-size: 11px;
  color: var(--grey-500);
}

/* ── Messages ───────────────────────────────── */

.victor-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-300) transparent;
}

.victor-empty {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0.7;
}

.victor-empty-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 28px;
  color: #fff;
  margin-bottom: 8px;
}

.victor-empty h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--grey-800);
  margin: 0;
}

.victor-empty p {
  font-size: 13px;
  color: var(--grey-500);
  margin: 0;
  text-align: center;
  max-width: 300px;
}

/* ── Message Rows ───────────────────────────── */

.victor-message {
  display: flex;
  gap: 8px;
  max-width: 95%;
}

.victor-message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.victor-message-victor {
  align-self: flex-start;
}

.victor-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Bubbles ────────────────────────────────── */

.victor-bubble {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 100%;
}

.victor-bubble-user {
  background: var(--blue-500);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.victor-bubble-victor {
  background: var(--grey-200);
  color: var(--grey-900);
  border-bottom-left-radius: 4px;
}

.victor-bubble-error {
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

.victor-bubble-confirm {
  border: 1px solid rgba(234, 179, 8, 0.3);
  background: rgba(234, 179, 8, 0.08);
}

.victor-bubble-content {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Typing Indicator ───────────────────────── */

.victor-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.victor-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grey-500);
  animation: victor-bounce 1.4s ease-in-out infinite;
}

.victor-typing span:nth-child(2) { animation-delay: 0.16s; }
.victor-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes victor-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ── Cards ──────────────────────────────────── */

.victor-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.victor-card {
  background: var(--grey-100);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
}

.victor-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.victor-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-900);
}

.victor-card-subtitle {
  font-size: 11px;
  color: var(--grey-500);
}

.victor-card-metrics {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.victor-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}

.victor-metric-label {
  color: var(--grey-600);
}

.victor-metric-value {
  color: var(--grey-900);
  font-weight: 600;
}

.metric-error .victor-metric-value { color: var(--red-400); }
.metric-warning .victor-metric-value { color: var(--yellow-400); }
.metric-success .victor-metric-value { color: var(--green-400); }
.metric-info .victor-metric-value { color: var(--blue-300); }

.victor-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.victor-card-action-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--blue-50);
  color: var(--blue-300);
  border: 1px solid rgba(59, 130, 246, 0.2);
  cursor: pointer;
  transition: all 0.15s;
}

.victor-card-action-btn:hover {
  background: var(--blue-100);
}

/* ── Input Area ─────────────────────────────── */

.victor-input-area {
  padding: 8px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.victor-suggestions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.victor-suggestion-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 16px;
  background: var(--grey-200);
  color: var(--grey-700);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.victor-suggestion-chip:hover {
  background: var(--grey-300);
  color: var(--grey-800);
}

.victor-suggestion-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.victor-input-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.victor-text-input {
  flex: 1 1;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--grey-200);
  color: var(--grey-900);
  border: 1px solid rgba(255, 255, 255, 0.08);
  outline: none;
  transition: border-color 0.15s;
  font-family: 'Inter', sans-serif;
}

.victor-text-input:focus {
  border-color: var(--blue-400);
}

.victor-text-input::placeholder {
  color: var(--grey-400);
}

.victor-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--blue-500);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.victor-send-btn:hover:not(:disabled) {
  background: var(--blue-400);
}

.victor-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Victor mobile responsiveness ───────────── */

@media (max-width: 640px) {
  .victor-container {
    max-width: 100%;
  }

  .victor-bubble {
    max-width: 90%;
  }

  .victor-message {
    max-width: 100%;
  }
}


/* ══════════════════════════════════════════════════
   VICTOR COMMAND DESK — Cinematic + Functional
   ══════════════════════════════════════════════════

   Five-zone architecture:
   1. cd-presence   — Victor presence bar
   2. cd-command    — primary command input + voice
   3. cd-actions    — contextual action strip (3-5 chips)
   4. cd-heartbeat  — live status feed (always visible)
   5. cd-utility    — subtle footer rail

   Cinematic atmosphere + useful dashboard signal.
   ══════════════════════════════════════════════════ */

/* ── Layout Shell ────────────────────────────── */

.cd-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text-primary);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Cinematic Background ────────────────────── */

.cd-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 15%, rgba(99, 102, 241, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 75%, rgba(251, 146, 60, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 50% 40%, rgba(30, 30, 50, 0.4) 0%, transparent 70%),
    var(--bg);
}

/* ── Zone 1: Presence ────────────────────────── */

.cd-presence {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 28px 0;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* ── Victor Presence (vp-) ────────────────────── */

.vp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  flex: 1 1;
  min-width: 0;
}

.vp-mark-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.vp-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.vp-online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-400);
  border: 2px solid var(--bg);
  box-sizing: content-box;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.vp-attention {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--red-400);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 1.5px solid var(--bg);
  box-sizing: content-box;
}

.vp-text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
  min-width: 0;
}

.vp-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.vp-status {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-mode-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Density: calm hides extras */
.vp-calm .vp-status { display: none; }
.vp-calm .vp-mode-pill { display: none; }

.cd-settings-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  transition: color 0.15s;
  border-radius: 6px;
  flex-shrink: 0;
}

.cd-settings-btn:hover {
  color: var(--text-secondary);
}

/* ── Zone 2: Command ─────────────────────────── */

.cd-command {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 28px 28px 0;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.cd-command-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cd-command-input {
  flex: 1 1;
  font-size: 26px;
  font-weight: 300;
  padding: 12px 0;
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  outline: none;
  font-family: var(--font);
  letter-spacing: -0.015em;
  caret-color: var(--accent);
  transition: border-color 0.2s;
}

.cd-command-input:focus {
  border-bottom-color: var(--accent);
}

.cd-command-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 300;
}

.cd-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.cd-send-btn:hover {
  background: var(--accent-hover);
}

/* ── Zone 3: Action Strip ────────────────────── */

.cd-actions {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 14px 28px 0;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cd-actions::-webkit-scrollbar { display: none; }

.cd-action-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 16px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.cd-action-chip:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}

.cd-action-chip:active {
  transform: scale(0.97);
}

.cd-action-more {
  color: var(--text-tertiary);
  border-style: dashed;
}

.cd-action-more:hover {
  border-style: solid;
  color: var(--text-secondary);
}

/* ── Zone 3.5: Mode Summary ─────────────────── */

.cd-summary {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 14px 28px 0;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* ── Mode Summary (ms-) ─────────────────────── */

.ms-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ms-row-secondary {
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}

.ms-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: var(--grey-200);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: var(--font);
  flex: 1 1;
  min-width: 70px;
}

.ms-chip:hover {
  background: var(--grey-300);
  border-color: var(--grey-400);
}

.ms-chip-blue { border-left: 2px solid var(--blue-400); }
.ms-chip-teal { border-left: 2px solid var(--teal-400); }
.ms-chip-green { border-left: 2px solid var(--green-400); }
.ms-chip-orange { border-left: 2px solid var(--orange-400); }
.ms-chip-yellow { border-left: 2px solid #eab308; }
.ms-chip-red { border-left: 2px solid var(--red-400); }

.ms-chip-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.ms-chip-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ms-chip-amount {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* Skeleton loader */
.ms-skeleton {
  background: var(--grey-200);
  border-color: transparent;
  min-height: 56px;
  animation: hb-skeleton-shimmer 1.5s ease-in-out infinite;
}

.ms-skeleton:nth-child(2) { animation-delay: 0.1s; }
.ms-skeleton:nth-child(3) { animation-delay: 0.2s; }

/* Empty state */
.ms-empty-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}

.ms-empty-icon {
  font-size: 14px;
  color: var(--text-tertiary);
}

.ms-empty-text {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Appointments list (pro density) */
.ms-appointments {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

.ms-appointment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.ms-appointment-time {
  color: var(--text-tertiary);
  font-weight: 500;
  flex-shrink: 0;
  width: 50px;
}

.ms-appointment-title {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quick links (pro density) */
.ms-quick-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ms-link {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 4px 10px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ms-link:hover {
  background: var(--blue-50);
  color: var(--accent-hover);
}

/* Metric display */
.ms-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ms-metric-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ms-metric-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Zone 4: Heartbeat ───────────────────────── */

.cd-heartbeat {
  position: relative;
  z-index: 1;
  flex: 1 1;
  overflow-y: auto;
  padding: 20px 28px 16px;
  max-width: 640px;
  width: 100%;
  margin: 20px auto 0;
  scrollbar-width: none;
  border-top: 1px solid var(--border-subtle);
}

.cd-heartbeat::-webkit-scrollbar { display: none; }

/* ── Heartbeat Feed (hb-) ────────────────────── */

.hb-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hb-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hb-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 0 6px;
}

.hb-label-amber { color: #f59e0b; }
.hb-label-blue { color: var(--blue-300); }
.hb-label-green { color: var(--green-400); }

.hb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: opacity 0.12s;
}

.hb-item:hover {
  opacity: 0.8;
}

.hb-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hb-dot-amber { background: #f59e0b; }
.hb-dot-blue { background: var(--blue-400); }
.hb-dot-green { background: var(--green-400); }

.hb-dot-pulse {
  animation: hb-pulse 2s ease-in-out infinite;
}

@keyframes hb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Progress indicators — 3 states */
.hb-progress {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Waiting: pulsing amber dot */
.hb-progress-waiting {
  width: 14px;
  height: 14px;
}

.hb-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  animation: hb-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.35);
}

/* In progress: indeterminate bar */
.hb-progress-active {
  width: 18px;
  height: 14px;
}

.hb-progress-bar {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--grey-200);
  position: relative;
  overflow: hidden;
}

.hb-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: var(--blue-400);
  border-radius: 2px;
  animation: hb-indeterminate 1.4s ease-in-out infinite;
}

@keyframes hb-indeterminate {
  0% { left: -50%; }
  100% { left: 100%; }
}

/* Complete: checkmark with fill */
.hb-progress-complete {
  width: 14px;
  height: 14px;
  color: var(--green-400);
  animation: hb-check-appear 0.3s ease-out;
}

@keyframes hb-check-appear {
  0% { opacity: 0; transform: scale(0.5); }
  60% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Automation nudge */
.hb-automate-nudge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--purple-400, #a78bfa);
  padding: 2px 0 2px 16px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}

.hb-automate-nudge:hover {
  color: var(--purple-300, #c4b5fd);
}

.hb-item-text {
  flex: 1 1;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb-item-done .hb-item-text {
  color: var(--text-secondary);
}

.hb-item-time {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Action pills */
.hb-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.12s;
}

.hb-pill:hover { opacity: 0.8; }

.hb-pill-blue {
  background: rgba(59, 130, 246, 0.12);
  color: var(--blue-300);
}

.hb-pill-teal {
  background: rgba(45, 212, 191, 0.12);
  color: var(--teal-400);
}

.hb-pill-orange {
  background: rgba(249, 115, 22, 0.12);
  color: var(--orange-400);
}

/* Done group with next-step */
.hb-done-group {
  display: flex;
  flex-direction: column;
}

/* Next step suggestion */
.hb-next-step {
  display: block;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  padding: 2px 0 2px 16px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}

.hb-next-step::before {
  content: '→ ';
  opacity: 0.5;
}

.hb-next-step:hover {
  color: var(--accent-hover);
}

/* More button */
.hb-more {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 4px 0 4px 16px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}

.hb-more:hover {
  color: var(--text-secondary);
}

/* Empty state — contextual suggestions */
.hb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0 12px;
  gap: 12px;
}

.hb-empty-icon {
  color: var(--green-400);
  opacity: 0.6;
}

.hb-empty-text {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

.hb-empty-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding-top: 4px;
}

.hb-empty-chip {
  background: var(--grey-200);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.hb-empty-chip:hover {
  background: var(--grey-300);
  color: var(--text-primary);
}

/* Loading skeleton */
.hb-skeleton-label {
  width: 60px;
  height: 11px;
  background: var(--grey-200);
  border-radius: 2px;
  margin-bottom: 8px;
  animation: hb-skeleton-shimmer 1.5s ease-in-out infinite;
}

.hb-skeleton-item {
  width: 100%;
  height: 32px;
  background: var(--grey-200);
  border-radius: 2px;
  margin-bottom: 4px;
  animation: hb-skeleton-shimmer 1.5s ease-in-out infinite;
}

.hb-skeleton-item:nth-child(3) { animation-delay: 0.15s; }

@keyframes hb-skeleton-shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.25; }
}

/* Legacy quiet state compat */
.hb-quiet {
  display: flex;
  align-items: center;
  padding: 24px 0;
}

.hb-quiet-text {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Zone 5: Utility Rail ────────────────────── */

.cd-utility {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 28px 16px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}

.cd-utility-spacer {
  flex: 1 1;
}

.cd-util-btn {
  position: relative;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  transition: color 0.15s;
  border-radius: 6px;
}

.cd-util-btn:hover {
  color: var(--text-secondary);
}

.cd-util-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red-400);
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.4);
}

/* ── Zone 5b: Media bar ────────────────────── */

.cd-media {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 28px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* ── Media Controls (mc-) ────────────────────── */

.mc-idle {
  color: var(--text-tertiary);
  opacity: 0.4;
  display: flex;
  align-items: center;
}

.mc-player {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
}

.mc-play-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.mc-play-btn:hover {
  color: var(--text-primary);
}

.mc-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mc-track-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-track-artist {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Voice Button (vb-) ──────────────────────── */

.vb-button {
  position: relative;
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  overflow: hidden;
}

.vb-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.vb-sm { width: 36px; height: 36px; border-radius: 10px; }
.vb-md { width: 44px; height: 44px; border-radius: 12px; }
.vb-lg { width: 52px; height: 52px; border-radius: 14px; }

.vb-listening {
  background: var(--red-50);
  border-color: var(--red-400);
  color: var(--red-400);
}

.vb-mic-icon { width: 20px; height: 20px; }

.vb-ripple {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--red-400);
  animation: vb-ripple-out 1.5s ease-out infinite;
  pointer-events: none;
}

.vb-ripple-delayed { animation-delay: 0.5s; }

@keyframes vb-ripple-out {
  0% { opacity: 0.5; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.4); }
}

.vb-bars {
  position: absolute;
  bottom: 4px;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 10px;
}

.vb-bars span {
  width: 2px;
  background: var(--red-400);
  border-radius: 1px;
  animation: vb-bar-bounce 0.6s ease-in-out infinite;
}

.vb-bars span:nth-child(1) { height: 4px; }
.vb-bars span:nth-child(2) { height: 8px; animation-delay: 0.15s; }
.vb-bars span:nth-child(3) { height: 5px; animation-delay: 0.3s; }
.vb-bars span:nth-child(4) { height: 7px; animation-delay: 0.1s; }

@keyframes vb-bar-bounce {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.3); }
}

/* ── Conversation Sheet (cs-) ────────────────── */

.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: cs-fade-in 0.2s ease;
}

@keyframes cs-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cs-sheet {
  width: 100%;
  max-width: 540px;
  height: 85vh;
  background: var(--bg-elevated);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cs-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Swipe-to-dismiss indicator */
.cs-swipe-bar {
  width: 36px;
  height: 4px;
  background: var(--grey-400);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
  opacity: 0.5;
}

@keyframes cs-slide-up {
  from { transform: translateY(100%); opacity: 0.8; }
  to { transform: translateY(0); opacity: 1; }
}

.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.cs-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-avatar {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #60a5fa, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  color: #fff;
}

.cs-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.cs-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  display: block;
}

.cs-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-tertiary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.cs-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.cs-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: none;
}

.cs-messages::-webkit-scrollbar { display: none; }

.cs-msg {
  display: flex;
  gap: 8px;
  max-width: 88%;
}

.cs-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.cs-msg-victor { align-self: flex-start; }

.cs-msg-avatar {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #60a5fa, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cs-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.cs-bubble-user {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.cs-bubble-victor {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.cs-bubble-error {
  background: var(--red-50);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.cs-bubble-confirm {
  background: var(--green-50);
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.cs-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.cs-msg-enter {
  animation: cs-msg-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cs-msg-pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cs-next-step {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px dashed rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}

.cs-next-step:hover { background: rgba(59, 130, 246, 0.12); }

.cs-automate-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--purple-50);
  border: 1px solid rgba(168, 85, 247, 0.12);
  border-radius: 8px;
  color: var(--purple-400);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.cs-automate-card:hover { background: rgba(168, 85, 247, 0.1); }

.cs-automate-title { display: block; font-weight: 600; }

.cs-automate-desc {
  display: block;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.cs-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
}

.cs-welcome-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #60a5fa, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.cs-welcome-text {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

.cs-welcome-chips {
  display: flex;
  gap: 6px;
}

.cs-suggestions {
  display: flex;
  gap: 6px;
  padding: 8px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.cs-suggestions::-webkit-scrollbar { display: none; }

.cs-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* ── Shared elements ─────────────────────────── */

.victor-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.victor-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: victor-typing-bounce 1.2s ease-in-out infinite;
}

.victor-typing span:nth-child(2) { animation-delay: 0.15s; }
.victor-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes victor-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.victor-suggestion-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 16px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.victor-suggestion-chip:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.victor-suggestion-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.victor-text-input {
  flex: 1 1;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  outline: none;
  font-family: var(--font);
  transition: border-color 0.15s;
}

.victor-text-input:focus { border-color: var(--accent); }
.victor-text-input::placeholder { color: var(--text-tertiary); }

.victor-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.victor-send-btn:hover { background: var(--accent-hover); }
.victor-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Victor Cards (inline in conversation) ───── */

.victor-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.victor-card {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.victor-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.victor-card-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.victor-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.victor-card-action {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
}

.victor-card-action:hover { color: var(--accent-hover); }

/* ── Compact nav for subpages ────────────────── */

.vp-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.vp-compact-back {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.15s;
}

.vp-compact-back:hover { color: var(--text-primary); }

.vp-compact-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Agent Team View (atv-) ──────────────────── */

.atv-container { padding: 0 16px; }

.atv-presence-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 16px;
}

.atv-presence-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.atv-mini-form { flex: 1 1; display: flex; }

.atv-mini-input {
  flex: 1 1;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  outline: none;
  font-family: var(--font);
}

.atv-mini-input:focus { border-color: var(--accent); }
.atv-mini-input::placeholder { color: var(--text-tertiary); }

.atv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.atv-card {
  padding: 14px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.atv-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.atv-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.atv-card-title-row {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.atv-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atv-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.atv-status-active {
  background: var(--green-400);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.atv-status-standby { background: var(--yellow-400); }
.atv-status-offline { background: var(--grey-400); }

.atv-action-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

.atv-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atv-quick-action {
  display: block;
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: all 0.12s;
}

.atv-quick-action:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ── Loading states ──────────────────────────── */

.vcd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
}

.vcd-loading-text {
  font-size: 14px;
  color: var(--text-tertiary);
}

.vcd-typing-indicator { display: flex; gap: 4px; }

.vcd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: victor-typing-bounce 1.2s ease-in-out infinite;
}

.vcd-dot:nth-child(2) { animation-delay: 0.15s; }
.vcd-dot:nth-child(3) { animation-delay: 0.3s; }

/* Legacy layout compat for subpages */
.vcd-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
}

.vcd-main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.vcd-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 0 16px;
  scrollbar-width: none;
}

.vcd-scroll::-webkit-scrollbar { display: none; }

/* ── Responsive ──────────────────────────────── */

/* ── Settings: System Status ────────────────── */

.vs-system-status {
  background: var(--grey-100);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: 14px 16px;
}

.vs-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vs-status-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.vs-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vs-badge-active {
  background: rgba(251, 146, 60, 0.15);
  color: var(--orange-400);
  border: 1px solid rgba(251, 146, 60, 0.25);
}

.vs-status-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── VictorSettings ─────────────────────────── */

.vs-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
  max-width: 520px;
  margin: 0 auto;
}

.vs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 24px;
}

.vs-back {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 8px 6px 2px;
  border-radius: 8px;
  transition: color 0.12s;
}

.vs-back:hover { color: var(--text-primary); }

.vs-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.vs-section {
  margin-bottom: 28px;
}

.vs-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.vs-section-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.4;
}

.vs-option-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vs-option-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.vs-option-card:hover {
  border-color: var(--border-hover, rgba(255,255,255,0.12));
}

.vs-option-active {
  border-color: var(--blue-400);
  background: rgba(59, 130, 246, 0.06);
}

.vs-option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.vs-option-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.vs-option-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--blue-300);
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.vs-option-badge-coming {
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.04);
}

/* Density grid */
.vs-density-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.vs-density-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.vs-density-card:hover {
  border-color: var(--border-hover, rgba(255,255,255,0.12));
}

.vs-density-active {
  border-color: var(--blue-400);
  background: rgba(59, 130, 246, 0.06);
}

.vs-density-icon {
  color: var(--text-secondary);
}

.vs-density-active .vs-density-icon {
  color: var(--blue-300);
}

.vs-density-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.vs-density-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Toggles */
.vs-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vs-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}

.vs-toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue-400);
}

/* Quick links */
.vs-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vs-quick-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s;
}

.vs-quick-link:hover {
  border-color: var(--blue-400);
}

.vs-quick-link svg { color: var(--text-secondary); }

/* Footer */
.vs-footer {
  padding: 24px 0 32px;
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 640px) {
  .cd-presence { padding: 12px 18px 0; }
  .cd-command { padding: 20px 18px 0; }
  .cd-command-input { font-size: 22px; }
  .cd-actions { padding: 10px 18px 0; }
  .cd-action-chip { padding: 5px 12px; font-size: 12px; min-height: 44px; }
  .cd-summary { padding: 10px 18px 0; }
  .cd-heartbeat { padding: 12px 18px 10px; margin-top: 10px; }
  .cd-utility { padding: 6px 18px 12px; }
  .cs-sheet { height: 92vh; }
  .vp-mark { width: 34px; height: 34px; border-radius: 9px; }
  .vp-mark-wrap { width: 34px; height: 34px; }

  /* Compact heartbeat on mobile */
  .hb-feed { gap: 10px; }
  .hb-section { gap: 0; }
  .hb-section-label { font-size: 10px; padding-bottom: 4px; }
  .hb-item { padding: 6px 0; gap: 8px; }
  .hb-item-text { font-size: 12px; }
  .hb-item-dot { width: 5px; height: 5px; }
  .hb-pill { font-size: 10px; padding: 2px 8px; }
  .hb-item-time { font-size: 10px; }
  .hb-next-step { font-size: 11px; padding: 4px 10px; }
  .hb-more { font-size: 11px; }
  .hb-empty-text { font-size: 12px; }
  .hb-empty-chip { font-size: 12px; }

  /* Compact summary chips on mobile */
  .ms-chip { min-height: 48px; padding: 8px 10px; }
  .ms-chip-value { font-size: 18px; }
  .ms-chip-label { font-size: 10px; }
  .ms-chip-amount { font-size: 10px; }
  .ms-appointment-item { font-size: 12px; }
  .ms-link { min-height: 36px; padding: 6px 12px; font-size: 12px; }

  /* Mobile touch targets — 44px minimum */
  .cd-settings-btn,
  .cd-util-btn,
  .cd-send-btn { min-width: 44px; min-height: 44px; }
  .hb-item { min-height: 44px; }
  .hb-pill { min-height: 32px; padding: 4px 12px; }
  .hb-next-step { min-height: 40px; }
  .hb-automate-nudge { min-height: 36px; }
  .victor-suggestion-chip { min-height: 40px; padding: 8px 16px; }
  .cs-next-step { min-height: 40px; }
  .cs-automate-card { min-height: 48px; }
  .vs-option-card { min-height: 56px; }
  .vs-density-card { min-height: 56px; }
  .vs-toggle-row { min-height: 48px; }
  .vs-quick-link { min-height: 44px; }

  /* Settings mobile */
  .vs-container { padding-left: 16px; padding-right: 16px; }
  .vs-density-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .vp-status { display: none; }
  .vp-mode-pill { display: none; }
  .cd-command-input { font-size: 18px; }
  .cd-action-chip { padding: 4px 10px; font-size: 11px; }
  .hb-item-text { font-size: 11px; }
  .ms-chip { min-height: 44px; }
}

/* ══════════════════════════════════════════════════
   VICTOR WORLD — Cinematic Foundation
   2026-03-15
   Tokens and shell for the standalone Victor route group.
   Extends the existing cd-* command desk styles.
   ══════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  --victor-bg-deep: #0a0c10;
  --victor-bg-mid: #111827;
  --victor-bg-warm: #1a1520;
  --victor-surface-glass: rgba(255, 255, 255, 0.06);
  --victor-surface-glass-hover: rgba(255, 255, 255, 0.12);
  --victor-surface-glass-active: rgba(255, 255, 255, 0.16);
  --victor-border-glass: rgba(255, 255, 255, 0.08);
  --victor-border-glass-hover: rgba(255, 255, 255, 0.15);
  --victor-text-primary: rgba(255, 255, 255, 0.95);
  --victor-text-secondary: rgba(255, 255, 255, 0.70);
  --victor-text-tertiary: rgba(255, 255, 255, 0.40);
  --victor-text-faint: rgba(255, 255, 255, 0.25);
  --victor-accent-blue: #4F7BF7;
  --victor-accent-green: #34D399;
  --victor-accent-amber: #F59E0B;
  --victor-accent-red: #EF4444;
  --victor-glow-warm: rgba(180, 130, 60, 0.15);
  --victor-glow-blue: rgba(79, 123, 247, 0.15);
  --victor-glow-cool: rgba(60, 80, 160, 0.06);
}

/* --- Victor world shell — wraps all /v routes --- */
.victor-world {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--victor-bg-deep);
  color: var(--victor-text-primary);
  position: relative;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Glass morphism utilities --- */
.cd-glass {
  background: var(--victor-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--victor-border-glass);
}

.cd-glass:hover {
  background: var(--victor-surface-glass-hover);
  border-color: var(--victor-border-glass-hover);
}

.cd-glass-strong {
  background: rgba(10, 12, 16, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--victor-border-glass);
}

/* --- Text shadow for overlaying ambient backgrounds --- */
.cd-text-shadow {
  text-shadow: 0 2px 20px rgba(0,0,0,0.7), 0 0 50px rgba(0,0,0,0.4);
}

.cd-text-shadow-strong {
  text-shadow: 0 2px 30px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════════
   CINEMATIC COMMAND DESK — Phase 2B Desktop Layout
   Reference A: hero-dominant, prompt at chest level,
   glass action buttons with icons, bottom command bar.
   Reference B: cinematic Victor, warm/cool office mood.
   ══════════════════════════════════════════════════ */

/* ── Main layout: full viewport, no scroll ──── */
.cin-layout {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--victor-text-primary);
}

/* ── Cinematic fallback gradient (behind hero) ── */
.cin-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 35% 45%, var(--victor-glow-warm) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 70% 35%, var(--victor-glow-cool) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.8) 0%, transparent 50%),
    linear-gradient(180deg, var(--victor-bg-deep) 0%, #12101a 40%, var(--victor-bg-warm) 60%, #0d0f14 100%);
}

/* ── Hero image — fills viewport ───────────── */
.cin-hero-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cin-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.cin-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(10,12,16,0.2) 0%,
      rgba(10,12,16,0.05) 20%,
      rgba(10,12,16,0.05) 40%,
      rgba(10,12,16,0.3) 55%,
      rgba(10,12,16,0.7) 75%,
      rgba(10,12,16,0.9) 90%,
      rgba(10,12,16,0.95) 100%
    ),
    linear-gradient(90deg, rgba(10,12,16,0.25) 0%, transparent 20%, transparent 80%, rgba(10,12,16,0.25) 100%);
}

/* ── Listening indicator — above prompt, below Victor's face ── */
.cin-listening-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(10, 12, 16, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  pointer-events: none;
}

.cin-listening-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
  animation: cin-listen-pulse 2s ease-in-out infinite;
}

@keyframes cin-listen-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 14px rgba(52, 211, 153, 0.7); }
}

.cin-listening-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

/* ── Layer 1: Top bar — matches Reference A ── */
.cin-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 32px;
  padding-top: env(safe-area-inset-top, 0);
  background: transparent;
}

.cin-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cin-topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--victor-text-primary);
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}

.cin-topbar-time {
  font-size: 13px;
  font-weight: 400;
  color: var(--victor-text-tertiary);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.cin-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cin-mode-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--victor-text-secondary);
  background: var(--victor-surface-glass);
  border: 1px solid var(--victor-border-glass);
  padding: 4px 12px;
  border-radius: 20px;
  text-shadow: none;
}

.cin-settings-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--victor-text-tertiary);
  display: flex;
  align-items: center;
  transition: color 0.15s;
  border-radius: 6px;
}

.cin-settings-btn:hover {
  color: var(--victor-text-secondary);
}

/* ── Main content zone — centered over Victor ── */
.cin-main-content {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 920px;
  padding: 0 24px;
  padding-bottom: 56px;
  padding-top: 16px;
}

/* ── Command bar — primary interaction ── */
.cin-command-bar-primary {
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(10, 12, 16, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 28px;
  transition: border-color 0.2s;
}

.cin-command-bar-primary:focus-within {
  border-color: rgba(255, 255, 255, 0.20);
}

.cin-cmd-pin {
  color: var(--victor-text-faint);
  flex-shrink: 0;
}

.cin-command-input {
  flex: 1 1;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  caret-color: var(--victor-accent-blue);
}

.cin-command-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.cin-cmd-send {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--victor-accent-blue);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.cin-cmd-send:hover {
  color: var(--victor-text-primary);
}

/* ── Action strip — compact row ── */
.cin-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.cin-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(20, 22, 30, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cin-action-btn:hover {
  background: rgba(30, 33, 45, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
}

.cin-action-btn:active {
  transform: scale(0.97);
}

/* Action icon colors */
.cin-action-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s ease;
}

/* Icon turns sky-blue on button hover */
.cin-action-btn:hover .cin-action-icon {
  color: #38bdf8;
}

.cin-icon-blue { color: #60a5fa; }
.cin-icon-teal { color: #2dd4bf; }
.cin-icon-green { color: #34d399; }
.cin-icon-purple { color: #a78bfa; }
.cin-icon-amber { color: #fbbf24; }
.cin-icon-red { color: #f87171; }

/* ── Connector-aware action states ── */
.cin-action-needs-connect {
  opacity: 0.55;
  border-style: dashed;
}
.cin-action-needs-connect:hover {
  opacity: 0.75;
}
.cin-connect-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 2px;
}
.cin-action-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Action Workflow Overlay ── */
.cin-workflow-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: cin-fade-in 0.15s ease;
}
.cin-workflow-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background: rgba(20, 22, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  animation: cin-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cin-workflow-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cin-workflow-title {
  flex: 1 1;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.cin-workflow-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
.cin-workflow-close:hover { color: rgba(255, 255, 255, 0.7); }
.cin-workflow-connect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(251, 191, 36, 0.08);
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
  font-size: 13px;
  color: rgba(251, 191, 36, 0.9);
}
.cin-workflow-connect-btn {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.cin-workflow-connect-btn:hover {
  background: rgba(251, 191, 36, 0.25);
}
.cin-workflow-form {
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cin-workflow-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cin-workflow-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cin-workflow-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.cin-workflow-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.cin-workflow-input:focus {
  border-color: rgba(96, 165, 250, 0.5);
}
.cin-workflow-textarea {
  resize: vertical;
  min-height: 72px;
}
.cin-workflow-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.cin-workflow-submit {
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #60a5fa;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.cin-workflow-submit:hover:not(:disabled) {
  background: rgba(96, 165, 250, 0.3);
}
.cin-workflow-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cin-workflow-escalate {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  font-family: inherit;
  transition: color 0.15s ease;
}
.cin-workflow-escalate:hover {
  color: rgba(255, 255, 255, 0.6);
}
@keyframes cin-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes cin-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Heartbeat tabs — 3 collapsible horizontal sections ── */
.cin-heartbeat-tabs {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 560px;
}

.cin-hb-tab {
  flex: 1 1;
  background: rgba(10, 12, 16, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.cin-hb-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cin-hb-tab-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.cin-hb-tab-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

.cin-hb-tab-label.amber { color: var(--victor-accent-amber, #fbbf24); }
.cin-hb-tab-label.blue { color: var(--victor-accent-blue, #60a5fa); }
.cin-hb-tab-label.green { color: var(--victor-accent-green, #34d399); }

.cin-hb-tab-count {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.cin-hb-tab-chevron {
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease;
  font-size: 10px;
}

.cin-hb-tab.expanded .cin-hb-tab-chevron {
  transform: rotate(180deg);
}

.cin-hb-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.cin-hb-tab.expanded .cin-hb-tab-content {
  max-height: 200px;
  overflow-y: auto;
}

.cin-hb-tab-content::-webkit-scrollbar { display: none; }

/* Items inside expanded tab */
.cin-hb-tab .hb-item-text { color: var(--victor-text-primary); }
.cin-hb-tab .hb-item-done .hb-item-text { color: var(--victor-text-secondary); }
.cin-hb-tab .hb-item-time { color: var(--victor-text-tertiary); }
.cin-hb-tab .hb-section-label { color: var(--victor-text-tertiary); }
.cin-hb-tab .hb-label-amber { color: var(--victor-accent-amber); }
.cin-hb-tab .hb-label-blue { color: var(--victor-accent-blue); }
.cin-hb-tab .hb-label-green { color: var(--victor-accent-green); }
.cin-hb-tab .hb-more { color: var(--victor-text-tertiary); }
.cin-hb-tab .hb-more:hover { color: var(--victor-text-secondary); }
.cin-hb-tab .hb-item { border-bottom: 1px solid rgba(255,255,255,0.04); padding: 8px 12px; }
.cin-hb-tab .hb-item:last-child { border-bottom: none; }
.cin-hb-tab .hb-progress-bar { background: rgba(255,255,255,0.08); }

/* ── Suggestion bar — in-flow ── */
.cin-suggestion-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  padding: 10px 16px;
  background: rgba(20, 22, 30, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.cin-suggestion-icon {
  flex-shrink: 0;
  color: var(--victor-accent-blue);
  display: flex;
  align-items: center;
}

.cin-suggestion-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--victor-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.cin-suggestion-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--victor-text-primary);
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cin-suggestion-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cin-suggestion-dismiss {
  background: none;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--victor-text-faint);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}

.cin-suggestion-dismiss:hover {
  color: var(--victor-text-secondary);
}

.cin-suggestion-act {
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.25);
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--victor-accent-blue);
  cursor: pointer;
  font-family: inherit;
  border-radius: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}

.cin-suggestion-act:hover {
  background: rgba(96, 165, 250, 0.25);
}

/* ── Footer — utility strip ── */
.cin-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 24px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: transparent;
}

.cin-footer-left,
.cin-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cin-footer-center {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.cin-footer-center .cin-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.6;
}

.cin-footer-center .cin-status-dot.amber { background: #fbbf24; }
.cin-footer-center .cin-status-dot.blue { background: #60a5fa; }
.cin-footer-center .cin-status-dot.green { background: #34d399; }

.cin-bottom-link {
  position: relative;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--victor-text-faint);
  display: flex;
  align-items: center;
  transition: color 0.15s;
  border-radius: 6px;
}

.cin-bottom-link:hover {
  color: var(--victor-text-secondary);
}

.cin-notify-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--victor-accent-red);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

/* ── Responsive: Tablet ────────────────────── */
@media (max-width: 1023px) {
  .cin-main-content {
    max-width: 600px;
    gap: 12px;
  }

  .cin-heartbeat-tabs {
    max-width: 520px;
  }
}

/* ═══════════════════════════════════════════════════
   VICTOR — Voice Wake-Up States
   ═══════════════════════════════════════════════════ */

/* ── Voice state indicator (replaces topbar title when active) ── */
.cin-voice-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  animation: cin-fade-in 0.2s ease;
}

.cin-voice-listening {
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: #60a5fa;
}

.cin-voice-processing {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* ── Voice dot — green for idle, blue pulsing for listening ── */
.cin-voice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
}

.cin-voice-dot-pulse {
  background: #60a5fa;
  animation: cin-voice-pulse 1.5s ease-in-out infinite;
}

@keyframes cin-voice-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.4); }
  50% { opacity: 0.8; transform: scale(1.2); box-shadow: 0 0 12px 4px rgba(96, 165, 250, 0.2); }
}

/* ── Command bar glow when listening ── */
.cin-command-bar-primary.cin-voice-active {
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: 0 0 30px rgba(96, 165, 250, 0.15), 0 0 8px rgba(96, 165, 250, 0.1);
}

/* ── Mic button states ── */
.cin-cmd-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.cin-cmd-mic:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

.cin-cmd-mic.cin-mic-active {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
  animation: cin-mic-pulse 1.5s ease-in-out infinite;
}

@keyframes cin-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(96, 165, 250, 0); }
}

/* ── Voice caption (Victor's spoken text) ── */
.cin-voice-caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
  padding: 4px 0;
}

/* ── Captions toggle in footer ── */
.cin-captions-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.cin-captions-toggle:hover {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
}

.cin-fade-in {
  animation: cin-fade-in 0.3s ease;
}

/* ── Response bubble ── */
.cin-response-bubble {
  animation: cin-fade-in 0.2s ease;
}

.cin-response-dot-pulse {
  animation: cin-listen-pulse 1.5s ease-in-out infinite;
}

/* ── v0 action button hover ── */
.cin-action-v0 {
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.cin-action-v0:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 1) !important;
}

/* ── Dashboard item chevron hover ── */
.cin-dash-item:hover .cin-dash-chevron {
  stroke: rgba(255, 255, 255, 0.5);
}

/* ── Live Dashboard — label, tabs, expanded content ── */
.cin-dashboard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  position: relative;
}

.cin-dashboard-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #38bdf8;
  animation: cin-listen-pulse 2s ease-in-out infinite;
  opacity: 0.25;
}

.cin-dashboard-label-text {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cin-dashboard-line {
  flex: 1 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.08), transparent);
  margin-left: 8px;
}

/* Tab hover states */
.cin-dash-tab:hover {
  background: rgba(18, 20, 26, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.cin-dash-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Responsive: stack tabs on mobile */
@media (max-width: 767px) {
  .cin-dashboard-tabs {
    flex-direction: column !important;
  }
  .cin-live-dashboard {
    max-width: 100% !important;
  }
}

/* ── Responsive: Mobile ────────────────────── */
@media (max-width: 767px) {
  .cin-listening-indicator {
    padding: 4px 10px;
    gap: 6px;
  }

  .cin-listening-dot {
    width: 6px;
    height: 6px;
  }

  .cin-listening-label {
    font-size: 11px;
  }

  .cin-topbar {
    padding: 0 20px;
    height: 48px;
  }

  .cin-topbar-title {
    font-size: 16px;
  }

  .cin-topbar-time {
    display: none;
  }

  .cin-main-content {
    bottom: 48px;
    gap: 10px;
    padding: 0 16px;
    max-width: 100%;
  }

  .cin-command-bar-primary {
    max-width: 100%;
    padding: 10px 14px;
  }

  .cin-action-row {
    gap: 6px;
  }

  .cin-action-btn {
    padding: 7px 12px;
    font-size: 12px;
    flex: 1 1 auto;
  }

  .cin-hero-image {
    object-position: center 25%;
  }

  .cin-heartbeat-tabs {
    flex-direction: column;
    max-width: 100%;
  }

  .cin-footer {
    padding: 0 16px;
    height: 42px;
  }

  .cin-footer-left .cin-bottom-link,
  .cin-footer-right .cin-bottom-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cin-footer-center {
    font-size: 10px;
    gap: 5px;
  }
}

/* ── Responsive: Small phone ──────────────── */
@media (max-width: 380px) {
  .cin-action-btn {
    padding: 6px 8px;
    font-size: 11px;
  }

  .cin-topbar {
    padding: 0 16px;
  }

  .cin-mode-badge {
    font-size: 9px;
    padding: 3px 8px;
  }
}

/* ── Task Detail Panel ── */
.cin-task-panel::-webkit-scrollbar {
  width: 4px;
}

.cin-task-panel::-webkit-scrollbar-track {
  background: transparent;
}

.cin-task-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.cin-task-panel button:hover {
  filter: brightness(1.15);
}

/* ── Disconnected action button ── */
.cin-action-disconnected {
  position: relative;
}

/* ── Voice Visual Upgrade ── */
@keyframes cin-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.cin-action-disconnected:hover::after {
  content: 'Connect to use';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(16, 18, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  pointer-events: none;
  animation: cin-fade-in 0.15s ease;
}

/* ── FIX-22: Agent Colleagues ── */

.victor-task-status {
  padding: 16px;
  border-radius: 12px;
  margin-top: 4px;
}

.victor-task-status--submitting {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.victor-task-status--completed {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.victor-task-status--failed {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.victor-task-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: victorSpin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes victorSpin {
  to { transform: rotate(360deg); }
}

.victor-next-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.victor-next-action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.victor-agent-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.victor-agent-tab:hover .victor-agent-remove {
  opacity: 1;
}

.victor-agent-remove:hover {
  background: rgba(239, 68, 68, 0.6);
  color: white;
}

.victor-undo-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  z-index: 100;
  animation: victorSlideUp 0.3s ease;
}

@keyframes victorSlideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.victor-undo-btn {
  background: none;
  border: none;
  color: #38bdf8;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

.victor-add-colleague-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.victor-add-colleague-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.victor-add-colleague-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.victor-add-colleague-card--added {
  opacity: 0.5;
  cursor: default;
}

.victor-add-colleague-card--added:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.victor-search-tier {
  display: flex;
  gap: 8px;
}

.victor-search-tier-option {
  flex: 1 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.victor-search-tier-option:hover {
  background: rgba(255, 255, 255, 0.07);
}

.victor-search-tier-option--selected {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.1);
}

.victor-search-tier-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  margin-bottom: 4px;
}

.victor-search-tier-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.victor-booking-row {
  display: flex;
  gap: 12px;
}

.victor-booking-row > * {
  flex: 1 1;
}

/* ── FIX-23: Connector Setup Cards ─────────────────────────────── */

.victor-connector-category {
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.victor-connector-category-header {
  padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.victor-connector-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.victor-connector-item:last-child {
  border-bottom: none;
}

.victor-connector-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.victor-connector-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.victor-connector-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 8px;
}

.victor-connector-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.victor-connector-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 2px;
}

.victor-connector-badge--active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.victor-connector-badge--native {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.victor-connector-badge--disconnected {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
}

.victor-connector-setup-btn {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.victor-connector-setup-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.victor-connector-setup-panel {
  padding: 20px;
  background: rgba(15, 15, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin: 8px 16px 16px;
}

.victor-connector-setup-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
}

.victor-connector-setup-step {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
  line-height: 1.5;
}

.victor-connector-setup-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

.victor-connector-setup-input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
}

.victor-connector-setup-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.victor-connector-test-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.victor-connector-save-btn {
  padding: 8px 16px;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 2px;
  color: #38bdf8;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.victor-connector-save-btn:hover {
  background: rgba(56, 189, 248, 0.3);
}

.victor-connector-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.victor-connector-disconnect {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 2px;
  color: rgba(239, 68, 68, 0.7);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.victor-connector-disconnect:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* ============================================================
   FIX-25: Epic UX Upgrade — Briefing, Search, Inbox, Mobile, Onboarding
   ============================================================ */

/* --- Briefing Card --- */
.victor-briefing-card {
  max-width: 480px;
  width: 100%;
  padding: 16px 20px;
  background: rgba(18, 20, 26, 0.90);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-bottom: 12px;
}

.victor-briefing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.victor-briefing-greeting {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
}

.victor-briefing-dismiss {
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.victor-briefing-dismiss:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.50);
}

.victor-briefing-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.victor-briefing-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.victor-briefing-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.victor-briefing-row-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.victor-briefing-stat {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.80);
}

.victor-briefing-highlight {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.40);
}

.victor-briefing-priority {
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 10px;
}

.victor-briefing-priority-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(251, 191, 36, 0.85);
  line-height: 1.4;
}

.victor-briefing-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.victor-briefing-action-btn {
  padding: 7px 16px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

.victor-briefing-action-btn:hover {
  background: rgba(56, 189, 248, 0.25);
}

.victor-briefing-action-btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.50);
}

.victor-briefing-action-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.70);
}

/* --- Suggestions --- */
.victor-suggestions {
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.victor-suggestion-card {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(18, 20, 26, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.victor-suggestion-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.victor-suggestion-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
}

.victor-suggestion-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.4;
  margin: 0;
}

.victor-suggestion-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.victor-suggestion-action {
  padding: 5px 12px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.20);
  color: #38bdf8;
}

.victor-suggestion-action:hover {
  background: rgba(56, 189, 248, 0.22);
}

.victor-suggestion-action--dismiss {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.30);
}

.victor-suggestion-action--dismiss:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* --- Universal Search (Cmd+K) --- */
.victor-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: cin-fade-in 0.15s ease;
}

.victor-search-panel {
  width: 100%;
  max-width: 560px;
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.victor-search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.victor-search-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.victor-search-input {
  flex: 1 1;
  background: none;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.90);
}

.victor-search-input::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

.victor-search-kbd {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.30);
}

.victor-search-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}

.victor-search-loading {
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.victor-search-empty {
  padding: 24px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.40);
}

.victor-search-section {
  margin-bottom: 8px;
}

.victor-search-section-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.30);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 8px 4px;
}

.victor-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: left;
  transition: background 0.1s ease;
}

.victor-search-result:hover,
.victor-search-result--selected {
  background: rgba(255, 255, 255, 0.06);
}

.victor-search-result-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.victor-search-result-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1;
}

.victor-search-result-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.victor-search-result-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.victor-search-footer {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.25);
}

/* --- Contact Card --- */
.victor-contact-card {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 400;
  display: flex;
  justify-content: flex-end;
  animation: cin-fade-in 0.15s ease;
}

.victor-contact-card-panel {
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: rgba(14, 16, 22, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  animation: victorSlideLeft 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes victorSlideLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.victor-contact-card-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.victor-contact-card-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.50);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.victor-contact-card-back:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.70);
}

.victor-contact-card-body {
  padding: 20px;
}

.victor-contact-card-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 20px;
}

.victor-contact-card-avatar {
  font-size: 48px;
  margin-bottom: 4px;
}

.victor-contact-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  margin: 0;
}

.victor-contact-card-role {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.victor-contact-card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.victor-contact-quick-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.70);
}

.victor-contact-quick-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.victor-contact-card-section {
  margin-bottom: 20px;
}

.victor-contact-card-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.30);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.victor-contact-timeline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.victor-contact-timeline-date {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.30);
  min-width: 50px;
}

.victor-contact-timeline-icon {
  font-size: 14px;
}

.victor-contact-timeline-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.victor-contact-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.victor-contact-detail {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.victor-contact-detail > span:first-child {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.victor-contact-detail > span:last-child {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.70);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.victor-contact-deal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.70);
}

.victor-contact-insight {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  padding: 10px 14px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.10);
  border-radius: 10px;
  font-style: italic;
}

/* --- Inbox Styles --- */
.victor-inbox-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.victor-inbox-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

.victor-inbox-item--urgent {
  border-left: 3px solid rgba(251, 191, 36, 0.50);
}

.victor-inbox-item--unread {
  background: rgba(56, 189, 248, 0.03);
  border-color: rgba(56, 189, 248, 0.10);
}

.victor-inbox-item-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.victor-inbox-item-content {
  flex: 1 1;
  min-width: 0;
}

.victor-inbox-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.victor-inbox-item-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.victor-inbox-item-time {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
}

.victor-inbox-item-preview {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}

.victor-inbox-item-actions {
  display: flex;
  gap: 6px;
}

.victor-inbox-action-btn {
  padding: 4px 12px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.18);
  color: #38bdf8;
}

.victor-inbox-action-btn:hover {
  background: rgba(56, 189, 248, 0.20);
}

/* --- Onboarding Wizard --- */
.victor-onboarding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(10, 11, 13, 1) 0%, rgba(14, 16, 22, 1) 100%);
}

.victor-onboarding-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}

.victor-onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  transition: all 0.3s ease;
}

.victor-onboarding-dot--active {
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.victor-onboarding-dot--done {
  background: rgba(56, 189, 248, 0.40);
}

.victor-onboarding-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  width: 100%;
}

.victor-onboarding-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.victor-onboarding-title {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 12px;
}

.victor-onboarding-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 360px;
}

.victor-onboarding-primary {
  padding: 12px 32px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(56, 189, 248, 0.20);
  border: 1px solid rgba(56, 189, 248, 0.30);
  color: #38bdf8;
}

.victor-onboarding-primary:hover {
  background: rgba(56, 189, 248, 0.30);
}

.victor-onboarding-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.victor-onboarding-secondary {
  padding: 10px 24px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.40);
  transition: all 0.15s ease;
}

.victor-onboarding-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
}

.victor-onboarding-back {
  padding: 10px 20px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.15s ease;
}

.victor-onboarding-back:hover {
  color: rgba(255, 255, 255, 0.60);
}

.victor-onboarding-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.victor-onboarding-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
}

.victor-onboarding-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.victor-onboarding-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.victor-onboarding-option--selected {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.25);
}

.victor-onboarding-option-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.victor-onboarding-option-label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.victor-onboarding-option-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.40);
  margin-top: 2px;
}

.victor-onboarding-agent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}

.victor-onboarding-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.60);
  position: relative;
}

.victor-onboarding-agent:hover {
  background: rgba(255, 255, 255, 0.06);
}

.victor-onboarding-agent--selected {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

.victor-onboarding-check {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  color: #38bdf8;
}

.victor-onboarding-platforms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
}

.victor-onboarding-platform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Security Audit Page (Phase 6A) --- */
.sa-root {
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(180deg, rgba(10, 11, 13, 1) 0%, rgba(14, 16, 22, 1) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
}

.sa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sa-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  margin: 0;
}

.sa-export-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.60);
  transition: all 0.15s ease;
}

.sa-export-btn:hover {
  background: rgba(255, 255, 255, 0.10);
}

.sa-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.sa-stat {
  flex: 1 1;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.sa-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
}

.sa-stat-value--alert {
  color: #f87171;
}

.sa-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
}

.sa-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sa-select {
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.70);
  outline: none;
}

.sa-search {
  flex: 1 1;
  min-width: 180px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.70);
  outline: none;
}

.sa-search::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.sa-table-wrap {
  overflow-x: auto;
}

.sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sa-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sa-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
}

.sa-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.sa-cell-time {
  white-space: nowrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.40);
}

.sa-cell-action {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.80);
}

.sa-cell-user {
  font-size: 12px;
}

.sa-cell-cost {
  font-size: 12px;
  font-family: 'Inter', monospace;
}

.sa-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.10);
  color: rgba(56, 189, 248, 0.70);
}

.sa-result {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.sa-result--success {
  background: rgba(52, 211, 153, 0.10);
  color: #34d399;
}

.sa-result--failure {
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
}

.sa-result--blocked {
  background: rgba(251, 191, 36, 0.10);
  color: #fbbf24;
}

.sa-loading,
.sa-empty {
  padding: 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.30);
  font-size: 14px;
}

@media (max-width: 640px) {
  .sa-stats {
    flex-direction: column;
  }
  .sa-filters {
    flex-direction: column;
  }
}

/* --- Onboarding Expanded (Phase 5B) --- */
.vo-api-key-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.vo-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.vo-input {
  flex: 1 1;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  outline: none;
  transition: border-color 0.15s ease;
}

.vo-input:focus {
  border-color: rgba(56, 189, 248, 0.40);
}

.vo-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.vo-input--small {
  max-width: 140px;
}

.vo-api-status {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
}

.vo-api-status--valid {
  color: #34d399;
}

.vo-api-status--invalid {
  color: #f87171;
}

.vo-link {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #38bdf8;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.vo-link:hover {
  opacity: 0.8;
}

.vo-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1.5;
}

.vo-custom-spend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
}

.vo-platform-group-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.25);
  padding: 8px 0 4px;
}

.vo-vpn-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.vo-vpn-qr {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
}

.vo-self-test {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  margin-bottom: 20px;
}

.vo-self-test-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vo-self-test-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vo-self-test-dot--ok {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
}

.vo-self-test-dot--fail {
  background: #f87171;
}

.vo-self-test-dot--pending {
  background: rgba(255, 255, 255, 0.15);
  animation: victorShimmer 1.5s infinite;
}

.vo-self-test-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.70);
  flex: 1 1;
}

.vo-self-test-status {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

.vo-suggested-commands {
  width: 100%;
  max-width: 320px;
  margin-bottom: 8px;
}

.vo-suggested-cmd {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(56, 189, 248, 0.70);
  padding: 6px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.08);
}

/* --- Keyboard Shortcuts Dialog --- */
.victor-shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cin-fade-in 0.15s ease;
}

.victor-shortcuts-dialog {
  width: 100%;
  max-width: 380px;
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.victor-shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.victor-shortcuts-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  margin: 0;
}

.victor-shortcuts-close {
  background: none;
  border: none;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.victor-shortcuts-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.60);
}

.victor-shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.victor-shortcut-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

.victor-shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.60);
}

.victor-shortcut-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Skeleton Loaders --- */
.victor-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: victorShimmer 1.5s infinite;
  border-radius: 2px;
}

@keyframes victorShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.victor-skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.victor-skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: 12px;
}

.victor-skeleton-card {
  height: 80px;
  margin-bottom: 8px;
  border-radius: 12px;
}

/* --- Empty & Error States --- */
.victor-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}

/* --- Page Transitions --- */
.victor-page-enter {
  animation: victorPageIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes victorPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Staggered List Items --- */
.victor-stagger-item {
  animation: victorFadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.victor-stagger-item:nth-child(1) { animation-delay: 0ms; }
.victor-stagger-item:nth-child(2) { animation-delay: 50ms; }
.victor-stagger-item:nth-child(3) { animation-delay: 100ms; }
.victor-stagger-item:nth-child(4) { animation-delay: 150ms; }
.victor-stagger-item:nth-child(5) { animation-delay: 200ms; }

@keyframes victorFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Success Animation --- */
.victor-success-check {
  animation: victorCheckIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes victorCheckIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Badge Bounce --- */
.victor-badge-new {
  animation: victorBadgeBounce 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes victorBadgeBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* --- Back Button (shared) --- */
.vs-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.50);
  transition: all 0.15s ease;
}

.vs-back:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.70);
}

/* --- Mobile Bottom Navigation --- */
.victor-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .victor-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(12, 12, 20, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    justify-content: space-around;
    align-items: center;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .victor-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.40);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
  }

  .victor-bottom-nav-item--active {
    color: #38bdf8;
  }

  .victor-bottom-nav-icon {
    font-size: 20px;
  }

  /* Hide desktop footer on mobile */
  .cin-footer {
    display: none !important;
  }

  /* Mobile topbar adjustments */
  .cin-topbar {
    padding: 8px 12px !important;
  }

  /* Main content padding for fixed bars */
  .cin-main-content {
    padding-bottom: 120px;
  }

  /* Agent strip horizontal scroll on mobile */
  .victor-agent-tab {
    flex-shrink: 0;
  }

  /* Contact card as full screen on mobile */
  .victor-contact-card-panel {
    max-width: 100%;
  }

  /* Search as full screen on mobile */
  .victor-search-overlay {
    padding-top: 0;
    align-items: stretch;
  }

  .victor-search-panel {
    max-width: 100%;
    border-radius: 0;
    height: 100%;
  }

  /* Onboarding agent grid 2 columns on mobile */
  .victor-onboarding-agent-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Briefing card full width on mobile */
  .victor-briefing-card {
    max-width: 100%;
    border-radius: 12px;
    margin: 0 4px 12px;
  }
}

/* ============================================================
   FIX-26: Error Boundary + Heartbeat Empty + Provider Badge
   ============================================================ */

/* Error boundary */
.victor-error-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

.victor-error-boundary-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.victor-error-boundary-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 6px;
}

.victor-error-boundary-message {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}

.victor-error-boundary-retry {
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.victor-error-boundary-retry:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Empty state in heartbeat */
.victor-heartbeat-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

/* Provider badge on action buttons */
.victor-provider-badge {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   FIX-27: DENSITY SYSTEM — Calm / Balanced / Pro
   ═══════════════════════════════════════════════════════════════ */

/* ── Density: Calm (default for Personal) ── */
.victor-density-calm .cin-main-content {
  padding: 20px 24px;
  gap: 16px;
}

.victor-density-calm .cin-hb-tab-content > div {
  padding: 14px 16px;
  margin-bottom: 8px;
}

.victor-density-calm .victor-agent-tab button {
  padding: 12px 20px;
  font-size: 14px;
}

.victor-density-calm .cin-response-bubble,
.victor-density-calm .victor-briefing-card {
  font-size: 16px;
  line-height: 1.6;
  padding: 20px 24px;
}

.victor-density-calm .victor-briefing-body {
  gap: 14px;
}

.victor-density-calm .victor-briefing-row {
  gap: 12px;
}

.victor-density-calm .victor-suggestion-card {
  padding: 16px;
}

.victor-density-calm .cin-command-bar-primary {
  padding: 12px 16px;
}

/* Calm: subtler borders and accents */
.victor-density-calm .cin-hb-tab {
  border-color: rgba(255, 255, 255, 0.04);
}

.victor-density-calm .victor-agent-tab > button {
  border-color: rgba(255, 255, 255, 0.06);
}

/* ── Density: Balanced (default for Founder) — standard, no overrides needed ── */

/* ── Density: Pro (default for Business) ── */
.victor-density-pro .cin-main-content {
  padding: 8px 12px;
  gap: 6px;
}

.victor-density-pro .cin-hb-tab-content > div {
  padding: 8px 12px;
  margin-bottom: 4px;
}

.victor-density-pro .victor-agent-tab button {
  padding: 8px 14px;
  font-size: 12px;
}

.victor-density-pro .cin-response-bubble,
.victor-density-pro .victor-briefing-card {
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 16px;
}

.victor-density-pro .victor-briefing-body {
  gap: 6px;
}

.victor-density-pro .victor-briefing-stat {
  font-size: 12px;
}

.victor-density-pro .victor-briefing-highlight {
  font-size: 11px;
}

.victor-density-pro .victor-suggestion-card {
  padding: 8px 12px;
}

.victor-density-pro .victor-suggestion-text {
  font-size: 12px;
}

.victor-density-pro .cin-command-bar-primary {
  padding: 6px 12px;
}

.victor-density-pro .cin-topbar {
  padding: 8px 16px;
}

.victor-density-pro .cin-topbar-title {
  font-size: 16px;
}

.victor-density-pro .cin-topbar-time {
  font-size: 10px;
}

.victor-density-pro .victor-briefing-row-content .victor-briefing-stat {
  font-size: 12px;
}

/* Pro: tighter agent grid */
.victor-density-pro .victor-agent-tab {
  gap: 4px;
}

/* Pro: compact heartbeat headers */
.victor-density-pro .cin-hb-tab-header {
  padding: 8px 12px;
}

.victor-density-pro .cin-hb-tab-label {
  font-size: 11px;
}

.victor-density-pro .cin-hb-tab-count {
  font-size: 14px;
}

/* Pro: compact bottom nav */
.victor-density-pro .victor-bottom-nav {
  height: 52px;
}

.victor-density-pro .victor-bottom-nav-item {
  font-size: 9px;
}

.victor-density-pro .victor-bottom-nav-icon {
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   FIX-28: CONTACTS PAGE & PIPELINE VIEW
   ═══════════════════════════════════════════════════════════════ */

/* Contacts page */
.victor-contacts-page {
  padding: 16px 24px;
  padding-bottom: 120px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.victor-contacts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.victor-contacts-title {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

.victor-contacts-search {
  width: 200px;
  padding: 8px 12px 8px 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.victor-contacts-search:focus {
  border-color: rgba(56, 189, 248, 0.4);
}

.victor-contacts-search::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Filter tabs */
.victor-contacts-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.victor-contacts-filter {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.victor-contacts-filter:hover {
  background: rgba(255, 255, 255, 0.06);
}

.victor-contacts-filter--active {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.victor-contacts-filter-count {
  margin-left: 4px;
  opacity: 0.5;
}

/* Section headers */
.victor-contacts-section-header {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 0;
  margin-top: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.victor-contacts-section-header--partners {
  color: #22c55e;
}

.victor-contacts-section-header--prospects {
  color: #f59e0b;
}

.victor-contacts-section-header--personal {
  color: #38bdf8;
}

/* Contact card row */
.victor-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.victor-contact-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.victor-contact-row-info {
  flex: 1 1;
  min-width: 0;
}

.victor-contact-row-company {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}

.victor-contact-row-person {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.victor-contact-row-meta {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.victor-contact-row-pipeline {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.7);
  margin-top: 4px;
}

/* Contact quick actions */
.victor-contact-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.victor-contact-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.7);
}

.victor-contact-action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Status dot */
.victor-contact-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
}

.victor-contact-status--partner { background: #22c55e; }
.victor-contact-status--prospect { background: #f59e0b; }
.victor-contact-status--personal { background: #38bdf8; }
.victor-contact-status--inactive { background: rgba(255, 255, 255, 0.2); }

/* Pipeline kanban */
.victor-pipeline {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

.victor-pipeline::-webkit-scrollbar {
  height: 4px;
}

.victor-pipeline::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.victor-pipeline-column {
  flex: 0 0 220px;
  min-height: 300px;
}

.victor-pipeline-column-header {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px 12px 0 0;
  margin-bottom: 1px;
}

.victor-pipeline-column-name {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.victor-pipeline-column-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.victor-pipeline-column-value {
  color: rgba(56, 189, 248, 0.7);
  font-weight: 600;
}

.victor-pipeline-column-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-top: none;
  border-radius: 0 0 12px 12px;
  min-height: 200px;
}

.victor-pipeline-card {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.victor-pipeline-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.victor-pipeline-card-company {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}

.victor-pipeline-card-value {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(56, 189, 248, 0.8);
}

.victor-pipeline-card-stale {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

.victor-pipeline-card-stale--warning {
  color: rgba(239, 68, 68, 0.7);
}

/* Pipeline total */
.victor-pipeline-total {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.victor-pipeline-total-value {
  color: #38bdf8;
}

/* View toggle */
.victor-view-toggle {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 2px;
}

.victor-view-toggle-btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.victor-view-toggle-btn--active {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

/* Add contact form */
.victor-add-contact-form {
  padding: 24px;
  background: rgba(15, 15, 25, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .victor-contacts-page {
    padding: 12px;
    padding-bottom: 140px;
  }

  .victor-contacts-header {
    flex-direction: column;
    align-items: stretch;
  }

  .victor-contacts-search {
    width: 100%;
  }

  .victor-pipeline {
    gap: 8px;
  }

  .victor-pipeline-column {
    flex: 0 0 180px;
  }

  .victor-contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .victor-contact-actions {
    align-self: flex-end;
  }

  .victor-view-toggle {
    align-self: flex-start;
  }
}


/* ══════════════════════════════════════════════════
   FIX-29: Voice-to-UI Commander
   Data panels, command flash, calendar, pipeline,
   tasks inline panels
   ══════════════════════════════════════════════════ */

/* ── Command Flash Animation ── */

.vdp-command-flash {
  animation: vdp-flash 0.6s ease-out !important;
}

@keyframes vdp-flash {
  0% { box-shadow: 0 0 0 0 rgba(56,189,248,0.4); }
  30% { box-shadow: 0 0 20px 4px rgba(56,189,248,0.3); }
  100% { box-shadow: none; }
}

/* ── Data Panel Container ── */

.vdp-container {
  max-width: 520px;
  width: 100%;
  margin: 12px auto 0;
  background: rgba(14,16,22,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.vdp-container.vdp-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.vdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.vdp-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}

.vdp-close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.vdp-close:hover {
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
}

.vdp-body {
  padding: 12px 16px 16px;
}

/* ── Empty State ── */

.vdp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
}

.vdp-empty-icon {
  color: rgba(255,255,255,0.2);
}

.vdp-empty-text {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.vdp-empty-action {
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.2);
  color: #38bdf8;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vdp-empty-action:hover {
  background: rgba(56,189,248,0.2);
}

/* ── Calendar Panel ── */

.vdp-calendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vdp-cal-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vdp-cal-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.vdp-cal-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  transition: background 0.15s ease;
}

.vdp-cal-event:hover {
  background: rgba(255,255,255,0.06);
}

.vdp-cal-time {
  flex: 0 0 auto;
  min-width: 56px;
  font-size: 12px;
  font-weight: 600;
  color: #38bdf8;
  padding-top: 1px;
}

.vdp-cal-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vdp-cal-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vdp-cal-loc {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}

.vdp-cal-priority {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}

.vdp-priority-urgent {
  color: #f87171;
  background: rgba(248,113,113,0.12);
}

.vdp-priority-high {
  color: #fb923c;
  background: rgba(251,146,60,0.12);
}

.vdp-priority-medium {
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
}

.vdp-priority-low {
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
}

/* ── Pipeline Panel ── */

.vdp-pipeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vdp-pipe-total {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.vdp-pipe-total strong {
  color: rgba(255,255,255,0.9);
  font-weight: 700;
}

.vdp-pipe-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vdp-pipe-stage {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vdp-pipe-stage-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vdp-pipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vdp-pipe-stage-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}

.vdp-pipe-count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  margin-left: auto;
}

.vdp-pipe-deal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 4px 16px;
}

.vdp-pipe-deal-name {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vdp-pipe-deal-val {
  font-size: 11px;
  font-weight: 600;
  color: #34d399;
  flex-shrink: 0;
}

.vdp-pipe-more {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  padding-left: 16px;
}

/* ── Tasks Panel ── */

.vdp-tasks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vdp-tasks-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.vdp-tasks-count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
}

.vdp-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.vdp-task-row:hover {
  background: rgba(255,255,255,0.04);
}

.vdp-task-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vdp-task-title {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vdp-task-due {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

.vdp-task-overdue {
  color: #f87171;
}

.vdp-task-urgent {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(248,113,113,0.15);
  color: #f87171;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vdp-tasks-more {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding-top: 4px;
}

/* ── Deal Panel ── */

.vdp-deal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vdp-deal-name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.vdp-deal-stage {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.vdp-deal-value {
  font-size: 18px;
  font-weight: 700;
  color: #34d399;
}

.vdp-deal-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

/* ── Contact Panel ── */

.vdp-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vdp-contact-name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.vdp-contact-company {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.vdp-contact-email {
  font-size: 12px;
  color: #38bdf8;
}

.vdp-contact-title {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* ── Rotating Hint Animation ── */

.cin-command-input::placeholder {
  transition: opacity 0.3s ease;
}

/* ── Mobile responsive for data panels ── */

@media (max-width: 640px) {
  .vdp-container {
    margin: 8px 0 0;
    border-radius: 12px;
  }

  .vdp-cal-event {
    padding: 6px 8px;
  }

  .vdp-cal-time {
    min-width: 48px;
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════════
   SPEND DASHBOARD
   ══════════════════════════════════════════════════ */

.spend-dashboard {
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.spend-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.spend-loading-text {
  color: #999;
  font-size: 14px;
  font-weight: 500;
}

/* ── Spend Cards ────────────────────────── */

.spend-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 20px;
}

.spend-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px;
  padding: 16px;
  text-align: center;
}

.spend-card--warning {
  border-color: #F59E0B;
}

.spend-card--danger {
  border-color: #EF4444;
}

.spend-card--amber {
  border-color: #F59E0B;
  background: #FFFBEB;
}

.spend-card--orange {
  border-color: #F97316;
  background: #FFF7ED;
}

.spend-card--red {
  border-color: #EF4444;
  background: #FEF2F2;
}

.spend-card-label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.spend-card-value {
  font-size: 28px;
  font-weight: 900;
  color: #1a1a2e;
  line-height: 1.1;
}

.spend-card-limit {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
  margin-bottom: 10px;
}

.spend-card-bar {
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.spend-card-bar-fill {
  height: 100%;
  background: #3B82F6;
  border-radius: 2px;
  transition: width 0.6s ease;
}

.spend-bar--warning {
  background: #F59E0B;
}

.spend-bar--danger {
  background: #EF4444;
}

.spend-bar--amber {
  background: #F59E0B;
}

.spend-bar--orange {
  background: #F97316;
}

.spend-bar--red {
  background: #EF4444;
}

.spend-card-pct {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

/* ── Section Title ──────────────────────── */

.spend-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
}

/* ── Spend Chart ────────────────────────── */

.spend-chart {
  background: #1a1a2e;
  border-radius: 2px;
  padding: 16px;
  margin-bottom: 20px;
}

.spend-chart .spend-section-title {
  color: #fff;
}

.spend-chart-empty {
  background: #1a1a2e;
  border-radius: 2px;
  padding: 40px;
  margin-bottom: 20px;
  text-align: center;
}

.spend-chart-empty-text {
  color: #666;
  font-size: 14px;
}

/* ── Spend Breakdown ────────────────────── */

.spend-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.spend-bottom-left,
.spend-bottom-right {
  min-width: 0;
}

.spend-breakdown {
  background: #1a1a2e;
  border-radius: 2px;
  padding: 16px;
}

.spend-breakdown .spend-section-title {
  color: #fff;
}

.spend-breakdown-empty {
  background: #1a1a2e;
  border-radius: 2px;
  padding: 40px;
  text-align: center;
}

/* ── Spend Limits ───────────────────────── */

.spend-limits {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px;
  padding: 16px;
}

.spend-limits-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spend-limits-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
  cursor: pointer;
}

.spend-limits-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3B82F6;
}

.spend-limits-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.spend-limits-label {
  font-size: 13px;
  color: #666;
  flex-shrink: 0;
}

.spend-limits-input,
.spend-limits-select {
  width: 100px;
  padding: 6px 8px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 2px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #1a1a2e;
  text-align: right;
}

.spend-limits-input:disabled,
.spend-limits-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.spend-limits-select {
  width: 180px;
  text-align: left;
}

.spend-limits-save {
  margin-top: 4px;
  padding: 8px 16px;
  background: #3B82F6;
  color: #fff;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  align-self: flex-start;
}

.spend-limits-save:hover {
  background: #2563EB;
}

.spend-limits-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Budget Guide ───────────────────────── */

.spend-budget-guide {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.spend-budget-guide-title {
  font-size: 12px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.spend-budget-guide-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spend-budget-guide-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.spend-budget-guide-amount {
  font-weight: 600;
  color: #1a1a2e;
  min-width: 60px;
}

.spend-budget-guide-desc {
  color: #999;
}

.spend-budget-guide-tasks {
  font-weight: 600;
  color: #3B82F6;
  min-width: 80px;
  font-size: 11px;
}

/* ── Spend Mode Hint ───────────────────── */

.spend-limits-mode-hint {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
  padding: 6px 0;
}

/* ── Billing CTA ───────────────────────── */

.spend-billing-cta {
  margin-top: 16px;
  padding: 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.spend-billing-cta-text {
  font-size: 13px;
  color: #991B1B;
  flex: 1 1;
}

.spend-billing-cta-link {
  padding: 6px 14px;
  background: #EF4444;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}

.spend-billing-cta-link:hover {
  background: #DC2626;
}

/* ── Spend Projection ──────────────────── */

.spend-projection {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px;
  padding: 16px;
  margin-bottom: 20px;
}

.spend-projection--over {
  border-color: #F97316;
  background: #FFF7ED;
}

.spend-proj-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.spend-proj-amount {
  font-size: 32px;
  font-weight: 900;
  color: #1a1a2e;
}

.spend-proj-trend {
  font-size: 20px;
  font-weight: 700;
}

.spend-proj-trend--up {
  color: #EF4444;
}

.spend-proj-trend--down {
  color: #22C55E;
}

.spend-proj-trend--stable {
  color: #999;
}

.spend-proj-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.spend-proj-warning {
  font-size: 13px;
  color: #EA580C;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(249, 115, 22, 0.08);
  border-radius: 2px;
}

.spend-proj-details {
  display: flex;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.spend-proj-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spend-proj-detail-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.spend-proj-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
}

/* ── Mobile ─────────────────────────────── */

@media (max-width: 640px) {
  .spend-cards {
    grid-template-columns: 1fr;
  }

  .spend-bottom-row {
    grid-template-columns: 1fr;
  }

  .spend-card-value {
    font-size: 24px;
  }

  .spend-limits-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .spend-limits-input,
  .spend-limits-select {
    width: 100%;
    text-align: left;
  }

  .spend-proj-details {
    flex-direction: column;
    gap: 8px;
  }

  .spend-proj-amount {
    font-size: 24px;
  }

  .spend-billing-cta {
    flex-direction: column;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════
   SMART HOME SETTINGS
   ══════════════════════════════════════════════════ */

.sh-settings {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
}

.sh-header {
  margin-bottom: 24px;
}

.sh-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 6px 0;
}

.sh-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.sh-section {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 2px;
  padding: 16px;
  margin-bottom: 16px;
}

.sh-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 12px 0;
}

.sh-info-box {
  background: #f8f9fa;
  border-radius: 2px;
  padding: 12px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 12px;
}

.sh-code {
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: monospace;
  font-size: 12px;
  color: #333;
}

.sh-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-status-label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.sh-status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 2px;
}

.sh-status-connected {
  background: #d4edda;
  color: #155724;
}

.sh-status-disconnected {
  background: #f8d7da;
  color: #721c24;
}

.sh-actions-row {
  display: flex;
  gap: 8px;
}

.sh-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.sh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sh-btn-primary {
  background: #2563eb;
  color: #fff;
}

.sh-btn-primary:hover:not(:disabled) {
  background: #1d4ed8;
}

.sh-btn-small {
  padding: 4px 10px;
  font-size: 11px;
  background: #f0f0f0;
  color: #333;
}

.sh-btn-small:hover {
  background: #e0e0e0;
}

.sh-error {
  color: #dc3545;
  font-size: 13px;
  margin-top: 8px;
}

.sh-test-result {
  color: #28a745;
  font-size: 13px;
  margin-top: 8px;
}

.sh-room {
  margin-bottom: 16px;
}

.sh-room:last-child {
  margin-bottom: 0;
}

.sh-room-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sh-device-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #f8f9fa;
  border-radius: 2px;
}

.sh-device-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sh-device-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.sh-device-meta {
  font-size: 11px;
  color: #888;
}

.sh-device-state {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-state-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 2px;
  background: #e9ecef;
  color: #555;
}

.sh-state-on {
  background: #d4edda;
  color: #155724;
}

.sh-state-off {
  background: #f0f0f0;
  color: #888;
}

/* ══════════════════════════════════════════════════
   DISPLAY MODE — Kitchen/Office Fullscreen Dashboard
   ══════════════════════════════════════════════════ */

.dm-root {
  position: fixed;
  inset: 0;
  background: #1A1A1A;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dm-header {
  padding: 24px 32px 16px;
  flex-shrink: 0;
}

.dm-grid {
  flex: 1 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  padding: 0 32px 24px;
  min-height: 0;
}

/* ── Clock & Weather ── */

.dm-clock-weather {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.dm-clock-side {
  display: flex;
  flex-direction: column;
}

.dm-clock-time {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: #FFFFFF;
}

.dm-clock-date {
  font-size: 18px;
  font-weight: 400;
  color: #999999;
  margin-top: 4px;
}

.dm-weather-side {
  text-align: right;
}

.dm-weather-temp {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}

.dm-weather-icon {
  margin-right: 6px;
}

.dm-weather-condition {
  font-size: 15px;
  color: #999999;
  margin-top: 2px;
}

.dm-weather-feels {
  font-size: 12px;
  color: #666666;
  margin-top: 2px;
}

/* ── Panels ── */

.dm-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dm-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #FF6B00;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.dm-panel-empty {
  font-size: 15px;
  color: #555555;
  font-style: italic;
}

/* ── Calendar Events ── */

.dm-event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-event-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}

.dm-event-now {
  border-left: 3px solid #FF6B00;
  padding-left: 9px;
}

.dm-event-time {
  font-size: 16px;
  font-weight: 600;
  color: #999999;
  flex-shrink: 0;
  width: 50px;
}

.dm-event-now .dm-event-time {
  color: #FF6B00;
}

.dm-event-title {
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Briefing Metrics ── */

.dm-metric-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-metric-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
}

.dm-metric-urgent .dm-metric-value {
  color: #FF6B00;
}

.dm-metric-value {
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
}

.dm-metric-label {
  font-size: 15px;
  color: #999999;
}

/* ── Smart Home Devices ── */

.dm-device-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dm-device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

.dm-device-name {
  font-size: 15px;
  color: #CCCCCC;
}

.dm-device-state {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
}

.dm-state-good {
  color: #4ADE80;
}

.dm-state-warn {
  color: #FF6B00;
}

.dm-state-neutral {
  color: #999999;
}

/* ── Spend Meter ── */

.dm-spend-section {
  margin-bottom: 16px;
}

.dm-spend-section:last-child {
  margin-bottom: 0;
}

.dm-spend-header {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}

.dm-spend-amount {
  font-size: 28px;
  font-weight: 700;
  color: #FFFFFF;
}

.dm-spend-limit {
  font-size: 16px;
  color: #555555;
}

.dm-spend-label {
  font-size: 12px;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.dm-spend-amount-sm {
  font-size: 18px;
  font-weight: 600;
  color: #CCCCCC;
}

.dm-spend-limit-sm {
  font-size: 14px;
  color: #555555;
}

.dm-spend-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.dm-spend-bar-sm {
  height: 5px;
  margin-top: 6px;
}

.dm-spend-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.dm-bar-green {
  background: #4ADE80;
}

.dm-bar-orange {
  background: #FF6B00;
}

.dm-bar-red {
  background: #EF4444;
}

.dm-spend-pct {
  font-size: 12px;
  color: #666666;
  margin-top: 4px;
  text-align: right;
}

.dm-spend-mtd {
  margin-top: 12px;
}

/* ── Controls Overlay ── */

.dm-controls {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  animation: dm-fade-in 0.2s ease;
}

.dm-exit-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}

.dm-exit-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

@keyframes dm-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Tablet / Portrait ── */

@media (max-width: 1024px) {
  .dm-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 20px 20px;
  }

  .dm-header {
    padding: 16px 20px 12px;
  }

  .dm-clock-time {
    font-size: 48px;
  }

  .dm-weather-temp {
    font-size: 32px;
  }

  .dm-metric-value {
    font-size: 20px;
  }

  .dm-spend-amount {
    font-size: 22px;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE LAYOUT — PWA Mobile View
   ══════════════════════════════════════════════════ */

.ml-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: #1A1A1A;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ml-content {
  flex: 1 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 72px;
}

.ml-refresh-indicator {
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: #FF6B00;
  font-weight: 600;
}

.ml-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: #111111;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  z-index: 100;
}

.ml-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666666;
  min-width: 48px;
  min-height: 48px;
  justify-content: center;
  gap: 2px;
  transition: color 0.15s;
}

.ml-nav-item:active,
.ml-nav-active {
  color: #FF6B00;
}

.ml-nav-icon {
  font-size: 20px;
  line-height: 1;
}

.ml-nav-label {
  font-size: 10px;
  font-weight: 600;
}

/* ── Mobile Page ── */

.mp-container {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.mp-greeting-section {
  text-align: center;
}

.mp-time {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  color: #FFFFFF;
}

.mp-greeting {
  font-size: 18px;
  color: #999999;
  margin-top: 4px;
}

.mp-top-items {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}

.mp-top-item {
  flex: 1 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-top-urgent {
  border-color: rgba(255,107,0,0.3);
}

.mp-top-value {
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
}

.mp-top-urgent .mp-top-value {
  color: #FF6B00;
}

.mp-top-label {
  font-size: 11px;
  color: #666666;
}

.mp-voice-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}

.mp-voice-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #FF6B00;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 24px rgba(255,107,0,0.3);
}

.mp-voice-btn:active {
  transform: scale(0.95);
}

.mp-voice-icon {
  font-size: 32px;
}

.mp-voice-hint {
  font-size: 12px;
  color: #555555;
}

.mp-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
  max-width: 400px;
}

.mp-action-btn {
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
  color: #CCCCCC;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.mp-action-btn:active {
  background: rgba(255,255,255,0.08);
}

/* ══════════════════════════════════════════════════
   VOICE OUTPUT
   ══════════════════════════════════════════════════ */

.vo-root {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vo-mute-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  color: #333;
}

.vo-mute-btn:hover {
  background: #f0f0f0;
}

.vo-mute-btn.vo-muted {
  color: #999;
  opacity: 0.6;
}

.vo-mute-btn.vo-playing {
  border-color: #3b82f6;
  color: #3b82f6;
}

.vo-indicator {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}

.vo-bar {
  display: block;
  width: 3px;
  background: #3b82f6;
  border-radius: 1px;
  animation: vo-wave 0.8s ease-in-out infinite;
}

.vo-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.vo-bar:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.vo-bar:nth-child(3) { height: 14px; animation-delay: 0.3s; }
.vo-bar:nth-child(4) { height: 8px; animation-delay: 0.45s; }

@keyframes vo-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* ══════════════════════════════════════════════════
   CAR SETTINGS
   ══════════════════════════════════════════════════ */

.car-settings {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

.car-header {
  margin-bottom: 32px;
}

.car-back {
  font-size: 14px;
  color: #3b82f6;
  text-decoration: none;
}

.car-back:hover {
  text-decoration: underline;
}

.car-title {
  font-size: 24px;
  font-weight: 700;
  margin: 8px 0 4px;
  color: #111;
}

.car-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.car-section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.car-section:last-child {
  border-bottom: none;
}

.car-section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #111;
}

.car-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 12px;
}

.car-steps ol {
  padding-left: 20px;
  margin: 0;
}

.car-steps li {
  font-size: 13px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 4px;
}

.car-code {
  display: inline-block;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
}

.car-test-btn {
  padding: 8px 16px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.car-test-btn:hover {
  background: #2563eb;
}

.car-test-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.car-test-result {
  margin-top: 8px;
  font-size: 13px;
  color: #333;
  padding: 8px 12px;
  background: #f0fdf4;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
}

/* ══════════════════════════════════════════════════
   PHASE 9A: VICTOR DARK COMMAND CENTRE
   ══════════════════════════════════════════════════ */

/* ── Light Theme Override ─────────────────────── */

[data-theme="light"] {
  --bg-primary: #F5F5F5;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #FAFAFA;
  --bg-hover-v: #EEEEEE;
  --bg-active-v: #E8E8E8;
  --bg: var(--bg-primary);
  --bg-elevated: var(--bg-secondary);
  --bg-card: var(--bg-secondary);
  --bg-surface: var(--bg-tertiary);
  --bg-hover: var(--bg-hover-v);
  --text-primary: #1A1A1A;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-inverse: #FFFFFF;
  --border-v: rgba(0, 0, 0, 0.10);
  --border: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-accent: 0 0 20px rgba(255,107,0,0.10);
  --shadow-hover: 0 0 30px rgba(255,107,0,0.15);
  /* accent stays orange */
}

/* ── Victor Layout Shell ──────────────────────── */

.vl-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-primary);
}

.vl-main {
  flex: 1 1;
  margin-left: 64px;
  padding-bottom: 48px;
  min-height: 100vh;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  .vl-main {
    margin-left: 0;
    padding-bottom: 32px;
  }
  .vsb-sidebar {
    display: none !important;
  }
  .vat-ticker {
    display: none !important;
  }
}

/* ── Victor Sidebar ───────────────────────────── */

.vsb-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 64px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-v);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.vsb-sidebar.vsb-expanded {
  width: 220px;
  box-shadow: 4px 0 24px rgba(0,0,0,0.3);
}

.vsb-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  height: 56px;
  flex-shrink: 0;
}

.vsb-logo-mark {
  width: 32px;
  height: 32px;
  background: var(--victor-accent);
  color: white;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.vsb-logo-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  white-space: nowrap;
  animation: vsb-fade-in 0.15s ease;
}

@keyframes vsb-fade-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

.vsb-nav-main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.vsb-nav-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-top: 1px solid var(--border-v);
}

.vsb-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}

.vsb-nav-item:hover {
  background: var(--bg-hover-v);
  color: var(--text-primary);
}

.vsb-nav-active {
  background: var(--victor-accent-subtle);
  color: var(--victor-accent);
}

.vsb-nav-active:hover {
  background: var(--victor-accent-subtle);
  color: var(--victor-accent);
}

.vsb-nav-active .vsb-nav-icon {
  color: var(--victor-accent);
}

.vsb-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vsb-nav-label {
  animation: vsb-fade-in 0.15s ease;
}

@media (max-width: 768px) {
  .vsb-sidebar {
    display: none;
  }
}

/* ── Activity Ticker ──────────────────────────── */

.vat-ticker {
  position: fixed;
  bottom: 0;
  left: 64px;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: rgba(13,13,13,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-v);
  z-index: 150;
  overflow: hidden;
}

@media (max-width: 768px) {
  .vat-ticker {
    left: 0;
    bottom: 56px;
    height: 36px;
    padding: 0 16px;
  }
}

.vat-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--victor-accent);
  flex-shrink: 0;
  text-transform: uppercase;
}

.vat-scroll {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  flex: 1 1;
  scrollbar-width: none;
}

.vat-scroll::-webkit-scrollbar { display: none; }

.vat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: vat-slide-in 0.3s ease;
}

@keyframes vat-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.vat-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--status-success);
  flex-shrink: 0;
}

.vat-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.vat-time {
  font-size: 11px;
  color: var(--text-tertiary);
}

.vat-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Victor Card Component ────────────────────── */

.vc-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
}

.vc-card-clickable {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
}

.vc-card:hover, .vc-card-clickable:hover {
  border-color: rgba(255, 107, 0, 0.2);
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.08);
}

.vc-card-accent {
  border-color: var(--border-accent-v);
}

.vc-card-glow {
  box-shadow: var(--shadow-accent);
}

/* ── Victor Button Component ──────────────────── */

.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.vc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vc-btn-sm { padding: 6px 12px; font-size: 12px; }
.vc-btn-md { padding: 10px 20px; font-size: 14px; }
.vc-btn-lg { padding: 14px 28px; font-size: 16px; }

.vc-btn-primary {
  background: var(--victor-accent);
  color: white;
}

.vc-btn-primary:hover:not(:disabled) {
  background: var(--victor-accent-hover);
  box-shadow: var(--shadow-accent);
}

.vc-btn-secondary {
  background: transparent;
  color: var(--victor-accent);
  border: 1px solid var(--victor-accent);
}

.vc-btn-secondary:hover:not(:disabled) {
  background: var(--victor-accent-subtle);
}

.vc-btn-ghost {
  background: transparent;
  color: var(--text-primary);
}

.vc-btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover-v);
}

.vc-btn-danger {
  background: var(--status-error);
  color: white;
}

.vc-btn-danger:hover:not(:disabled) {
  background: #FF5555;
}

/* ── Victor Input Component ───────────────────── */

.vc-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vc-input-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vc-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
}

.vc-input::placeholder {
  color: var(--text-tertiary);
}

.vc-input:focus {
  border-color: var(--victor-accent);
  box-shadow: 0 0 0 3px var(--victor-accent-subtle);
}

.vc-input-error {
  border-color: var(--status-error);
}

.vc-input-error-text {
  font-size: 12px;
  color: var(--status-error);
}

/* ── Victor Badge Component ───────────────────── */

.vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.vc-badge-sm {
  padding: 2px 8px;
  font-size: 11px;
}

.vc-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vc-badge-connected {
  background: rgba(0, 214, 143, 0.12);
  color: var(--status-success);
}
.vc-badge-connected .vc-badge-dot { background: var(--status-success); box-shadow: 0 0 8px rgba(0, 214, 143, 0.4); }

.vc-badge-warning {
  background: rgba(255, 184, 0, 0.12);
  color: var(--status-warning);
}
.vc-badge-warning .vc-badge-dot { background: var(--status-warning); box-shadow: 0 0 8px rgba(255, 184, 0, 0.4); }

.vc-badge-error {
  background: rgba(255, 59, 59, 0.12);
  color: var(--status-error);
}
.vc-badge-error .vc-badge-dot { background: var(--status-error); box-shadow: 0 0 8px rgba(255, 59, 59, 0.4); }

.vc-badge-neutral {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-tertiary);
}
.vc-badge-neutral .vc-badge-dot { background: var(--text-tertiary); }

.vc-badge-info {
  background: rgba(59, 130, 246, 0.12);
  color: var(--status-info);
}
.vc-badge-info .vc-badge-dot { background: var(--status-info); box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); }

/* ── Victor Progress Component ────────────────── */

.vc-progress-wrap {
  width: 100%;
}

.vc-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.vc-progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.vc-progress-pct {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.vc-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.vc-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.vc-progress-green { background: var(--status-success); }
.vc-progress-white { background: #FFFFFF; }
.vc-progress-amber { background: var(--status-warning); }
.vc-progress-red { background: var(--status-error); }

/* ── Victor Stat Component ────────────────────── */

.vc-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vc-stat-value {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.vc-stat-prefix {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-secondary);
}

.vc-stat-label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vc-stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.vc-stat-trend-up { color: var(--status-success); }
.vc-stat-trend-down { color: var(--status-error); }
.vc-stat-trend-flat { color: var(--text-tertiary); }

.vc-stat-arrow {
  font-size: 10px;
}

/* ── Victor Table Component ───────────────────── */

.vc-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-v);
}

.vc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vc-th {
  padding: 10px 16px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-v);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.vc-th-right { text-align: right; }
.vc-th-center { text-align: center; }

.vc-tr {
  border-bottom: 1px solid var(--border-v);
  transition: background 0.1s ease;
}

.vc-tr:nth-child(even) { background: rgba(255,255,255,0.02); }

.vc-tr:hover { background: var(--bg-hover-v); }

.vc-tr-clickable { cursor: pointer; }

.vc-td {
  padding: 10px 16px;
  color: var(--text-primary);
}

.vc-td-right { text-align: right; }
.vc-td-center { text-align: center; }

/* ── Page Transitions & Animations ────────────── */

.victor-page-enter {
  animation: victor-page-in 0.3s ease;
}

@keyframes victor-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(255, 107, 0, 0); }
}

/* ── Section entrance stagger ─────────────────── */

@keyframes section-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.vc-section-enter {
  animation: section-enter 0.4s ease forwards;
  opacity: 0;
}

.vc-section-enter:nth-child(1) { animation-delay: 0.05s; }
.vc-section-enter:nth-child(2) { animation-delay: 0.1s; }
.vc-section-enter:nth-child(3) { animation-delay: 0.15s; }
.vc-section-enter:nth-child(4) { animation-delay: 0.2s; }
.vc-section-enter:nth-child(5) { animation-delay: 0.25s; }
.vc-section-enter:nth-child(6) { animation-delay: 0.3s; }

/* ── Responsive Grid Helpers ──────────────────── */

.vc-grid {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .vc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .vc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .vc-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Victor Heading Typography ────────────────── */

.vc-display {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
}

.vc-h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.1;
}

.vc-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
}

.vc-h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}

.vc-h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
}

.vc-body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.vc-body-sm {
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}

.vc-label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.vc-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ══════════════════════════════════════════════════
   PHASE 9B: COMMAND BAR + ACTIVITY FEED + TOASTS
   ══════════════════════════════════════════════════ */

/* ── Command Bar ──────────────────────────────── */

.cb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: cb-fade-in 0.15s ease;
}

@keyframes cb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cb-modal {
  width: 100%;
  max-width: 640px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  animation: cb-scale-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cb-scale-in {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.cb-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-v);
}

.cb-search-icon {
  color: var(--victor-accent);
  flex-shrink: 0;
}

.cb-input {
  flex: 1 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  caret-color: var(--victor-accent);
}

.cb-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

.cb-kbd {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.cb-suggestions {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 0;
}

.cb-section {
  padding: 4px 0;
}

.cb-section-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 20px 4px;
}

.cb-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  text-align: left;
  transition: background 0.1s ease;
}

.cb-suggestion-item:hover,
.cb-suggestion-selected {
  background: var(--bg-hover-v);
}

.cb-suggestion-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.cb-suggestion-label {
  flex: 1 1;
}

.cb-empty {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
}

.cb-response {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-v);
}

.cb-response-processing {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}

.cb-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--victor-accent);
  border-radius: 50%;
  animation: cb-spin 0.6s linear infinite;
}

@keyframes cb-spin {
  to { transform: rotate(360deg); }
}

.cb-response-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: cb-fade-in 0.3s ease;
}

.cb-response-icon {
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.cb-response-success .cb-response-icon { color: var(--status-success); }
.cb-response-error .cb-response-icon { color: var(--status-error); }

.cb-response-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.cb-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-v);
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ── Activity Feed Panel ──────────────────────── */

.af-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
  animation: cb-fade-in 0.15s ease;
}

.af-panel {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-v);
  display: flex;
  flex-direction: column;
  animation: af-slide-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes af-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.af-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-v);
  flex-shrink: 0;
}

.af-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-primary);
}

.af-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.af-export-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--victor-accent);
  background: var(--victor-accent-subtle);
  border: 1px solid var(--border-accent-v);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.af-export-btn:hover {
  background: var(--victor-accent-glow);
}

.af-close-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color 0.15s ease;
}

.af-close-btn:hover {
  color: var(--text-primary);
}

.af-events {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px 0;
}

.af-day-group {
  padding: 8px 0;
}

.af-day-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  padding: 12px 24px 8px;
  text-transform: uppercase;
}

.af-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 24px;
  transition: background 0.1s ease;
}

.af-event:hover {
  background: var(--bg-hover-v);
}

.af-event-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.af-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.af-dot-completed { background: var(--status-success); }
.af-dot-failed { background: var(--status-error); }
.af-dot-in_progress {
  background: var(--victor-accent);
  animation: pulse-glow 2s ease-in-out infinite;
}
.af-dot-pending {
  background: var(--text-tertiary);
  animation: pulse-glow 2s ease-in-out infinite;
}

.af-event-content {
  flex: 1 1;
  min-width: 0;
}

.af-event-agent {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: capitalize;
  margin-bottom: 2px;
}

.af-event-desc {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.af-event-cost {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.af-event-time {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.af-empty {
  padding: 40px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
}

/* ── Activity Ticker additions ────────────────── */

.vat-dot-pulse {
  background: var(--victor-accent) !important;
  animation: pulse-glow 2s ease-in-out infinite;
}

.vat-dot-error {
  background: var(--status-error) !important;
}

.vat-show-all {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--victor-accent);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.vat-show-all:hover {
  background: var(--victor-accent-subtle);
}

/* ── Toast Notifications ──────────────────────── */

.vt-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 400px;
}

.vt-toast {
  display: flex;
  align-items: stretch;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  pointer-events: auto;
  animation: vt-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vt-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.vt-toast-bar {
  width: 3px;
  flex-shrink: 0;
}

.vt-toast-success .vt-toast-bar { background: var(--status-success); }
.vt-toast-warning .vt-toast-bar { background: var(--status-warning); }
.vt-toast-error .vt-toast-bar { background: var(--status-error); }
.vt-toast-info .vt-toast-bar { background: var(--status-info); }

.vt-toast-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  flex: 1 1;
  min-width: 0;
}

.vt-toast-icon {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.vt-toast-success .vt-toast-icon { color: var(--status-success); }
.vt-toast-warning .vt-toast-icon { color: var(--status-warning); }
.vt-toast-error .vt-toast-icon { color: var(--status-error); }
.vt-toast-info .vt-toast-icon { color: var(--status-info); }

.vt-toast-message {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.vt-toast-dismiss {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.vt-toast-dismiss:hover {
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════
   PHASE 9C: MOBILE REDESIGN — VOICE-FIRST PREMIUM
   ══════════════════════════════════════════════════ */

/* ── Safe Areas & PWA ─────────────────────────── */

@media (display-mode: standalone) {
  .ml-root {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── Mobile Layout (updated) ──────────────────── */

.ml-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-primary);
  color: var(--text-primary);
  overscroll-behavior: none;
}

.ml-content {
  flex: 1 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 72px;
}

.ml-refresh-indicator {
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: var(--victor-accent);
  background: var(--victor-accent-subtle);
}

.ml-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 64px;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-v);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}

.ml-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  min-width: 48px;
  min-height: 48px;
  transition: color 0.15s ease;
}

.ml-nav-active {
  color: var(--victor-accent);
}

.ml-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ml-nav-label {
  letter-spacing: 0.02em;
}

/* ── Offline Indicator ────────────────────────── */

.mob-offline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 184, 0, 0.12);
  border-bottom: 1px solid rgba(255, 184, 0, 0.2);
  font-size: 12px;
  font-weight: 500;
  color: var(--status-warning);
}

.mob-offline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-warning);
  flex-shrink: 0;
}

/* ── Mobile Home ──────────────────────────────── */

.mob-home {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
}

.mob-greeting {
  padding-top: 8px;
}

.mob-greeting-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  color: var(--text-primary);
  line-height: 1.1;
  margin: 0;
}

.mob-greeting-date {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Next Up Card ─────────────────────────────── */

.mob-next-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.mob-next-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--victor-accent);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.mob-next-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-v);
}

.mob-next-event:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mob-next-time {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-secondary);
  min-width: 50px;
}

.mob-next-title {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Quick Stats Pills ────────────────────────── */

.mob-stats {
  display: flex;
  gap: 12px;
}

.mob-stat-pill {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.15s ease;
}

.mob-stat-pill:hover, .mob-stat-pill:active {
  border-color: var(--border-accent-v);
  background: var(--bg-tertiary);
}

.mob-stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
  color: var(--text-primary);
  line-height: 1;
}

.mob-stat-label {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Voice Interaction ────────────────────────── */

.vi-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 1;
  justify-content: flex-end;
  padding-bottom: 16px;
}

.vi-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  justify-content: flex-end;
  width: 100%;
  max-width: 320px;
}

.vi-transcript {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  animation: vi-fade-in 0.2s ease;
}

.vi-transcript-faded {
  color: var(--text-tertiary);
  font-size: 14px;
}

@keyframes vi-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vi-processing {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  animation: vi-fade-in 0.2s ease;
}

.vi-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--victor-accent);
  border-radius: 50%;
  animation: cb-spin 0.6s linear infinite;
}

.vi-response {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius);
  max-width: 320px;
  animation: vi-fade-in 0.3s ease;
}

.vi-response-icon {
  color: var(--status-success);
  font-weight: 700;
  flex-shrink: 0;
}

.vi-response span:last-child {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
}

.vi-followups {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  animation: vi-fade-in 0.4s ease;
}

.vi-followup-btn {
  padding: 8px 14px;
  background: var(--victor-accent-subtle);
  border: 1px solid var(--border-accent-v);
  border-radius: 100px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--victor-accent);
  cursor: pointer;
  transition: all 0.15s ease;
}

.vi-followup-btn:active {
  background: var(--victor-accent-glow);
}

/* ── Mic Button ───────────────────────────────── */

.vi-mic-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vi-waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  margin-bottom: 8px;
}

.vi-wave-bar {
  width: 6px;
  background: var(--victor-accent);
  border-radius: 3px;
  transition: height 0.1s ease;
  min-height: 8px;
}

.vi-mic-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vi-mic-idle {
  background: var(--victor-accent);
  box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4);
  animation: vi-pulse 3s ease-in-out infinite;
}

@keyframes vi-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); }
  50% { box-shadow: 0 0 0 16px rgba(255, 107, 0, 0); }
}

.vi-mic-listening {
  background: var(--victor-accent);
  width: 84px;
  height: 84px;
  box-shadow: 0 0 30px rgba(255, 107, 0, 0.4);
}

.vi-mic-processing {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-v);
}

.vi-mic-responded {
  background: var(--victor-accent);
  opacity: 0.7;
}

.vi-mic-responded:active {
  opacity: 1;
}

.vi-mic-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--victor-accent);
  border-radius: 50%;
  animation: cb-spin 0.6s linear infinite;
}

.vi-mic-hint {
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
}

/* ── Quick Actions Grid ───────────────────────── */

.qa-container {
  padding-top: 8px;
}

.qa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.qa-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.qa-edit-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--victor-accent);
  background: none;
  border: none;
  cursor: pointer;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.qa-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius);
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 72px;
}

.qa-item:active {
  background: var(--bg-hover-v);
  transform: scale(0.96);
}

.qa-item-editing {
  animation: qa-wobble 0.3s ease-in-out infinite alternate;
}

@keyframes qa-wobble {
  from { transform: rotate(-1deg); }
  to { transform: rotate(1deg); }
}

.qa-item-icon {
  font-size: 24px;
}

.qa-item-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}

/* ── Conversation View ────────────────────────── */

.cv-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

.cv-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cv-empty {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.cv-empty-icon {
  font-size: 40px;
  opacity: 0.3;
}

.cv-empty-text {
  font-size: 14px;
  color: var(--text-tertiary);
}

.cv-msg {
  display: flex;
  flex-direction: column;
  animation: vi-fade-in 0.2s ease;
}

.cv-msg-user {
  align-items: flex-end;
}

.cv-msg-assistant {
  align-items: flex-start;
}

.cv-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  position: relative;
}

.cv-bubble-user {
  background: var(--victor-accent-subtle);
  border: 1px solid var(--border-accent-v);
}

.cv-bubble-assistant {
  background: var(--bg-secondary);
  border: 1px solid var(--border-v);
}

.cv-bubble-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
  white-space: pre-wrap;
}

.cv-tts-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.cv-tts-btn:active {
  opacity: 1;
}

.cv-msg-time {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
  padding: 0 4px;
}

.cv-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.cv-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: cv-typing-bounce 1.2s ease-in-out infinite;
}

.cv-typing span:nth-child(2) { animation-delay: 0.15s; }
.cv-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes cv-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.cv-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-v);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.cv-input {
  flex: 1 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-v);
  border-radius: 100px;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.cv-input::placeholder {
  color: var(--text-tertiary);
}

.cv-input:focus {
  border-color: var(--victor-accent);
}

.cv-send-btn, .cv-mic-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.cv-send-btn {
  background: var(--victor-accent);
  color: white;
}

.cv-send-btn:disabled {
  opacity: 0.5;
}

.cv-mic-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-v);
}

/* ── Mobile Auth ──────────────────────────────── */

.ma-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 24px;
  background: var(--bg-primary);
  gap: 24px;
}

.ma-logo {
  width: 64px;
  height: 64px;
  background: var(--victor-accent);
  color: white;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

.ma-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  color: var(--text-primary);
  margin: 0;
}

.ma-pin-dots {
  display: flex;
  gap: 16px;
  margin: 16px 0;
}

.ma-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-tertiary);
  transition: all 0.15s ease;
}

.ma-dot-filled {
  background: var(--victor-accent);
  border-color: var(--victor-accent);
}

.ma-error {
  font-size: 13px;
  color: var(--status-error);
  text-align: center;
}

.ma-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  max-width: 280px;
  width: 100%;
}

.ma-numpad-key {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--border-v);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 auto;
  transition: all 0.1s ease;
}

.ma-numpad-key:active {
  background: var(--bg-hover-v);
  transform: scale(0.95);
}

.ma-numpad-empty {
  visibility: hidden;
}

.ma-biometric-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-v);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 16px;
  transition: all 0.15s ease;
}

.ma-biometric-btn:active {
  background: var(--bg-hover-v);
}

/* ── Mobile Tab Views ─────────────────────────── */

.mob-voice-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
  padding: 24px;
}

.mob-chat-tab {
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

.mob-settings-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
}

.mob-settings-link {
  display: inline-flex;
  padding: 12px 24px;
  background: var(--victor-accent);
  color: white;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.mob-settings-link:hover {
  background: var(--victor-accent-hover);
  color: white;
}

/* ── Purchase & Payment Pages ──────────────────── */

.pur-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
}

.pur-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.pur-title {
  font-family: var(--font-heading, var(--font));
  font-weight: 700;
  font-size: 24px;
  color: var(--text-primary);
}

.pur-link-btn {
  padding: 8px 16px;
  background: var(--victor-accent, #FF6B00);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.pur-link-btn:hover { background: var(--victor-accent-hover, #e55f00); }

.pur-spend-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 24px;
}

.pur-spend-card {
  background: var(--card-bg, #1A1A1A);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pur-spend-label {
  font-size: 12px;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pur-spend-value {
  font-family: var(--font-heading, var(--font));
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.pur-section {
  margin-bottom: 24px;
}

.pur-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.pur-card {
  background: var(--card-bg, #1A1A1A);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}
.pur-card:hover { border-color: var(--victor-accent, #FF6B00); }

.pur-card-pending {
  border-left: 3px solid var(--victor-accent, #FF6B00);
}

.pur-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
  min-width: 0;
}

.pur-card-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pur-card-meta {
  font-size: 12px;
  color: var(--text-secondary, #888);
}

.pur-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pur-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.pur-btn:hover { opacity: 0.85; }
.pur-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pur-btn-approve { background: #22C55E; color: white; }
.pur-btn-reject { background: #EF4444; color: white; }

.pur-status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  flex-shrink: 0;
}

.pur-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.pur-filter-btn {
  padding: 6px 14px;
  background: var(--card-bg, #1A1A1A);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 20px;
  color: var(--text-secondary, #888);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
}
.pur-filter-btn:hover { border-color: var(--victor-accent, #FF6B00); color: var(--text-primary); }
.pur-filter-active {
  background: var(--victor-accent, #FF6B00);
  border-color: var(--victor-accent, #FF6B00);
  color: white;
}

.pur-empty {
  color: var(--text-secondary, #888);
  font-size: 14px;
  text-align: center;
  padding: 32px 0;
}

/* ── Payment Method Cards ──────────────────────── */

.pm-card {
  background: var(--card-bg, #1A1A1A);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pm-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-card-brand {
  font-size: 18px;
}

.pm-card-info {
  display: flex;
  flex-direction: column;
}

.pm-card-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.pm-card-number {
  font-size: 13px;
  color: var(--text-secondary, #888);
  font-family: monospace;
  letter-spacing: 1px;
}

.pm-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-spend-bar {
  width: 120px;
  height: 6px;
  background: var(--border-color, rgba(255,255,255,0.08));
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.pm-spend-fill {
  height: 100%;
  background: var(--victor-accent, #FF6B00);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.pm-spend-text {
  position: absolute;
  top: -16px;
  right: 0;
  font-size: 10px;
  color: var(--text-secondary, #888);
  white-space: nowrap;
}

.pm-remove-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 4px;
  color: var(--text-secondary, #888);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pm-remove-btn:hover { border-color: #EF4444; color: #EF4444; }

/* ── Add Card Form ─────────────────────────────── */

.pm-form {
  background: var(--card-bg, #1A1A1A);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.pm-form-row {
  margin-bottom: 12px;
}

.pm-form-split {
  display: flex;
  gap: 8px;
}

.pm-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary, #141414);
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}
.pm-input:focus { border-color: var(--victor-accent, #FF6B00); }
.pm-input::placeholder { color: var(--text-secondary, #888); }

.pm-input-sm {
  width: auto;
  flex: 1 1;
}

@media (max-width: 640px) {
  .pur-spend-row { grid-template-columns: 1fr; }
  .pur-card { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pur-card-actions { width: 100%; }
  .pur-card-actions .pur-btn { flex: 1 1; }
  .pm-card { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pm-card-right { width: 100%; justify-content: space-between; }
}

/* ── Invoice Dashboard (inv-*) ───────────────────────────── */
.inv-page { padding: 24px; max-width: 1400px; margin: 0 auto; color: #fff; }
.inv-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.inv-title { font-family: var(--font-heading, 'Barlow Condensed', sans-serif); font-size: 32px; font-weight: 700; color: #fff; margin: 0; }
.inv-header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inv-search { background: #1A1A1A; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 8px 14px; color: #fff; font-size: 14px; min-width: 240px; outline: none; }
.inv-search:focus { border-color: #FF6B00; }
.inv-select { background: #1A1A1A; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 8px 12px; color: #fff; font-size: 13px; outline: none; }

/* Stats Bar */
.inv-stats-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.inv-stat { background: #1A1A1A; border-radius: 8px; padding: 14px 20px; display: flex; flex-direction: column; align-items: center; min-width: 120px; flex: 1 1; }
.inv-stat-count { font-family: var(--font-heading, 'Barlow Condensed', sans-serif); font-size: 24px; font-weight: 700; }
.inv-stat-label { font-size: 12px; color: #A0A0A0; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.inv-stat-danger .inv-stat-count { color: #EF4444; }
.inv-stat-warning .inv-stat-count { color: #F59E0B; }
.inv-stat-success .inv-stat-count { color: #22C55E; }

/* Alert */
.inv-alert { background: #1A1A1A; border-left: 3px solid #EF4444; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.inv-alert-critical { border-left-color: #EF4444; }
.inv-alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #EF4444; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.inv-alert-link { color: #FF6B00; text-decoration: underline; margin-left: 4px; }
.inv-alert-badge { background: #EF4444; color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }

/* Tabs */
.inv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.inv-tab { padding: 10px 18px; font-size: 13px; font-weight: 600; color: #A0A0A0; background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.inv-tab:hover { color: #fff; }
.inv-tab-active { color: #FF6B00; border-bottom-color: #FF6B00; }

/* Table */
.inv-table-wrap { overflow-x: auto; border-radius: 8px; background: #1A1A1A; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-table thead { border-bottom: 1px solid rgba(255,255,255,0.08); }
.inv-table th { padding: 10px 12px; text-align: left; color: #A0A0A0; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.inv-th-check { width: 32px; }
.inv-th-sortable { cursor: pointer; }
.inv-th-sortable:hover { color: #FF6B00; }
.inv-table td { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.inv-row { transition: background 0.1s; }
.inv-row:hover { background: rgba(255,255,255,0.03); }
.inv-row-critical { border-left: 3px solid #EF4444; }
.inv-row-warning { border-left: 3px solid #F59E0B; }
.inv-row-clean { border-left: 3px solid #22C55E; }
.inv-cell-supplier { display: flex; align-items: center; gap: 6px; }
.inv-supplier-name { font-weight: 500; white-space: nowrap; }
.inv-cell-entity { color: #A0A0A0; white-space: nowrap; }
.inv-cell-job { font-family: monospace; font-size: 12px; color: #FF6B00; }
.inv-cell-amount { font-weight: 600; white-space: nowrap; }
.inv-amount-over { color: #EF4444; }
.inv-cell-date { color: #A0A0A0; font-size: 12px; white-space: nowrap; }
.inv-cell-actions { display: flex; gap: 4px; }

/* Trust Badge */
.inv-trust-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.inv-trust-verified { background: #22C55E; color: #000; }
.inv-trust-known { background: #3B82F6; color: #fff; }
.inv-trust-new { background: #F59E0B; color: #000; }
.inv-trust-flagged { background: #EF4444; color: #fff; }
.inv-trust-blocked { background: #666; color: #fff; }

/* Variance */
.inv-cell-var { font-size: 12px; font-weight: 500; }
.inv-var-match { color: #22C55E; }
.inv-var-over { color: #EF4444; }
.inv-var-under { color: #F59E0B; }

/* Scope Badge */
.inv-scope-badge { font-size: 12px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.inv-scope-good { background: rgba(34,197,94,0.15); color: #22C55E; }
.inv-scope-partial { background: rgba(245,158,11,0.15); color: #F59E0B; }
.inv-scope-bad { background: rgba(239,68,68,0.15); color: #EF4444; }

/* Flag Dot */
.inv-flag-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 12px; font-size: 11px; font-weight: 700; padding: 0 6px; }
.inv-flag-critical { background: #EF4444; color: #fff; }
.inv-flag-warning { background: #F59E0B; color: #000; }
.inv-flag-clean { background: #22C55E; color: #000; }

/* Buttons */
.inv-btn { padding: 6px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; transition: opacity 0.15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.inv-btn:hover { opacity: 0.85; }
.inv-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.inv-btn-approve { background: #22C55E; color: #000; }
.inv-btn-reject { background: #EF4444; color: #fff; }
.inv-btn-dispute { background: #F59E0B; color: #000; }
.inv-btn-view { background: rgba(255,255,255,0.1); color: #fff; }
.inv-btn-cancel { background: rgba(255,255,255,0.08); color: #A0A0A0; }
.inv-btn-lg { padding: 10px 24px; font-size: 14px; }
.inv-btn-sm { padding: 4px 8px; font-size: 11px; }

/* Bulk Bar */
.inv-bulk-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #242424; border-top: 1px solid rgba(255,255,255,0.08); padding: 12px 24px; display: flex; align-items: center; gap: 12px; z-index: 50; font-size: 14px; }

/* Loading/Empty */
.inv-loading, .inv-empty { padding: 60px 24px; text-align: center; color: #A0A0A0; font-size: 15px; }

/* Mobile Card List — hidden on desktop */
.inv-card-list { display: none; }

/* Modal */
.inv-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 100; }
.inv-modal { background: #242424; border-radius: 12px; padding: 24px; max-width: 480px; width: 90%; }
.inv-modal-title { font-family: var(--font-heading, 'Barlow Condensed', sans-serif); font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.inv-modal-input { width: 100%; background: #1A1A1A; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 10px; color: #fff; font-size: 14px; resize: vertical; }
.inv-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ── Invoice Detail (inv-detail-*) ──────────────────────── */
.inv-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.inv-back-link { color: #A0A0A0; font-size: 13px; text-decoration: none; }
.inv-back-link:hover { color: #FF6B00; }
.inv-status-badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.inv-status-pending_review { background: #F59E0B; color: #000; }
.inv-status-approved { background: #22C55E; color: #000; }
.inv-status-rejected { background: #EF4444; color: #fff; }
.inv-status-disputed { background: #F59E0B; color: #000; }
.inv-status-processing { background: #3B82F6; color: #fff; }

.inv-detail-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; gap: 20px; margin-bottom: 24px; }
.inv-detail-left, .inv-detail-right { display: flex; flex-direction: column; gap: 16px; }

.inv-card-section { background: #1A1A1A; border-radius: 8px; padding: 20px; }
.inv-section-title { font-family: var(--font-heading, 'Barlow Condensed', sans-serif); font-size: 16px; font-weight: 600; color: #A0A0A0; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 14px; }

.inv-detail-rows { display: flex; flex-direction: column; gap: 8px; }
.inv-detail-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; gap: 12px; }
.inv-label { color: #A0A0A0; flex-shrink: 0; }
.inv-total-row { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 8px; margin-top: 4px; }
.inv-total-value { font-size: 18px; font-weight: 700; color: #FF6B00; }

/* Line Items */
.inv-line-items { margin-top: 14px; overflow-x: auto; }
.inv-li-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-li-table th { padding: 6px 8px; text-align: left; color: #A0A0A0; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.08); }
.inv-li-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }

/* Bank Details */
.inv-bank-details { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.inv-bank-status { margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.inv-bank-match { background: rgba(34,197,94,0.1); color: #22C55E; }
.inv-bank-changed { background: rgba(239,68,68,0.15); color: #EF4444; }
.inv-bank-none { background: rgba(255,255,255,0.05); color: #A0A0A0; }

/* Flags List */
.inv-flags-list { display: flex; flex-direction: column; gap: 6px; }
.inv-flag-item { padding: 8px 12px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.inv-flag-item.inv-flag-critical { background: rgba(239,68,68,0.1); color: #EF4444; border-left: 3px solid #EF4444; }
.inv-flag-item.inv-flag-warning { background: rgba(245,158,11,0.1); color: #F59E0B; border-left: 3px solid #F59E0B; }

/* Fraud Bar */
.inv-fraud-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.inv-fraud-label { font-size: 12px; color: #A0A0A0; flex-shrink: 0; }
.inv-fraud-track { flex: 1 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.inv-fraud-fill { height: 100%; background: linear-gradient(90deg, #22C55E, #F59E0B 40%, #EF4444 70%); border-radius: 4px; transition: width 0.3s; }
.inv-fraud-value { font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }

/* Scope List */
.inv-scope-list { display: flex; flex-direction: column; gap: 6px; }
.inv-scope-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.inv-scope-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.inv-scope-matched { background: rgba(34,197,94,0.05); }
.inv-scope-matched .inv-scope-icon { background: #22C55E; color: #000; }
.inv-scope-missing { background: rgba(239,68,68,0.05); }
.inv-scope-missing .inv-scope-icon { background: #EF4444; color: #fff; }
.inv-scope-extra { background: rgba(245,158,11,0.05); }
.inv-scope-extra .inv-scope-icon { background: #F59E0B; color: #000; }
.inv-scope-conf { margin-left: auto; font-size: 11px; color: #A0A0A0; }
.inv-scope-score { margin-top: 10px; font-size: 14px; font-weight: 600; }

/* Amount Compare */
.inv-amount-compare .inv-detail-row { font-size: 14px; }
.inv-variance-row { font-weight: 700; margin-top: 4px; }

/* Job Status */
.inv-job-status { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.inv-job-pending { background: rgba(255,255,255,0.08); color: #A0A0A0; }
.inv-job-in_progress { background: rgba(59,130,246,0.15); color: #3B82F6; }
.inv-job-completed { background: rgba(34,197,94,0.15); color: #22C55E; }
.inv-job-invoiced { background: rgba(245,158,11,0.15); color: #F59E0B; }
.inv-job-paid { background: rgba(34,197,94,0.15); color: #22C55E; }
.inv-job-disputed { background: rgba(239,68,68,0.15); color: #EF4444; }
.inv-job-cancelled { background: rgba(239,68,68,0.15); color: #EF4444; }

/* Photo Grid */
.inv-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); grid-gap: 8px; gap: 8px; }
.inv-photo-thumb { background: #242424; border-radius: 6px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #A0A0A0; cursor: pointer; }
.inv-photo-thumb:hover { background: #333; }

.inv-no-data { color: #A0A0A0; font-size: 14px; }

/* Actions Bar */
.inv-actions-bar { background: #1A1A1A; border-radius: 8px; padding: 20px; }
.inv-notes-row { margin-bottom: 14px; }
.inv-notes-input { width: 100%; background: #0D0D0D; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 10px; color: #fff; font-size: 14px; resize: vertical; }
.inv-action-buttons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inv-confirm-group { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.inv-bank-block { background: rgba(239,68,68,0.1); color: #EF4444; padding: 10px 16px; border-radius: 6px; font-size: 13px; }
.inv-bank-block a { color: #FF6B00; margin-left: 6px; }

/* Dispute Composer */
.inv-dispute-composer { background: #1A1A1A; border-radius: 8px; padding: 20px; margin-top: 16px; }
.inv-dispute-textarea { width: 100%; background: #0D0D0D; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 12px; color: #fff; font-size: 14px; line-height: 1.5; resize: vertical; }
.inv-dispute-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }

/* Supplier Strip */
.inv-supplier-strip { background: #1A1A1A; border-radius: 8px; padding: 14px 20px; margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.inv-strip-name { font-weight: 600; font-size: 14px; }
.inv-strip-stat { color: #A0A0A0; }
.inv-strip-trust { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.inv-strip-bank { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }

/* Totals Section */
.inv-totals { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }

/* ── Bank Change Alerts (bca-*) ─────────────────────────── */
.bca-section { margin-bottom: 24px; }
.bca-section-title { font-family: var(--font-heading, 'Barlow Condensed', sans-serif); font-size: 18px; font-weight: 600; color: #A0A0A0; margin: 0 0 12px; }

.bca-card { background: #1A1A1A; border-radius: 8px; padding: 20px; margin-bottom: 12px; }
.bca-card-unverified { border-left: 3px solid #EF4444; }
.bca-card-verified { border-left: 3px solid #22C55E; opacity: 0.7; }
.bca-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bca-alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #EF4444; color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700; }
.bca-verified-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #22C55E; color: #000; border-radius: 50%; font-size: 13px; font-weight: 700; }
.bca-supplier-name { font-weight: 600; font-size: 16px; }
.bca-change-type { color: #F59E0B; font-size: 13px; font-weight: 500; }
.bca-verified-date { color: #A0A0A0; font-size: 12px; margin-left: auto; }

.bca-comparison { display: flex; align-items: stretch; gap: 12px; margin-bottom: 14px; }
.bca-col { flex: 1 1; background: #0D0D0D; border-radius: 6px; padding: 12px; }
.bca-col-label { font-size: 11px; text-transform: uppercase; color: #A0A0A0; letter-spacing: 0.5px; display: block; margin-bottom: 8px; }
.bca-col-old { border: 1px solid rgba(239,68,68,0.2); }
.bca-col-new { border: 1px solid rgba(34,197,94,0.2); }
.bca-detail { font-size: 14px; margin-bottom: 4px; font-family: monospace; }
.bca-arrow { display: flex; align-items: center; color: #A0A0A0; font-size: 18px; flex-shrink: 0; }

.bca-context { display: flex; gap: 16px; font-size: 13px; color: #A0A0A0; margin-bottom: 12px; flex-wrap: wrap; }
.bca-recommendation { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.15); border-radius: 6px; padding: 10px 14px; font-size: 13px; color: #F59E0B; margin-bottom: 14px; }
.bca-actions { display: flex; gap: 10px; }

/* ── Supplier Page (sup-*) ──────────────────────────────── */
.sup-add-form { margin-bottom: 20px; }
.sup-form-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; margin-bottom: 14px; }
.sup-input { background: #0D0D0D; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 10px 12px; color: #fff; font-size: 14px; outline: none; }
.sup-input:focus { border-color: #FF6B00; }
.sup-input-wide { grid-column: 1 / -1; }
.sup-form-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Mobile Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .inv-page { padding: 16px; }
  .inv-header { flex-direction: column; align-items: stretch; }
  .inv-search { min-width: unset; width: 100%; }
  .inv-stats-bar { flex-direction: row; flex-wrap: wrap; }
  .inv-stat { min-width: 0; padding: 10px 12px; }
  .inv-stat-count { font-size: 18px; }

  /* Hide desktop table, show card list */
  .inv-table-wrap { display: none; }
  .inv-card-list { display: flex; flex-direction: column; gap: 8px; }

  .inv-card { background: #1A1A1A; border-radius: 8px; padding: 14px; }
  .inv-card-critical { border-left: 3px solid #EF4444; }
  .inv-card-warning { border-left: 3px solid #F59E0B; }
  .inv-card-clean { border-left: 3px solid #22C55E; }
  .inv-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .inv-card-supplier { font-weight: 600; font-size: 15px; }
  .inv-card-mid { display: flex; justify-content: space-between; font-size: 13px; color: #A0A0A0; margin-bottom: 6px; }
  .inv-card-bottom { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
  .inv-card-amount { font-size: 18px; font-weight: 700; }
  .inv-card-actions { display: flex; gap: 6px; }
  .inv-card-actions .inv-btn { flex: 1 1; }

  /* Detail: single column */
  .inv-detail-grid { grid-template-columns: 1fr; }
  .inv-detail-header { gap: 8px; }

  /* Actions sticky */
  .inv-actions-bar { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 10; border-radius: 12px 12px 0 0; }

  /* Supplier form */
  .sup-form-grid { grid-template-columns: 1fr; }

  /* Bank alerts */
  .bca-comparison { flex-direction: column; }
  .bca-arrow { display: none; }
}


/* ========================================
   Phase 14A: Agent Workspaces + Command Centre
   Prefixes: vac- (agent card), vcc- (command centre),
   vaw- (agent workspace), vlp- (list panel), vdp- (detail panel),
   vap- (actions panel), vcf- (create form), vie- (inline edit),
   vkb- (kanban board), vut- (undo toast)
   ======================================== */

/* ─── VictorAgentCard (vac-) ─── */
.vac-card {
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  color: #fff;
  width: 100%;
  font-family: var(--font);
}
.vac-card:hover {
  border-color: #FF6B00;
  box-shadow: 0 0 20px rgba(255,107,0,0.1);
}
.vac-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vac-icon { font-size: 20px; }
.vac-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1 1;
}
.vac-badge {
  background: #EF4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.vac-metrics {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vac-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vac-metric-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.vac-metric-value {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.vac-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #FF6B00;
  font-size: 13px;
  font-weight: 600;
  margin-top: auto;
}

/* ─── Command Centre (vcc-) ─── */
.vcc-centre {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.vcc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.vcc-heading {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}
.vcc-header-actions {
  display: flex;
  gap: 8px;
}
.vcc-header-btn {
  background: #242424;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.15s;
}
.vcc-header-btn:hover { background: #333; }

/* Quick Stats */
.vcc-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.vcc-stat {
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
  min-width: 160px;
}
.vcc-stat-icon { font-size: 18px; }
.vcc-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.vcc-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Quick Actions */
.vcc-quick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.vcc-quick-btn {
  background: rgba(255,107,0,0.1);
  border: 1px solid rgba(255,107,0,0.3);
  border-radius: 20px;
  padding: 8px 16px;
  color: #FF6B00;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  font-family: var(--font);
}
.vcc-quick-btn:hover {
  background: rgba(255,107,0,0.2);
}

/* Agent Cards Grid */
.vcc-agents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 32px;
}
.vcc-loading {
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 60px 0;
  font-size: 14px;
}

/* Notifications */
.vcc-notifications {
  margin-bottom: 32px;
}
.vcc-section-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}
.vcc-notif-list {
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.vcc-notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.vcc-notif-item:last-child { border-bottom: none; }
.vcc-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vcc-notif-icon { font-size: 14px; flex-shrink: 0; }
.vcc-notif-msg {
  flex: 1 1;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.vcc-notif-time {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

/* Spend Tracker */
.vcc-spend { margin-bottom: 32px; }
.vcc-spend-row {
  display: flex;
  gap: 16px;
}
.vcc-spend-item {
  flex: 1 1;
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px;
}
.vcc-spend-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 4px;
}
.vcc-spend-amount {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  display: block;
  margin-bottom: 10px;
}
.vcc-spend-bar {
  height: 6px;
  background: #242424;
  border-radius: 3px;
  overflow: hidden;
}
.vcc-spend-fill {
  height: 100%;
  background: #FF6B00;
  border-radius: 3px;
  transition: width 0.3s;
}

/* ─── Agent Workspace (vaw-) ─── */
.vaw-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100vh - 60px);
}
.vaw-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.vaw-back {
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
}
.vaw-back:hover { color: #FF6B00; }
.vaw-agent-icon { font-size: 22px; }
.vaw-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  flex: 1 1;
}
.vaw-view-toggle {
  display: flex;
  gap: 2px;
  background: #242424;
  border-radius: 8px;
  padding: 2px;
}
.vaw-view-btn {
  background: none;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.vaw-view-active {
  background: #1A1A1A;
  color: #FF6B00;
}
.vaw-panels {
  display: flex;
  flex: 1 1;
  overflow: hidden;
}
.vaw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: rgba(255,255,255,0.5);
  gap: 12px;
}
.vaw-back-link {
  color: #FF6B00;
  font-size: 14px;
}
.vaw-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: #FF6B00;
  color: #fff;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(255,107,0,0.4);
  z-index: 100;
}

/* ─── List Panel (vlp-) ─── */
.vlp-panel {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0D0D0D;
}
.vlp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.vlp-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
}
.vlp-create-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,107,0,0.15);
  border: none;
  color: #FF6B00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vlp-create-btn:hover { background: rgba(255,107,0,0.25); }
.vlp-search-row { padding: 8px 12px; }
.vlp-search {
  width: 100%;
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
  font-family: var(--font);
}
.vlp-search::placeholder { color: rgba(255,255,255,0.3); }
.vlp-controls {
  display: flex;
  gap: 6px;
  padding: 0 12px 8px;
}
.vlp-select {
  flex: 1 1;
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 8px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-family: var(--font);
}
.vlp-list {
  flex: 1 1;
  overflow-y: auto;
}
.vlp-loading, .vlp-empty {
  padding: 40px 16px;
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 13px;
}
.vlp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.1s;
  width: 100%;
  text-align: left;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: #fff;
  font-family: var(--font);
}
.vlp-item:hover { background: rgba(255,255,255,0.03); }
.vlp-item-active {
  background: rgba(255,107,0,0.08);
  border-left-color: #FF6B00;
}
.vlp-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1;
}
.vlp-item-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vlp-item-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vlp-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 8px;
}
.vlp-item-metric {
  font-size: 12px;
  font-weight: 700;
}
.vlp-item-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.vlp-item-time {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}

/* ─── Detail Panel (vdp-) ─── */
.vdp-panel {
  flex: 1 1;
  overflow-y: auto;
  padding: 24px;
  min-width: 0;
}
.vdp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 14px;
}
.vdp-loading {
  text-align: center;
  padding: 60px 0;
  color: rgba(255,255,255,0.4);
}
.vdp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.vdp-title-row { display: flex; flex-direction: column; gap: 4px; }
.vdp-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.vdp-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.vdp-toolbar {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.vdp-btn {
  background: #242424;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 14px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  text-decoration: none;
}
.vdp-btn:hover { background: #333; color: #fff; }
.vdp-btn-danger { color: #EF4444; }
.vdp-btn-danger:hover { background: rgba(239,68,68,0.15); }
.vdp-btn-ext { color: #60a5fa; }
.vdp-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vdp-field {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.vdp-field-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: 120px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* ─── Inline Edit (vie-) ─── */
.vie-value {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  cursor: default;
  padding: 4px 0;
  flex: 1 1;
  min-width: 0;
  word-break: break-word;
}
.vie-editable {
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,0.15);
}
.vie-editable:hover {
  border-bottom-color: #FF6B00;
  color: #fff;
}
.vie-editing {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vie-input {
  background: #1A1A1A;
  border: 1px solid #FF6B00;
  border-radius: 6px;
  padding: 6px 10px;
  color: #fff;
  font-size: 14px;
  font-family: var(--font);
  width: 100%;
}
.vie-textarea {
  resize: vertical;
  min-height: 60px;
}
.vie-select { cursor: pointer; }
.vie-actions {
  display: flex;
  gap: 6px;
}
.vie-btn {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font);
}
.vie-btn-save {
  background: #FF6B00;
  color: #fff;
}
.vie-btn-cancel {
  background: #242424;
  color: rgba(255,255,255,0.6);
}

/* ─── Actions Panel (vap-) ─── */
.vap-panel {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
  padding: 20px;
  background: #0D0D0D;
}
.vap-section {
  margin-bottom: 24px;
}
.vap-section-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
}
.vap-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vap-action-btn {
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background 0.15s;
}
.vap-action-btn:hover { background: #242424; }
.vap-action-primary {
  background: rgba(255,107,0,0.1);
  border-color: rgba(255,107,0,0.3);
  color: #FF6B00;
}
.vap-action-primary:hover { background: rgba(255,107,0,0.2); }
.vap-action-danger { color: #EF4444; }
.vap-action-danger:hover { background: rgba(239,68,68,0.1); }

.vap-external-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #60a5fa;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 14px;
  background: #1A1A1A;
  border: 1px solid rgba(96,165,250,0.2);
  border-radius: 8px;
}
.vap-external-link:hover { background: rgba(96,165,250,0.1); }

/* Notes */
.vap-note-display {
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  min-height: 60px;
  white-space: pre-wrap;
}
.vap-note-display:hover { border-color: rgba(255,107,0,0.3); }
.vap-note-edit { display: flex; flex-direction: column; gap: 8px; }
.vap-note-input {
  background: #1A1A1A;
  border: 1px solid #FF6B00;
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  font-size: 13px;
  font-family: var(--font);
  resize: vertical;
}
.vap-note-actions { display: flex; gap: 6px; }
.vap-note-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: #242424;
  color: rgba(255,255,255,0.6);
  font-family: var(--font);
}
.vap-note-save { background: #FF6B00; color: #fff; }

/* Timeline */
.vap-timeline { display: flex; flex-direction: column; }
.vap-timeline-empty {
  text-align: center;
  color: rgba(255,255,255,0.3);
  font-size: 12px;
  padding: 20px;
}
.vap-timeline-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.vap-timeline-item:last-child { border-bottom: none; }
.vap-timeline-icon {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #242424;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  font-weight: 700;
}
.vap-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vap-timeline-msg {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.vap-timeline-time {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}

/* ─── Create Form (vcf-) ─── */
.vcf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
}
.vcf-panel {
  width: 400px;
  max-width: 100%;
  background: #1A1A1A;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: vcf-slide-in 0.2s ease-out;
}
@keyframes vcf-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.vcf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vcf-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.vcf-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 4px;
}
.vcf-close:hover { color: #fff; }
.vcf-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vcf-field { display: flex; flex-direction: column; gap: 6px; }
.vcf-field-error .vcf-input { border-color: #EF4444; }
.vcf-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.vcf-required { color: #EF4444; margin-left: 2px; }
.vcf-input {
  background: #242424;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  font-family: var(--font);
  transition: border-color 0.15s;
}
.vcf-input:focus {
  border-color: #FF6B00;
  outline: none;
}
.vcf-input::placeholder { color: rgba(255,255,255,0.25); }
.vcf-textarea {
  resize: vertical;
  min-height: 80px;
}
.vcf-select { cursor: pointer; }
.vcf-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #333;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.vcf-toggle-on { background: #FF6B00; }
.vcf-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.vcf-toggle-on .vcf-toggle-thumb { transform: translateX(20px); }
.vcf-error {
  font-size: 11px;
  color: #EF4444;
}
.vcf-footer {
  display: flex;
  gap: 8px;
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.vcf-btn {
  flex: 1 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font);
}
.vcf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vcf-btn-cancel {
  background: #242424;
  color: rgba(255,255,255,0.7);
}
.vcf-btn-save {
  background: #FF6B00;
  color: #fff;
}

/* ─── Delete Confirm Modal ─── */
.vcd-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vcd-delete-modal {
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
}
.vcd-delete-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.vcd-delete-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  margin-bottom: 12px;
}
.vcd-delete-warning {
  font-size: 13px;
  color: #F59E0B;
  margin-bottom: 8px;
}
.vcd-delete-undo {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 24px;
}
.vcd-delete-actions {
  display: flex;
  gap: 10px;
}
.vcd-delete-btn {
  flex: 1 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font);
}
.vcd-delete-btn:disabled { opacity: 0.5; }
.vcd-delete-cancel {
  background: #242424;
  color: rgba(255,255,255,0.7);
}
.vcd-delete-confirm {
  background: #EF4444;
  color: #fff;
}

/* ─── Undo Toast (vut-) ─── */
.vut-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 400;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: vut-slide-up 0.25s ease-out;
}
@keyframes vut-slide-up {
  from { transform: translateX(-50%) translateY(100%); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.vut-message {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.vut-undo-btn {
  background: rgba(255,107,0,0.15);
  border: 1px solid rgba(255,107,0,0.3);
  border-radius: 6px;
  padding: 6px 14px;
  color: #FF6B00;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}
.vut-undo-btn:hover { background: rgba(255,107,0,0.25); }

/* ─── Kanban Board (vkb-) ─── */
.vkb-board {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  overflow-x: auto;
  flex: 1 1;
}
.vkb-column {
  min-width: 240px;
  width: 240px;
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
  transition: border-color 0.15s;
}
.vkb-column-over {
  border-color: #FF6B00;
  background: rgba(255,107,0,0.05);
}
.vkb-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vkb-column-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.6);
}
.vkb-column-count {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  background: #242424;
  padding: 2px 8px;
  border-radius: 10px;
}
.vkb-column-cards {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vkb-card {
  background: #242424;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px;
  cursor: -webkit-grab;
  cursor: grab;
  transition: box-shadow 0.15s, opacity 0.15s;
}
.vkb-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.vkb-card-dragging {
  opacity: 0.4;
}
.vkb-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: block;
  margin-bottom: 4px;
}
.vkb-card-value {
  font-size: 14px;
  font-weight: 700;
  color: #22C55E;
  display: block;
  margin-bottom: 4px;
}
.vkb-card-contact {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  display: block;
}
.vkb-card-days {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  display: block;
  margin-top: 4px;
}
.vkb-card-stale {
  color: #F59E0B;
}

/* ─── Content Calendar (vcc-calendar) ─── */
.vcc-calendar {
  padding: 24px;
}
.vcc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.vcc-nav-btn {
  background: #242424;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.vcc-nav-btn:hover { background: #333; }
.vcc-nav-label {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  min-width: 180px;
  text-align: center;
}
.vcc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
  gap: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.vcc-day-header {
  padding: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  background: #1A1A1A;
}
.vcc-day {
  background: #0D0D0D;
  padding: 8px;
  min-height: 80px;
  cursor: pointer;
  transition: background 0.1s;
}
.vcc-day:hover { background: #1A1A1A; }
.vcc-day-out { opacity: 0.3; }
.vcc-day-has-items { background: rgba(255,107,0,0.03); }
.vcc-day-num {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 4px;
}
.vcc-event {
  background: #1A1A1A;
  border-left: 3px solid #FF6B00;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.vcc-event:hover { background: #242424; }
.vcc-more {
  font-size: 10px;
  color: #FF6B00;
  cursor: pointer;
}

/* ─── Phase 14A Responsive ─── */
@media (max-width: 1024px) {
  .vcc-agents-grid { grid-template-columns: repeat(2, 1fr); }
  .vaw-panels { flex-direction: column; }
  .vlp-panel { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); max-height: 300px; }
  .vap-panel { width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,0.06); }
  .vkb-column { min-width: 200px; width: 200px; }
}

@media (max-width: 768px) {
  .vcc-centre { padding: 16px; }
  .vcc-agents-grid { grid-template-columns: 1fr; }
  .vcc-stats-row { flex-direction: column; }
  .vcc-spend-row { flex-direction: column; }
  .vcc-heading { font-size: 22px; }
  .vaw-header { padding: 12px 16px; }
  .vaw-title { font-size: 18px; }
  .vaw-fab { display: flex; }
  .vlp-panel { max-height: 250px; }
  .vap-panel { display: none; }
  .vdp-field { flex-direction: column; gap: 4px; }
  .vdp-field-label { width: auto; }
  .vcf-panel { width: 100%; }
  .vcf-overlay { justify-content: center; align-items: flex-end; }
  @keyframes vcf-slide-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* ═══════════════════════════════════════════════════════
   Phase 14B: Comm Toggles (vct-), Connections Manager (vcm-),
   Alerts (val-), Voice Page (vvp-), Agents List (vag-)
   ═══════════════════════════════════════════════════════ */

/* ── Comm Toggles (vct-) ── */
.vct-bar {
  display: flex; gap: 4px; align-items: center;
}
.vct-compact { gap: 2px; }
.vct-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.35);
  font-size: 12px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all 0.15s ease;
}
.vct-toggle:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
.vct-toggle-on {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.2);
  color: #38bdf8;
}
.vct-toggle-on:hover { background: rgba(56,189,248,0.18); }
.vct-toggle-off { opacity: 0.6; }
.vct-icon { display: flex; align-items: center; }
.vct-label { white-space: nowrap; }
.vct-compact .vct-toggle { padding: 4px 6px; }
.vct-compact .vct-label { display: none; }

/* ── Connections Manager (vcm-) ── */
.vcm-page { padding: 16px; }
.vcm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.vcm-title { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.92); margin: 0; font-family: var(--font-heading, var(--font)); }
.vcm-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.2);
  color: #38bdf8; font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all 0.15s ease;
}
.vcm-add-btn:hover { background: rgba(56,189,248,0.2); }
.vcm-loading, .vcm-empty {
  text-align: center; padding: 40px 16px;
  color: rgba(255,255,255,0.4); font-size: 14px;
}
.vcm-empty p { margin: 0 0 16px; }
.vcm-group { margin-bottom: 24px; }
.vcm-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.35);
  margin: 0 0 8px; padding: 0 4px;
}
.vcm-list { display: flex; flex-direction: column; gap: 6px; }
.vcm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s ease; position: relative;
  flex-wrap: wrap;
}
.vcm-item:hover { background: rgba(255,255,255,0.05); }
.vcm-item-status { flex-shrink: 0; }
.vcm-dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.vcm-item-info { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vcm-item-name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); }
.vcm-item-meta { font-size: 12px; color: rgba(255,255,255,0.4); }
.vcm-item-error { font-size: 11px; color: #EF4444; margin-top: 2px; }
.vcm-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Toggle switch */
.vcm-toggle {
  width: 36px; height: 20px; border-radius: 10px;
  background: rgba(255,255,255,0.1); border: none;
  cursor: pointer; position: relative; padding: 0;
  transition: background 0.2s ease;
}
.vcm-toggle-on { background: rgba(34,197,94,0.5); }
.vcm-toggle-track { display: block; width: 100%; height: 100%; position: relative; }
.vcm-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: white; transition: transform 0.2s ease;
}
.vcm-toggle-on .vcm-toggle-thumb { transform: translateX(16px); }

/* Manage dropdown */
.vcm-menu-wrap { position: relative; }
.vcm-manage-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all 0.15s ease;
}
.vcm-manage-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.vcm-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 160px; padding: 4px; border-radius: 10px;
  background: rgba(26,28,34,0.98); border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 20; animation: cin-fade-in 0.15s ease;
}
.vcm-dropdown-item {
  display: block; width: 100%; padding: 8px 12px;
  background: none; border: none; text-align: left;
  color: rgba(255,255,255,0.7); font-size: 13px; font-family: inherit;
  cursor: pointer; border-radius: 6px; transition: background 0.1s ease;
}
.vcm-dropdown-item:hover { background: rgba(255,255,255,0.06); }
.vcm-dropdown-danger { color: #EF4444; }
.vcm-dropdown-danger:hover { background: rgba(239,68,68,0.1); }

/* Test result */
.vcm-test-msg {
  width: 100%; font-size: 12px; padding: 6px 14px;
  color: rgba(255,255,255,0.5); margin-top: 4px;
}
.vcm-test-ok { color: #22C55E; }
.vcm-test-fail { color: #EF4444; }

/* Modal */
.vcm-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; animation: cin-fade-in 0.2s ease;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vcm-modal {
  width: 90%; max-width: 420px; padding: 24px;
  background: #1A1A1A; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; animation: cin-fade-in 0.2s ease;
}
.vcm-modal-title { font-size: 17px; font-weight: 700; color: rgba(255,255,255,0.92); margin: 0 0 8px; }
.vcm-modal-warning { font-size: 14px; color: rgba(255,255,255,0.6); margin: 0 0 8px; line-height: 1.4; }
.vcm-modal-note { font-size: 13px; color: #EF4444; margin: 0 0 20px; }
.vcm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.vcm-modal-btn {
  padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all 0.15s ease;
}
.vcm-modal-cancel {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
}
.vcm-modal-cancel:hover { background: rgba(255,255,255,0.1); }
.vcm-modal-delete { background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.3); color: #EF4444; }
.vcm-modal-delete:hover { background: rgba(239,68,68,0.3); }
.vcm-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Platform Directory */
.vcm-directory {
  width: 90%; max-width: 560px; max-height: 80vh;
  display: flex; flex-direction: column;
  background: #1A1A1A; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; animation: cin-fade-in 0.2s ease;
  overflow: hidden;
}
.vcm-dir-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vcm-dir-title { font-size: 17px; font-weight: 700; color: rgba(255,255,255,0.92); margin: 0; white-space: nowrap; }
.vcm-dir-search {
  flex: 1 1; padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9); font-size: 13px; font-family: inherit; outline: none;
}
.vcm-dir-search::placeholder { color: rgba(255,255,255,0.3); }
.vcm-dir-search:focus { border-color: rgba(56,189,248,0.3); }
.vcm-dir-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4); padding: 4px; display: flex;
}
.vcm-dir-close:hover { color: rgba(255,255,255,0.7); }
.vcm-dir-body { overflow-y: auto; padding: 16px 20px; flex: 1 1; }
.vcm-dir-group { margin-bottom: 20px; }
.vcm-dir-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.35);
  margin: 0 0 8px;
}
.vcm-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-gap: 8px; gap: 8px; }
.vcm-dir-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s ease;
}
.vcm-dir-card:hover { background: rgba(255,255,255,0.06); }
.vcm-dir-icon { font-size: 24px; }
.vcm-dir-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); text-align: center; }
.vcm-dir-connected { font-size: 11px; color: #22C55E; font-weight: 500; }
.vcm-dir-connect {
  padding: 4px 12px; border-radius: 6px;
  background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.2);
  color: #38bdf8; font-size: 11px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all 0.15s ease;
}
.vcm-dir-connect:hover { background: rgba(56,189,248,0.2); }

/* ── Alerts Page (val-) ── */
.val-page { padding: 16px; }
.val-loading, .val-empty {
  text-align: center; padding: 40px 16px;
  color: rgba(255,255,255,0.4); font-size: 14px;
}
.val-list { display: flex; flex-direction: column; gap: 6px; }
.val-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s ease;
}
.val-item:hover { background: rgba(255,255,255,0.05); }
.val-item-critical { border-left: 3px solid #EF4444; }
.val-item-warning { border-left: 3px solid #F59E0B; }
.val-item-info { border-left: 3px solid #60a5fa; }
.val-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.val-content { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.val-title { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); }
.val-time { font-size: 11px; color: rgba(255,255,255,0.35); }
.val-action {
  font-size: 12px; font-weight: 600; color: #38bdf8; text-decoration: none;
  padding: 4px 10px; border-radius: 6px; background: rgba(56,189,248,0.1);
  transition: background 0.15s ease; flex-shrink: 0;
}
.val-action:hover { background: rgba(56,189,248,0.2); }

/* ── Voice Page (vvp-) ── */
.vvp-page {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 16px; gap: 20px;
}
.vvp-status {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.5);
  text-align: center; min-height: 20px;
}
.vvp-mic-btn {
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.vvp-mic-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.vvp-mic-active {
  background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.4);
  color: #38bdf8; animation: vvp-pulse 2s ease-in-out infinite;
}
.vvp-mic-processing {
  background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.3);
  color: #fbbf24;
}
.vvp-mic-btn:disabled { opacity: 0.3; cursor: not-allowed; }
@keyframes vvp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.3); }
  50% { box-shadow: 0 0 0 20px rgba(56,189,248,0); }
}
.vvp-unsupported {
  font-size: 13px; color: rgba(255,255,255,0.4);
  padding: 8px 16px; border-radius: 8px;
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.15);
}
.vvp-caption {
  font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.8);
  padding: 12px 20px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  max-width: 400px; text-align: center;
}
.vvp-transcript, .vvp-response {
  padding: 12px 16px; border-radius: 10px; max-width: 400px; width: 100%;
  font-size: 14px; line-height: 1.5;
}
.vvp-transcript {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
}
.vvp-response {
  background: rgba(56,189,248,0.06); border: 1px solid rgba(56,189,248,0.12);
  color: rgba(255,255,255,0.85);
}
.vvp-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35); margin-bottom: 4px;
}

/* ── Agents List Page (vag-) ── */
.vag-page { padding: 16px; }
.vag-loading, .vag-empty {
  text-align: center; padding: 40px 16px;
  color: rgba(255,255,255,0.4); font-size: 14px;
}
.vag-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-gap: 10px; gap: 10px;
}
.vag-card {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer; transition: all 0.15s ease; position: relative;
  font-family: inherit; text-align: left; width: 100%;
  color: inherit;
}
.vag-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.vag-card-icon { font-size: 24px; flex-shrink: 0; }
.vag-card-info { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vag-card-name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); }
.vag-card-meta { font-size: 11px; color: rgba(255,255,255,0.4); }
.vag-card-badge {
  position: absolute; top: 8px; right: 8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #EF4444; color: white;
  font-size: 10px; font-weight: 700; display: flex;
  align-items: center; justify-content: center;
}
.vag-card-dot {
  position: absolute; bottom: 10px; right: 10px;
  width: 6px; height: 6px; border-radius: 50%;
}
.vag-dot-active { background: #22C55E; }
.vag-dot-standby { background: #F59E0B; }
.vag-dot-error { background: #EF4444; }

/* ── Responsive: Phase 14B ── */
@media (max-width: 768px) {
  .vcm-dir-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .vcm-dir-header { flex-wrap: wrap; }
  .vcm-dir-search { order: 3; width: 100%; margin-top: 8px; }
  .vag-grid { grid-template-columns: 1fr 1fr; }
  .vvp-mic-btn { width: 100px; height: 100px; }
  .vvp-mic-btn svg { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════
   Phase 18A: First Run Tour (frt-), Team Settings (vts-),
   Admin (vadm-)
   ═══════════════════════════════════════════════════════ */

/* ── First Run Tour (frt-) ── */
.frt-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: cin-fade-in 0.3s ease;
}
.frt-spotlight {
  position: fixed; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
  z-index: 10001;
  transition: all 0.3s ease;
}
.frt-tooltip {
  position: fixed; z-index: 10002;
  max-width: 280px; padding: 16px;
  background: #1A1A1A; border: 1px solid rgba(255,107,0,0.3);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: cin-fade-in 0.3s ease;
}
.frt-tooltip-header {
  margin-bottom: 8px;
}
.frt-step-count {
  font-size: 11px; font-weight: 700; color: #FF6B00;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.frt-tooltip-desc {
  font-size: 14px; color: rgba(255,255,255,0.8);
  line-height: 1.5; margin: 0 0 14px;
}
.frt-tooltip-actions {
  display: flex; justify-content: space-between; align-items: center;
}
.frt-skip {
  background: none; border: none; color: rgba(255,255,255,0.3);
  font-size: 12px; font-family: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.frt-skip:hover { color: rgba(255,255,255,0.5); }
.frt-next {
  padding: 6px 16px; border-radius: 8px;
  background: #FF6B00; border: none; color: white;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.15s ease;
}
.frt-next:hover { background: #E06000; }

/* ── Team Settings (vts-) ── */
.vts-page { padding: 16px; }
.vts-subtitle { font-size: 14px; color: rgba(255,255,255,0.45); margin: 0 0 20px; }
.vts-saving { font-size: 12px; color: #FF6B00; margin-bottom: 12px; }
.vts-loading { text-align: center; padding: 40px; color: rgba(255,255,255,0.4); font-size: 14px; }
.vts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-gap: 10px; gap: 10px; }
.vts-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.15s ease;
}
.vts-card:hover { background: rgba(255,255,255,0.05); }
.vts-card-hired { border-color: rgba(255,107,0,0.25); background: rgba(255,107,0,0.03); }
.vts-card-icon { font-size: 24px; flex-shrink: 0; }
.vts-card-info { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vts-card-name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); }
.vts-card-title { font-size: 11px; color: rgba(255,255,255,0.4); }
.vts-card-personality { font-size: 12px; color: rgba(255,255,255,0.35); font-style: italic; }
.vts-btn-hire {
  padding: 6px 16px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,107,0,0.1); border: 1px solid rgba(255,107,0,0.2);
  color: #FF6B00; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all 0.15s ease;
}
.vts-btn-hire:hover { background: rgba(255,107,0,0.2); }
.vts-btn-hired {
  padding: 6px 16px; border-radius: 8px; flex-shrink: 0;
  background: #FF6B00; border: 1px solid #FF6B00;
  color: white; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}

/* ── Admin (vadm-) ── */
.vadm-page { padding: 16px; }
.vadm-error {
  text-align: center; padding: 40px; color: rgba(255,255,255,0.4); font-size: 14px;
}
.vadm-loading { text-align: center; padding: 40px; color: rgba(255,255,255,0.4); font-size: 14px; }
.vadm-add-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 20px; padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.vadm-input {
  flex: 1 1; min-width: 140px; padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9); font-size: 13px; font-family: inherit; outline: none;
}
.vadm-input::placeholder { color: rgba(255,255,255,0.3); }
.vadm-input:focus { border-color: rgba(255,107,0,0.3); }
.vadm-select {
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9); font-size: 13px; font-family: inherit; outline: none;
}
.vadm-add-btn {
  padding: 8px 16px; border-radius: 8px;
  background: #FF6B00; border: none; color: white;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.15s ease;
}
.vadm-add-btn:hover { background: #E06000; }
.vadm-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vadm-list { display: flex; flex-direction: column; gap: 6px; }
.vadm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.vadm-item-info { flex: 1 1; display: flex; flex-direction: column; gap: 1px; }
.vadm-item-name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); }
.vadm-item-email { font-size: 12px; color: rgba(255,255,255,0.4); }
.vadm-item-role {
  font-size: 11px; font-weight: 600; color: #FF6B00;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.vadm-delete-btn {
  padding: 5px 12px; border-radius: 6px;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);
  color: #EF4444; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all 0.15s ease;
}
.vadm-delete-btn:hover { background: rgba(239,68,68,0.2); }

@media (max-width: 768px) {
  .vts-grid { grid-template-columns: 1fr; }
  .vadm-add-form { flex-direction: column; }
  .vadm-input { width: 100%; }
}