/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter_Tight","arguments":[{"subsets":["latin","latin-ext"],"weight":["400","500","600","700","800","900"],"variable":"--font-inter-tight","display":"swap"}],"variableName":"interTight"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/c95a17d6aa1ccc69-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 Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/84792440f5374347-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 Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/10735954b8957dce-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/69c8297e91a203ed-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 Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/32ec8d161d520037-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 Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ceda3e828136e1b8-s.p.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 Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/103fc5fac08dcb15-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 Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/c95a17d6aa1ccc69-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 Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/84792440f5374347-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 Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/10735954b8957dce-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/69c8297e91a203ed-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 Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/32ec8d161d520037-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 Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ceda3e828136e1b8-s.p.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 Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/103fc5fac08dcb15-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 Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c95a17d6aa1ccc69-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 Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/84792440f5374347-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 Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/10735954b8957dce-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/69c8297e91a203ed-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 Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/32ec8d161d520037-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 Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ceda3e828136e1b8-s.p.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 Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/103fc5fac08dcb15-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 Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/c95a17d6aa1ccc69-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 Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/84792440f5374347-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 Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/10735954b8957dce-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/69c8297e91a203ed-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 Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/32ec8d161d520037-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 Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ceda3e828136e1b8-s.p.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 Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/103fc5fac08dcb15-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 Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/c95a17d6aa1ccc69-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 Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/84792440f5374347-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 Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/10735954b8957dce-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/69c8297e91a203ed-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 Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/32ec8d161d520037-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 Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/ceda3e828136e1b8-s.p.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 Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/103fc5fac08dcb15-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 Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/c95a17d6aa1ccc69-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 Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/84792440f5374347-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 Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/10735954b8957dce-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/69c8297e91a203ed-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 Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/32ec8d161d520037-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 Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/ceda3e828136e1b8-s.p.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 Tight';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/103fc5fac08dcb15-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 Tight Fallback';src: local("Arial");ascent-override: 100.51%;descent-override: 25.03%;line-gap-override: 0.00%;size-adjust: 96.39%
}.__className_7307c3 {font-family: 'Inter Tight', 'Inter Tight Fallback';font-style: normal
}.__variable_7307c3 {--font-inter-tight: 'Inter Tight', 'Inter Tight Fallback'
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"JetBrains_Mono","arguments":[{"subsets":["latin"],"weight":["400","700","800"],"variable":"--font-jetbrains-mono","display":"swap"}],"variableName":"jetbrainsMono"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/edc640959b0c7826-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/ac0e76ddaeeb7981-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/64d784ea54a4acde-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/ff71da380fbe67dd-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/6d831b18ae5b01dc-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/558ca1a6aa3cb55e-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: 'JetBrains Mono Fallback';src: local("Arial");ascent-override: 75.79%;descent-override: 22.29%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_380c2d {font-family: 'JetBrains Mono', 'JetBrains Mono Fallback';font-style: normal
}.__variable_380c2d {--font-jetbrains-mono: 'JetBrains Mono', 'JetBrains Mono Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════
   FAST Marketing — design tokens + base + form primitives.
   Estratto dal "liquid-glass" design system: solo le regole servono
   al login + form generici. Quando aggiungiamo nuove pagine
   (sidebar, dashboard, ecc.) arricchiamo qui o splittiamo per
   modulo. Niente CSS-in-JS lato componenti — token + classi.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --teal:      #008290;
  --teal-2:    #0095A9;
  --teal-dim:  rgba(0,130,144,.12);
  --teal-glow: rgba(0,130,144,.22);
  --yellow:    #ffcb05;

  /* Field surfaces */
  --field-bg: #f3f6f7;

  /* Status */
  --red:   #EC627E;
  --green: #00A85E;

  /* Ink (testo) */
  --ink:   #0f2427;
  --ink-2: #2d4347;
  --ink-3: #5c7478;
  --ink-4: #97b0b3;
  --ink-5: #c5d3d6;

  /* Liquid-glass surfaces (app shell) */
  --glass-white:  rgba(255,255,255,.72);
  --glass-white2: rgba(255,255,255,.55);
  --glass-white3: rgba(255,255,255,.38);
  --glass-teal:   rgba(0,130,144,.10);
  --glass-active: rgba(0,130,144,.14);
  --spec:         rgba(255,255,255,.90);
  --spec-dim:     rgba(255,255,255,.60);
  --sh-glow:      0 0 20px var(--teal-glow);
  --yellow-dark:  #c79500;
  --track-bg:     #e6eef0;

  /* Backdrop blurs */
  --blur-sm: blur(12px);
  --blur-md: blur(20px);
  --blur-lg: blur(32px);

  /* Card shadows */
  --sh-glass: 0 8px 32px rgba(0,60,80,.10), 0 2px 8px rgba(0,60,80,.06);
  --sh-card:  0 4px 20px rgba(0,60,80,.08), 0 1px 4px rgba(0,60,80,.05);

  /* Radii */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* Type stack — Inter Tight è caricato via next/font in layout.tsx */
  --ff: var(--font-inter-tight, 'Inter Tight'), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* M3 Centro di Comando — DS copilota (ADR-032): token "proposta" (arancio) + font mono */
  --proposta-bg: rgba(255,149,0,.13);
  --proposta-ink: #c06a00;
  --proposta-dot: #ff9500;
  --ff-mono: var(--font-jetbrains-mono, 'JetBrains Mono'), ui-monospace, monospace;

  /* Skeleton shimmer — gradiente condiviso dalla primitiva .jp-skel */
  --jp-skel-bg: linear-gradient(90deg, rgba(0,130,144,.05) 0%, rgba(0,130,144,.10) 50%, rgba(0,130,144,.05) 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--field-bg);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   FORM — input, label, validation, eye-toggle, remember
   ═══════════════════════════════════════════════════════════════ */
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 7px; letter-spacing: .1px;
}
.form-field label .required,
.required { color: var(--red); margin-left: 2px; font-weight: 700; }

.form-field.has-error input,
.form-field.has-error input:focus { border-color: var(--red); background: rgba(236,98,126,.04); }
.form-field.has-error input:focus { box-shadow: 0 0 0 3px rgba(236,98,126,.12); }
.form-field.has-error .field-wrapper svg.field-icon { stroke: var(--red); }

.form-field-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 11.5px; line-height: 1.4; }
.form-field-msg svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 1px; }
.form-field-error { color: var(--red); font-weight: 600; }

.field-wrapper { position: relative; }
.field-wrapper svg.field-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px;
  stroke: var(--ink-4); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; transition: stroke .13s;
}
.field-wrapper:focus-within svg.field-icon { stroke: var(--teal); }

.form-field input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  font-family: var(--ff);
  font-size: 13.5px; font-weight: 400;
  color: var(--ink);
  background: var(--field-bg);
  border: 1.5px solid rgba(0,130,144,.12);
  border-radius: 10px;
  outline: none;
  transition: border-color .13s, background .13s, box-shadow .13s;
}
/* Quando il wrapper non ha icona leading (drawer di edit, settings, ecc.),
 * il padding-left di 40px diventa spazio vuoto a sinistra. Riduco al
 * normale 14px. Usato sui drawer platform/security senza icona. */
.field-wrapper:not(:has(> svg.field-icon)) input {
  padding-left: 14px;
}
.form-field input::placeholder { color: var(--ink-4); }
.form-field input:focus { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,130,144,.1); }
.form-field input[type="password"] { padding-right: 42px; }

.eye-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--ink-4); transition: color .12s;
}
.eye-toggle:hover { color: var(--teal); }
.eye-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }

.form-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--ink-3); }
.form-remember input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-login {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
  color: #fff; border: none; border-radius: 10px;
  font-family: var(--ff); font-size: 14px; font-weight: 900;
  cursor: pointer; letter-spacing: .2px;
  box-shadow: 0 4px 18px rgba(0,130,144,.28);
  transition: box-shadow .13s, transform .1s, opacity .13s;
}
.btn-login:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(0,130,144,.36); transform: translateY(-1px); }
.btn-login:active:not(:disabled) { transform: scale(.98); }
.btn-login:disabled { opacity: .65; cursor: wait; }

.btn-login.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn-login.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: login-spin .7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

.btn-sso {
  width: 100%; padding: 11px;
  background: #fff; border: 1.5px solid rgba(0,130,144,.15);
  border-radius: 10px; font-family: var(--ff);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: border-color .13s, box-shadow .13s, opacity .13s;
}
.btn-sso:hover:not(:disabled) { border-color: var(--teal); box-shadow: 0 4px 14px rgba(0,130,144,.14); }
.btn-sso:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: #f4f5f7;
  border-color: rgba(0,0,0,.08);
  color: #9aa1a8;
  filter: grayscale(.85);
  pointer-events: none;
}
.btn-sso svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-sso + .btn-sso { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════
   LOGIN — split panel layout
   ═══════════════════════════════════════════════════════════════ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  background: var(--field-bg);
}

/* Left — branding panel */
.login-left {
  flex: 1 1;
  background: #062b31;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.login-geo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.login-geo svg { position: absolute; right: -60px; top: -40px; width: 600px; height: 600px; opacity: .055; }
.login-left::before {
  content: ''; position: absolute;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,149,169,.18) 0%, transparent 70%);
  bottom: -80px; left: -60px; pointer-events: none;
}
.login-left::after {
  content: ''; position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,203,5,.08) 0%, transparent 70%);
  top: 40%; right: 60px; pointer-events: none;
}

.login-logo { display: flex; align-items: center; gap: 11px; z-index: 1; }
.login-logo svg { width: 38px; height: 34px; }
.login-logo .lf-big { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.5px; }
.login-logo .lm-big { font-size: 20px; font-weight: 400; color: var(--teal-2); letter-spacing: -.3px; }

.login-hero { z-index: 1; max-width: 420px; }
.login-hero-tag {
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(0,149,169,.8);
  margin-bottom: 16px;
}
.login-hero-h {
  font-size: 36px; font-weight: 900; color: #fff;
  letter-spacing: -.8px; line-height: 1.1; margin: 0 0 16px;
}
.login-hero-h span { color: var(--teal-2); }
.login-hero-p {
  font-size: 14px; color: rgba(255,255,255,.55);
  line-height: 1.65; margin: 0 0 36px;
}

.login-features { display: flex; flex-direction: column; gap: 12px; }
.login-feat {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.login-feat-ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(0,130,144,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.login-feat-ico svg {
  width: 15px; height: 15px;
  stroke: var(--teal-2); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.login-feat-nm  { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }
.login-feat-sub { font-size: 11.5px; color: rgba(255,255,255,.4); margin-top: 1px; }

.login-left-foot { z-index: 1; font-size: 11.5px; color: rgba(255,255,255,.28); }
.login-left-foot a { color: rgba(0,149,169,.7); text-decoration: none; }
.login-left-foot a:hover { color: var(--teal-2); }

/* Right — form panel */
.login-right {
  width: 480px; flex-shrink: 0;
  background: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 52px;
  box-shadow: -8px 0 40px rgba(6,43,49,.1);
  position: relative;
  overflow-y: auto;
}

.login-locale-switcher {
  position: absolute; top: 16px; right: 20px;
}

.login-form-tag {
  font-size: 10.5px; font-weight: 900; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--teal);
  margin-bottom: 10px;
}
.login-form-h {
  font-size: 26px; font-weight: 900; color: var(--ink);
  letter-spacing: -.6px; margin: 0 0 6px;
}
.login-form-sub {
  font-size: 13px; color: var(--ink-4);
  margin: 0 0 28px; line-height: 1.5;
}

.login-form-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.login-forgot {
  font-size: 12.5px; font-weight: 600; color: var(--teal);
  text-decoration: none; transition: color .12s;
}
.login-forgot:hover { color: var(--teal-2); text-decoration: underline; }

.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0;
  color: rgba(0,130,144,.5);
  font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1 1; height: 1px;
  background: rgba(0,130,144,.1);
}

.login-foot {
  margin-top: 28px; text-align: center;
  font-size: 12.5px; color: var(--ink-4);
}
.login-foot a { color: var(--teal); font-weight: 600; text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

.login-version {
  position: absolute; bottom: 24px; right: 28px;
  font-size: 10px; color: rgba(0,130,144,.3); font-weight: 500;
}

.login-back {
  margin-top: 16px; background: none; border: none;
  color: var(--ink-3); font-size: 12px;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.login-back:disabled { opacity: .5; cursor: not-allowed; }

/* Responsive */
@media (max-width: 1199px) {
  .login-right { width: 420px; padding: 48px 40px; }
  .login-left  { padding: 40px; }
  .login-hero-h { font-size: 30px; }
}

@media (max-width: 767px) {
  .login-wrap { flex-direction: column; min-height: auto; }
  .login-left {
    padding: 32px 24px 80px;
    flex: none;
  }
  .login-left-foot { display: none; }
  .login-features  { display: none; }
  .login-hero      { max-width: 100%; margin-bottom: 0; }
  .login-hero-p    { margin-bottom: 0; }
  .login-hero-h    { font-size: 26px; letter-spacing: -.4px; }
  .login-right {
    width: auto;
    padding: 32px 24px 40px;
    border-radius: 24px 24px 0 0;
    margin-top: -24px;
    box-shadow: 0 -8px 30px rgba(6,43,49,.12);
    z-index: 2;
  }
  .login-form-h    { font-size: 22px; }
  .login-version   { bottom: 16px; right: 20px; }
}
/* ═══════════════════════════════════════════════════════════
   MFA Flow — styles
   Login challenge · Security center · Drawers · Critical modal
   ══════════════════════════════════════════════════════════ */

/* ── Stage host (so we can show login fullscreen vs security inside rail) ── */
.mfa-stage { min-height: 100vh; }

/* ─────────────────────────────────────────────────────────
   1. LOGIN MFA CHALLENGE — riusa .login-* del t01-login.html
   ───────────────────────────────────────────────────────── */

/* OTP input — 6 caselle separate */
.mfa-otp {
  display: flex;
  gap: 8px;
  margin: 18px 0 22px;
  justify-content: space-between;
}
.mfa-otp input {
  width: 48px; height: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  letter-spacing: -.5px;
  color: var(--ink);
  border: 1.5px solid rgba(0,130,144,.15);
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: all .14s;
}
.mfa-otp input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,180,204,.12);
}
.mfa-otp input.filled {
  border-color: rgba(0,130,144,.35);
  background: rgba(0,180,204,.04);
}
.mfa-otp.has-error input {
  border-color: var(--red);
  background: rgba(229,72,77,.04);
  animation: mfa-shake .35s ease-in-out;
}

@keyframes mfa-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.mfa-otp-error {
  font-size: 12px;
  color: var(--red);
  margin: -10px 0 16px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mfa-otp-error svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

/* Backup-code mode — single text input */
.mfa-backup-input {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Step header in MFA challenge */
.mfa-step-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.mfa-step-h-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,180,204,.1);
  border: 1px solid rgba(0,180,204,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mfa-step-h-icon svg {
  width: 20px; height: 20px;
  stroke: var(--teal);
  fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Passkey CTA — visually distinct (primary) */
.mfa-btn-passkey {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .14s;
  box-shadow: 0 4px 12px rgba(0,180,204,.25);
}
.mfa-btn-passkey:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,180,204,.35);
}
.mfa-btn-passkey svg {
  width: 18px; height: 18px;
  stroke: #fff; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mfa-btn-secondary {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1.5px solid rgba(0,130,144,.18);
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s;
  margin-top: 10px;
}
.mfa-btn-secondary:hover {
  background: rgba(0,180,204,.05);
  border-color: rgba(0,180,204,.3);
  color: var(--teal);
}

.mfa-help-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-4);
  text-decoration: none;
  transition: color .12s;
}
.mfa-help-link:hover { color: var(--teal); }

.mfa-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none;
  padding: 6px 8px 6px 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color .12s;
}
.mfa-back-link:hover { color: var(--teal); }
.mfa-back-link:disabled { opacity: .5; cursor: not-allowed; }
.mfa-back-link svg {
  width: 14px; height: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   TENANT SELECT — step intermedio login multi-tenant
   ═══════════════════════════════════════════════════════════════ */
.tenant-select-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.tenant-select-list li { margin-bottom: 10px; }
.tenant-select-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
}
.tenant-select-name {
  font-size: 14px;
  font-weight: 600;
}
.tenant-select-meta {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTON — design system condiviso (Sprint H-3)
   `.btn` base + variant `.btn-primary|secondary|danger` + size
   modifier `.btn-sm`. Sostituisce `.sec-btn-*` e `.sec-method-btn`
   (mantenuti come alias temporanei per i moduli ancora non migrati).
   ═══════════════════════════════════════════════════════════════ */
.btn {
  padding: 11px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .14s;
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.btn:disabled { cursor: not-allowed; transform: none; opacity: .65; }

.btn-sm {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
}

.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--teal-2); transform: translateY(-1px); }
.btn-primary:disabled { background: rgba(0,180,204,.3); }

.btn-secondary {
  background: rgba(255,255,255,.6);
  border-color: rgba(0,130,144,.18);
  color: var(--ink-2);
}
.btn-secondary:hover:not(:disabled) {
  background: #fff;
  border-color: rgba(0,180,204,.3);
  color: var(--teal);
}

.btn-danger {
  color: var(--red);
  background: rgba(229,72,77,.08);
  border-color: rgba(229,72,77,.3);
}
.btn-danger:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn-danger.solid {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-danger.solid:hover:not(:disabled) {
  background: #c93b40;
  border-color: #c93b40;
}
.btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Alias `.sec-btn*` → `.btn*` per markup design-handoff (contract README §9). */
.sec-btn { padding: 11px 18px; border-radius: 9px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .14s; border: 1px solid transparent; background: transparent; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.sec-btn:disabled { cursor: not-allowed; transform: none; opacity: .65; }
.sec-btn-primary { background: var(--teal); color: #fff; }
.sec-btn-primary:hover:not(:disabled) { background: var(--teal-2); transform: translateY(-1px); }
.sec-btn-primary:disabled { background: rgba(0,180,204,.3); }
.sec-btn-secondary { background: rgba(255,255,255,.6); border-color: rgba(0,130,144,.18); color: var(--ink-2); }
.sec-btn-secondary:hover:not(:disabled) { background: #fff; border-color: rgba(0,180,204,.3); color: var(--teal); }
.sec-btn-danger { padding: 9px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 700; background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.3); color: var(--red); cursor: pointer; transition: all .14s; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: inherit; }
.sec-btn-danger:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
.sec-btn-danger svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-btn-danger.solid { background: var(--red); border-color: var(--red); color: #fff; }
.sec-btn-danger.solid:hover:not(:disabled) { background: #c93b40; border-color: #c93b40; }

/* ── Segmented control (pill-group tabs) — design liquid-glass.css:1277-1299 ── */
.fm-segmented { display: inline-flex; gap: 4px; padding: 4px; background: rgba(0,130,144,.06); border-radius: 999px; }
.fm-segmented-tab { border: none; background: transparent; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .14s, color .14s, box-shadow .14s; font-family: inherit; }
.fm-segmented-tab:hover { color: var(--ink-2); }
.fm-segmented-tab.on { background: #fff; color: var(--teal-2); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.fm-segmented-tab svg { flex-shrink: 0; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fm-segmented-block { display: flex; width: 100%; }
.fm-segmented-block .fm-segmented-tab { flex: 1 1; justify-content: center; }

/* ── Folder chips (.lib-folder) — pattern DS condiviso (content-factory library
   + worksop). Base/filtro qui in globals (DS-general, usato da più feature);
   le regole specifiche (menu ⋯ / rename) restano in content-factory.css. ── */
.lib-folders { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.lib-folder {
  display: inline-flex; align-items: stretch; gap: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 130, 144, 0.1);
  border-radius: 999px;
  font: 700 11.5px/1 inherit;
  color: var(--ink-3);
  transition: all 0.14s;
  position: relative;
}
.lib-folder:hover { background: #fff; color: var(--ink); }
.lib-folder.on {
  background: linear-gradient(135deg, rgba(0, 180, 204, 0.12), rgba(0, 130, 144, 0.06));
  color: var(--teal);
  border-color: rgba(0, 180, 204, 0.3);
}
.lib-folder-main {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: transparent; border: none;
  font: inherit; color: inherit; cursor: pointer;
}
.lib-folder-main svg { width: 12px; height: 12px; stroke-width: 1.8; }
.lib-folder .count {
  background: rgba(0, 130, 144, 0.08);
  color: var(--ink-3);
  font-weight: 900; font-size: 10px;
  padding: 1px 6px; border-radius: 999px;
}
.lib-folder.on .count { background: rgba(0, 180, 204, 0.18); color: var(--teal); }
.lib-folder-new {
  border-style: dashed;
  color: var(--ink-4);
  padding: 7px 12px;
  cursor: pointer;
  font: inherit;
  background: rgba(255, 255, 255, 0.55);
  display: inline-flex; align-items: center; gap: 8px;
}
.lib-folder-new svg { width: 12px; height: 12px; stroke-width: 1.8; }

/* ── Folder actions (kebab ⋯ + menu Rinomina/Duplica/Elimina + rename inline) —
   DS condiviso (content-factory library + worksop archive). Promosse qui da
   content-factory.css per renderle disponibili a tutte le feature che usano il
   pattern .lib-folder. ── */
.lib-folder-act {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px 0 6px;
  background: transparent;
  border: none;
  border-left: 1px solid transparent;
  color: var(--ink-4);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
  font-family: inherit;
  border-radius: 0 999px 999px 0;
}
.lib-folder:hover .lib-folder-act { opacity: 1; }
.lib-folder-act:hover {
  background: rgba(0,180,204,.08);
  color: var(--teal);
  border-left-color: rgba(0,130,144,.10);
}
.lib-folder.on .lib-folder-act { opacity: 1; color: var(--teal); }

.lib-folder-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 160px;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(0,130,144,.12);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(6,43,49,.16);
  padding: 5px;
  animation: lib-folder-menu-in .14s ease-out;
}
@keyframes lib-folder-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lib-folder-menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 10px;
  background: transparent; border: none; cursor: pointer;
  text-align: left;
  border-radius: 6px;
  font: 700 12px/1 inherit; font-family: inherit;
  color: var(--ink-2);
  transition: background .1s, color .1s;
}
.lib-folder-menu button svg { color: var(--ink-4); flex-shrink: 0; }
.lib-folder-menu button:hover { background: rgba(0,180,204,.08); color: var(--teal); }
.lib-folder-menu button:hover svg { color: var(--teal); }
.lib-folder-menu button.danger { color: var(--red); }
.lib-folder-menu button.danger svg { color: var(--red); }
.lib-folder-menu button.danger:hover { background: rgba(236,98,126,.10); color: var(--red); }
.lib-folder-menu-sep {
  height: 1px;
  background: rgba(0,130,144,.10);
  margin: 4px 6px;
}
.lib-folder-rename {
  width: 120px;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid var(--teal);
  border-radius: 6px;
  outline: none;
  font: 700 11.5px/1 inherit; font-family: inherit;
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,180,204,.16);
}

/* ── Editor full-bleed (.og-shell) — modalità editor a tutto schermo, DS
   condiviso (content-factory output editor + worksop builder). La route editor
   attiva `body.og-editor-active`: `.r3-main` riempie il viewport (no padding/
   scroll documento) e la topbar piattaforma (.r3-tb) è nascosta — la breadcrumb
   `.og-bc` la sostituisce. ── */
body.og-editor-active .r3-main {
  padding: 0;
  gap: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.og-editor-active .r3-tb {
  display: none;
}

/* ── Input with leading icon — design liquid-glass.css:1302-1334 ── */
.fm-input-icon { display: flex; align-items: center; background: #fff; border: 1px solid rgba(0,130,144,.18); border-radius: 10px; overflow: hidden; transition: border-color .14s, box-shadow .14s; }
.fm-input-icon:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,204,.12); }
.fm-input-icon-l { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--ink-4); border-right: 1px solid rgba(0,130,144,.10); flex-shrink: 0; }
.fm-input-icon-l svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fm-input-icon > input,
.fm-input-icon > .fm-input-icon-input { flex: 1 1; border: none; outline: none; background: transparent; padding: 9px 12px; font-size: 13px; color: var(--ink); font-family: inherit; min-width: 0; }
.fm-input-icon > input::placeholder { color: var(--ink-4); }
.fm-input-icon.fm-input-icon-ghost { background: transparent; border-color: transparent; }
.fm-input-icon.fm-input-icon-ghost .fm-input-icon-l { border-right: none; width: 28px; height: 28px; }

/* ── KB search bar + clear X — design knowledge-base.css:224-250 ── */
.kb-search { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; box-sizing: border-box; background: #fff; border: 1px solid rgba(0,130,144,.14); border-radius: 9px; width: 280px; transition: border-color .14s, box-shadow .14s; }
.kb-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,204,.12); }
.kb-search > svg { width: 14px; height: 14px; color: var(--ink-4); flex-shrink: 0; }
.kb-search input { flex: 1 1; border: none; outline: none; background: transparent; font-size: 12px; font-weight: 600; color: var(--ink); font-family: inherit; min-width: 0; height: 100%; padding: 0; }
.kb-search input::placeholder { color: var(--ink-5); font-weight: 500; }

.kb-input-clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: rgba(0,130,144,.08); color: var(--ink-3); border-radius: 50%; cursor: pointer; padding: 0; flex-shrink: 0; transition: background .12s, color .12s, transform .12s; }
.kb-input-clear:hover { background: var(--ink-3); color: #fff; transform: scale(1.08); }
.kb-input-clear svg { width: 10px; height: 10px; stroke-width: 2.5; }
.kb-input-clear-textarea { position: absolute; top: 30px; right: 10px; background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(6,43,49,.10); }

/* ── KB est figures (numerical estimates row) — design knowledge-base.css:123-145 ── */
.kb-est-figs { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; margin-bottom: 4px; }
.kb-est-fig { background: rgba(0,180,204,.06); border: 1px solid rgba(0,180,204,.14); border-radius: 10px; padding: 12px 14px; }
.kb-est-fig-l { font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--ink-4); }
.kb-est-fig-v { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -.4px; margin-top: 4px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.kb-est-fig-v em { font-style: normal; font-weight: 700; color: var(--ink-4); font-size: 13px; margin-left: 4px; }
.kb-est-cancel { padding: 9px 16px; background: transparent; border: 1px solid rgba(0,130,144,.18); border-radius: 9px; font: 800 12px/1 inherit; font-family: inherit; color: var(--ink-2); cursor: pointer; transition: all .14s; }
.kb-est-cancel:hover { background: rgba(0,130,144,.06); color: var(--ink); }

/* ── Modal patterns — design mfa-flow.css + knowledge-base.css ── */
/* Promosse da security.css a globals.css per riuso cross-feature (content-factory). */
.sec-modal-backdrop { position: fixed; inset: 0; background: rgba(6,43,49,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 220; opacity: 0; pointer-events: none; transition: opacity .25s; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sec-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.sec-confirm-modal { width: 460px; max-width: 100%; background: #fff; border-radius: 16px; box-shadow: 0 24px 80px rgba(6,43,49,.4); overflow: hidden; }
.sec-confirm-modal-head { padding: 22px 24px 8px; display: flex; gap: 14px; align-items: flex-start; }
.sec-confirm-modal-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(229,72,77,.1); border: 1px solid rgba(229,72,77,.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sec-confirm-modal-ico svg { width: 22px; height: 22px; stroke: var(--red); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sec-confirm-modal-ico.tone-info,
.sec-confirm-modal-ico.sec-confirm-modal-ico-info { background: rgba(0,180,204,.1); border-color: rgba(0,180,204,.25); }
.sec-confirm-modal-ico.tone-info svg,
.sec-confirm-modal-ico.sec-confirm-modal-ico-info svg { stroke: var(--teal-2); }
.sec-confirm-modal-ico.sec-confirm-modal-ico-warn { background: rgba(240,160,32,.12); border-color: rgba(240,160,32,.3); }
.sec-confirm-modal-ico.sec-confirm-modal-ico-warn svg { stroke: #b8870a; }
.sec-confirm-modal-h { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; margin-bottom: 4px; }
.sec-confirm-modal-sub { font-size: 13px; color: var(--ink-3); line-height: 1.55; margin: 0; }
.sec-confirm-modal-body { padding: 8px 24px 22px 82px; font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.sec-confirm-modal-body strong { color: var(--ink); font-weight: 700; }
.sec-confirm-modal-foot { padding: 14px 24px; border-top: 1px solid rgba(0,130,144,.08); display: flex; justify-content: flex-end; gap: 10px; background: rgba(0,130,144,.02); }

/* Toast slide-in (Sprint H-1) */
@keyframes fm-toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Sudo modal tabs (Sprint MFA-11b) */
.sudo-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 16px;
  background: rgba(0, 130, 144, 0.06);
  border-radius: var(--r-md);
  padding: 4px;
}
.sudo-tab {
  flex: 1 1;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  transition: all .14s;
}
.sudo-tab:hover:not(.is-active):not(:disabled) { color: var(--ink-2); }
.sudo-tab.is-active {
  background: #fff;
  color: var(--teal);
  box-shadow: 0 1px 4px rgba(6, 43, 49, 0.08);
}
.sudo-tab:disabled { opacity: 0.5; cursor: not-allowed; }

.form-field-hint {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.4;
}

/* Sprint MFA-12: sudo via passkey block */
.sudo-webauthn-block {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  border: 1px solid rgba(0, 130, 144, 0.15);
  border-radius: var(--r-md);
  background: rgba(0, 130, 144, 0.04);
}
.sudo-webauthn-icon {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 180, 204, 0.12);
  color: var(--teal);
}
.sudo-webauthn-text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ── sec-btn system — pattern shared mfa-flow / modali ── */
.sec-btn {
  padding: 11px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .14s;
  border: 1px solid transparent;
  font-family: inherit;
}
.sec-btn-primary {
  background: var(--teal);
  color: #fff;
}
.sec-btn-primary:hover {
  background: var(--teal-2);
  transform: translateY(-1px);
}
.sec-btn-primary:disabled {
  background: rgba(0,180,204,.3);
  cursor: not-allowed;
  transform: none;
}
/* Sprint 14 hardening: busy state per CTA primari. Disabled + spinner
   inline a sinistra → protezione doppio-click + feedback "qualcosa sta
   succedendo, schermata non bloccata". */
.sec-btn.sec-btn-busy { cursor: progress; }
.sec-btn-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: sec-btn-spin .7s linear infinite;
}
@keyframes sec-btn-spin { to { transform: rotate(360deg); } }
.sec-btn-secondary {
  background: rgba(255,255,255,.6);
  border-color: rgba(0,130,144,.18);
  color: var(--ink-2);
}
.sec-btn-secondary:hover {
  background: #fff;
  border-color: rgba(0,180,204,.3);
}
.sec-btn-danger {
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  background: rgba(229,72,77,.08);
  border: 1px solid rgba(229,72,77,.3);
  color: var(--red);
  cursor: pointer;
  transition: all .14s;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  font-family: inherit;
}
.sec-btn-danger:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.sec-btn-danger svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sec-btn-danger.solid {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.sec-btn-danger.solid:hover {
  background: #c93b40;
  border-color: #c93b40;
}

/* ── Segmented tabs (dentro card) — pattern shared liquid-glass ── */
.fm-segmented {
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(0,130,144,.06);
  border-radius: 999px;
}
.fm-segmented-tab {
  border: none; background: transparent;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background .14s, color .14s, box-shadow .14s;
  font-family: inherit;
}
.fm-segmented-tab:hover { color: var(--ink-2); }
.fm-segmented-tab.on {
  background: #fff;
  color: var(--teal-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.fm-segmented-tab svg { flex-shrink: 0; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fm-segmented-block { display: flex; width: 100%; }
.fm-segmented-block .fm-segmented-tab { flex: 1 1; justify-content: center; }

/* ── Input with leading icon — pattern shared liquid-glass ── */
.fm-input-icon {
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid rgba(0,130,144,.18);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .14s, box-shadow .14s;
}
.fm-input-icon:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,204,.12); }
.fm-input-icon-l {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: var(--ink-4);
  border-right: 1px solid rgba(0,130,144,.10);
  flex-shrink: 0;
}
.fm-input-icon-l svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fm-input-icon > input,
.fm-input-icon > .fm-input-icon-input {
  flex: 1 1;
  border: none; outline: none; background: transparent;
  padding: 9px 12px;
  font-size: 13px; color: var(--ink);
  font-family: inherit;
  min-width: 0;
}
.fm-input-icon > input::placeholder { color: var(--ink-4); }
.fm-input-icon.fm-input-icon-ghost {
  background: transparent;
  border-color: transparent;
}
.fm-input-icon.fm-input-icon-ghost .fm-input-icon-l { border-right: none; width: 28px; height: 28px; }
/* Validation error state — Sprint 14 hardening, PageForm URL */
.fm-input-icon.fm-input-icon-err {
  border-color: rgba(229,72,77,.55);
  background: rgba(229,72,77,.04);
}
.fm-input-icon.fm-input-icon-err:focus-within {
  border-color: var(--red, #e5484d);
  box-shadow: 0 0 0 3px rgba(229,72,77,.14);
}
.fm-input-icon.fm-input-icon-err .fm-input-icon-l { color: var(--red, #e5484d); }

/* ═══════════════════════════════════════════════════════════════
   FM-LOCALE-SWITCHER — primitive DS (Sprint 16).
   Migrato da inline style di LocaleSwitcher.tsx (anti-pattern).
   ═══════════════════════════════════════════════════════════════ */
.fm-locale-switcher {
  display: inline-flex; align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
.fm-locale-switcher select {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--ink-5, rgba(0,130,144,.18));
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
}
.fm-locale-switcher select:disabled,
.fm-locale-switcher.is-pending select {
  cursor: wait;
  opacity: .65;
}

/* ═══════════════════════════════════════════════════════════════
   FM-CHECKBOX — primitive DS generale (Sprint 16).
   ───────────────────────────────────────────────────────────────
   Pattern checkbox approvato. Migrato da knowledge-base.css (era
   .kb-checkbox*, debito pre-esistente: checkbox è elemento DS
   generale, non KB-specific). Vedi memoria
   `feedback_css_class_dedup` §0c (Sprint 16).

   Uso:
     <label className="fm-checkbox" aria-label={t('...')}>
       <input type="checkbox" checked={...} onChange={...} />
       <span className="fm-checkbox-box" aria-hidden="true">
         {checked && <KbIcon name="check" />}
       </span>
       <span className="fm-checkbox-l">label visibile</span>  // opzionale
     </label>

   Sub-pattern indeterminate (Sprint 16 Bug #4 + Q3 approvato utente):
     <span className="fm-checkbox-box indeterminate" aria-hidden="true">
       <KbIcon name="minus" />
     </span>
   ═══════════════════════════════════════════════════════════════ */
.fm-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(0,130,144,.10);
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.fm-checkbox input { display: none; }
.fm-checkbox-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(0,130,144,.30);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all .14s;
  color: transparent;
}
.fm-checkbox-box svg { width: 12px; height: 12px; stroke-width: 3; }
.fm-checkbox input:checked + .fm-checkbox-box,
.fm-checkbox-box.indeterminate {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.fm-checkbox-l { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.fm-checkbox-l strong { display: block; font-weight: 800; color: var(--ink); font-size: 12.5px; }
.fm-checkbox-l em { font-style: normal; font-weight: 600; color: var(--ink-4); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════
   SHARED CONTENT TOKENS — page wrap, card glass, card headers,
   form fields (label uppercase + input/textarea), primary CTA.
   ───────────────────────────────────────────────────────────────
   Migrati da juice.css (.jp-card*) e knowledge-base.css (.kb-*) per
   essere disponibili a tutte le pagine /app/* senza import sister-
   route. Le pagine page-specific conservano le proprie classi nei
   rispettivi .css (es. .kb-stats, .kb-src-*, .jp-hero).
   ═══════════════════════════════════════════════════════════════ */

/* page wrap — .jp-page (gap 22) per outer con page-head, .kb-page (gap 18)
 * per inner content stack (KB usa entrambi nested: jp-page > kb-page). */
.jp-page { display: flex; flex-direction: column; gap: 22px; }
.kb-page { display: flex; flex-direction: column; gap: 18px; }

/* table base — sia tbody che thead, num cells right-aligned con tabular-nums */
.jp-table { width: 100%; border-collapse: collapse; }
.jp-table th { text-align: left; font-size: 10.5px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; color: var(--ink-4); padding: 8px 10px; border-bottom: 1px solid rgba(0,130,144,.1); }
.jp-table td { font-size: 12.5px; color: var(--ink-2); padding: 11px 10px; border-bottom: 1px solid rgba(0,130,144,.05); }
.jp-table tr:hover td { background: rgba(0,180,204,.04); }
.jp-table .num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 700; }

/* content card "liquid-glass" */
.jp-card {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(6,43,49,.04);
}
.jp-card-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.jp-card-title { font-size: 13px; font-weight: 900; color: var(--ink); letter-spacing: -.1px; }
.jp-card-meta { font-size: 11px; font-weight: 700; color: var(--ink-4); }

/* Skeleton loading primitive (core DS). Placeholder animato condiviso da
   tutte le superfici (agents .ag2-skel, brand-book .jp-card.skeleton,
   tabelle platform). Base .jp-skel + modificatori dimensione, combinabile
   con width/height locali. Rispetta prefers-reduced-motion. */
.jp-skel {
  background: var(--jp-skel-bg);
  background-size: 200% 100%;
  animation: jp-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.jp-skel-line   { height: 10px; }
.jp-skel-block  { height: 46px; border-radius: 12px; }
.jp-skel-avatar { border-radius: 50%; }
.jp-skel-card   { min-height: 200px; border-radius: 16px; }
@keyframes jp-skel-shimmer {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jp-skel { animation: none; }
}

/* card header — variant con titolo + meta sub-line */
.kb-docs-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  gap: 14px;
}
.kb-docs-h-l { display: flex; flex-direction: column; gap: 2px; }
.kb-docs-title { font-size: 14px; font-weight: 900; color: var(--ink); letter-spacing: -.1px; }
.kb-docs-meta  { font-size: 11.5px; font-weight: 700; color: var(--ink-4); }

/* form field — label uppercase letter-spaced sopra l'input */
.kb-field { display: flex; flex-direction: column; gap: 5px; }
.kb-field-l {
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink-3);
}
.kb-field-wide { grid-column: 1 / -1; }
.kb-help { font-size: 10.5px; font-weight: 600; color: var(--ink-4); margin-top: 4px; }
.kb-help.kb-help-err { color: var(--red, #e5484d); font-weight: 700; }
.kb-help.kb-help-warn {
  color: var(--amber-1, #b45309);
  font-weight: 700;
  background: rgba(245, 158, 11, .08);
  border-left: 2px solid rgba(245, 158, 11, .55);
  padding: 6px 8px;
  border-radius: 0 4px 4px 0;
}

/* input + textarea (rounded, teal focus glow, tabular-nums per i numerici) */
.kb-input,
.kb-textarea {
  padding: 10px 12px;
  border: 1px solid rgba(0,130,144,.16);
  border-radius: 9px;
  background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink);
  font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.kb-input:focus,
.kb-textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,180,204,.12);
}
.kb-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

/* search input rounded (header card) + clear button circolare */
.kb-search { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; box-sizing: border-box; background: #fff; border: 1px solid rgba(0,130,144,.14); border-radius: 9px; width: 280px; transition: border-color .14s, box-shadow .14s; }
.kb-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,204,.12); }
.kb-search > svg { width: 14px; height: 14px; color: var(--ink-4); flex-shrink: 0; }
.kb-search input { flex: 1 1; border: none; outline: none; background: transparent; font-size: 12px; font-weight: 600; color: var(--ink); font-family: inherit; min-width: 0; height: 100%; padding: 0; }
.kb-search input::placeholder { color: var(--ink-5); font-weight: 500; }

.kb-input-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: none;
  background: rgba(0,130,144,.08);
  color: var(--ink-3);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .12s, color .12s, transform .12s;
}
.kb-input-clear:hover { background: var(--ink-3); color: #fff; transform: scale(1.08); }
.kb-input-clear svg { width: 10px; height: 10px; stroke-width: 2.5; }

/* primary CTA (gradient teal) */
.kb-run {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  color: #fff;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0,180,204,.32);
  transition: all .14s;
}
.kb-run:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,180,204,.42); }
.kb-run:disabled { opacity: .45; cursor: not-allowed; }
.kb-run svg { width: 14px; height: 14px; }
/* Sprint 14 hardening: busy state per .kb-run (submit form) */
.kb-run.kb-run-busy { cursor: progress; }
.kb-run-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: kb-run-spin .7s linear infinite;
}
@keyframes kb-run-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   BRAND BOOK DS primitives (Sprint brand-book-frontend)
   Promotion in globals.css di 6 famiglie di selettori già presenti
   nel sistema visivo handoff (liquid-glass.css + tactical-agents.css).
   Decisione: ADR-014 / blueprint Q4 #2. Verifica collisioni: grep
   `\.ag-card|\.wiz-row|\.fm-section[^-]|\.form-range|\.ta-title-row|\.btn-icon`
   in apps/web/src/ = 0 match prima di questa promozione.
   ═══════════════════════════════════════════════════════════════ */

/* visually-hidden utility (screen-reader only) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* fm-section* — wrapper sezione con dash teal a sinistra del titolo */
.fm-section {
  display: block;
}
.fm-section + .fm-section {
  margin-top: 26px;
}
/* Sprint 22 PR-2 loop dev 6 U3 closure — verbatim handoff liquid-glass.css:1369-1385.
   User feedback: "l'icona a sinistra dell'etichetta Logo completo e Marchio / simbolo
   non è quella approvata". Diagnosi: pre-fix `.fm-section-head::before` aveva una
   barra verticale teal 3×fullheight (invenzione). Handoff invece usa
   `.fm-section-title::before` con un trattino orizzontale 14×2 teal accanto al titolo.
   Refactor:
   - .fm-section-head: justify-content space-between + align-items center (no
     padding-left/position); barra verticale RIMOSSA.
   - .fm-section-title: flex con gap 8px + pseudo trattino orizzontale teal. */
.fm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fm-section-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fm-section-title::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  flex-shrink: 0;
}
.fm-section-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-4);
}

/* form-range — slider DS */
.form-range {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(0,130,144,.10);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,130,144,.30);
  cursor: pointer;
}
.form-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  border: none;
  box-shadow: 0 1px 3px rgba(0,130,144,.30);
  cursor: pointer;
}
.form-range:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* btn-icon — modifier shape di .btn (bottone quadrato icon-only).
   Ordine canonico classi su markup: btn → tonale (primary|secondary|danger)
   → modifier forma (btn-icon | btn-sm). */
.btn.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}
.btn.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.btn.btn-icon svg {
  width: 14px;
  height: 14px;
}

/* ag-card — catalog card DS primitive. Fonte canonica unica (brand-book + content-factory). */
.ag-card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 16px;
  padding: 20px;
  transition: all .18s;
  overflow: hidden;
}
.ag-card.active { cursor: pointer; }
.ag-card.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(6,43,49,.08);
  border-color: rgba(0,180,204,.30);
}
.ag-card.soon {
  background: rgba(255,255,255,.35);
  border-style: dashed;
  border-color: rgba(0,130,144,.14);
  cursor: pointer;
}
.ag-card.soon:hover {
  background: rgba(0,180,204,.04);
  border-color: var(--teal);
}
.ag-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.ag-ico {
  width: 52px; height: 52px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(6,43,49,.12);
}
.ag-ico svg { width: 24px; height: 24px; stroke-width: 1.8; }
.ag-ico.ebook { background: linear-gradient(135deg, var(--teal), var(--teal-2)); }
.ag-ico.pres  { background: linear-gradient(135deg, #6b3df0, #4a25c8); }
.ag-ico.mind  { background: linear-gradient(135deg, #ff8c1a, #c95800); }
.ag-ico.email { background: linear-gradient(135deg, #ec627e, #c83a5a); }
.ag-ico.youtube-transcript { background: linear-gradient(135deg, #ff0033, #b30021); }
.ag-ico.soon  { background: rgba(0,130,144,.10); color: var(--ink-4); box-shadow: none; }
.ag-card.soon .ag-ico { background: rgba(0,130,144,.08); color: var(--ink-4); box-shadow: none; }
.ag-h-info { flex: 1 1; min-width: 0; }
.ag-name { font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: -.2px; }
.ag-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 4px;
}
.ag-cat-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.ag-card.soon .ag-cat-dot { background: var(--ink-4); }
.ag-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}
.ag-status.on  { background: rgba(0,168,94,.10); color: #00a85e; }
.ag-status.on .dot { width: 5px; height: 5px; border-radius: 50%; background: #00a85e; box-shadow: 0 0 0 3px rgba(0,168,94,.18); animation: ag-pulse 1.6s infinite; }
@keyframes ag-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(0,168,94,.18); } 50% { box-shadow: 0 0 0 5px rgba(0,168,94,.08); } }
.ag-status.soon { background: rgba(255,149,0,.10); color: #c97200; }
.ag-status.soon .dot { width: 5px; height: 5px; border-radius: 50%; background: #ff9500; }
.ag-desc {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  line-height: 1.55;
  margin-bottom: 14px;
  text-wrap: pretty;
}
.ag-card.soon .ag-desc { color: var(--ink-4); }
.ag-stats {
  display: flex; gap: 16px;
  padding: 12px 14px;
  background: rgba(0,130,144,.04);
  border-radius: 10px;
  margin-bottom: 14px;
}
.ag-stat-l { font-size: 9.5px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; color: var(--ink-4); }
.ag-stat-v { font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: -.3px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ag-stat-v em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-4); margin-left: 2px; }
.ag-actions { display: flex; gap: 8px; margin-top: auto; }
.ag-cta-primary {
  flex: 1 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  color: #fff;
  border: none;
  border-radius: 10px;
  font: 800 13px/1 inherit; font-family: inherit;
  cursor: pointer;
  transition: all .14s;
  box-shadow: 0 4px 12px rgba(0,180,204,.22);
}
.ag-cta-primary svg { width: 14px; height: 14px; stroke-width: 2; }
.ag-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,180,204,.30); }
.ag-cta-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid rgba(0,130,144,.18);
  border-radius: 10px;
  font: 700 12.5px/1 inherit; font-family: inherit;
  cursor: pointer;
  transition: all .14s;
}
.ag-cta-secondary svg { width: 13px; height: 13px; stroke-width: 1.8; }
.ag-cta-secondary:hover { background: rgba(0,180,204,.06); color: var(--ink); border-color: rgba(0,180,204,.30); }
.ag-cta-disabled {
  flex: 1 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  background: rgba(0,130,144,.05);
  color: var(--ink-4);
  border: none;
  border-radius: 10px;
  font: 800 13px/1 inherit; font-family: inherit;
  cursor: not-allowed;
}
.ag-cta-disabled svg { width: 14px; height: 14px; stroke-width: 2; }
.ag-vote {
  /* card soon tenant: CTA voto full-width con contenuto centrato (handoff v2 agenti-ai.css §151). */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1; height: 40px; padding: 0 14px;
  background: rgba(255,255,255,.65);
  color: var(--ink-3);
  border: 1px solid rgba(0,130,144,.12);
  border-radius: 10px;
  font: 700 12.5px/1 inherit; font-family: inherit;
  cursor: pointer;
  transition: all .14s;
}
.ag-vote:hover { background: #fff; color: var(--teal); border-color: rgba(0,180,204,.30); }
.ag-vote svg { width: 13px; height: 13px; stroke-width: 1.8; }
.ag-vote-count {
  background: rgba(0,130,144,.08);
  color: var(--ink-2);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 900;
}
/* stato votato (verde) — 1:1 design_handoff_agenti_ai_v2/agenti-ai.css */
.ag-vote.voted { background: rgba(0,168,94,.08); color: #03794a; border-color: rgba(0,168,94,.32); }
.ag-vote.voted:hover { background: rgba(0,168,94,.13); color: #03794a; border-color: rgba(0,168,94,.4); }
.ag-vote.voted svg { color: #00a85e; }
.ag-vote.voted .ag-vote-count { background: rgba(0,168,94,.15); color: #03794a; }

/* ta-title-row — page-head title row */
.ta-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

/* wiz-* form primitives — wiz-row / wiz-field / wiz-label / wiz-input /
   wiz-textarea / wiz-select / wiz-field-error */
.wiz-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 14px;
  gap: 14px;
}
.wiz-row.cols-2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
  .wiz-row.cols-2 {
    grid-template-columns: 1fr;
  }
}
.wiz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wiz-label {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wiz-input,
.wiz-textarea,
.wiz-select {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--ff);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  transition: border-color .14s, background .14s;
}
.wiz-input:focus,
.wiz-textarea:focus,
.wiz-select:focus {
  background: #fff;
  border-color: var(--teal);
}
.wiz-textarea {
  resize: vertical;
  min-height: 84px;
}
.wiz-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c7478' stroke-width='2.4'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.wiz-field-error {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  margin-top: 2px;
}

/* fm-segmented — segmented control (tab-like radiogroup) */
.fm-segmented {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  background: rgba(0,130,144,.06);
  border-radius: 9px;
}
.fm-segmented.fm-segmented-block {
  display: flex;
  width: 100%;
}
.fm-segmented-tab {
  flex: 1 1;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 7px;
  padding: 6px 22px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-3);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.fm-segmented-tab:hover {
  color: var(--ink);
}
.fm-segmented-tab.on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,130,144,.10);
}
.fm-segmented-tab svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================================
 * Sprint 21 M9 retrofit handoff_user_menu_v2 §7 — DS canonical drawer + button.
 * Riferimento handoff: "riusa .fm-drawer-*, .fm-btn-* — NON inventare classi parallele".
 * Pattern Apple-like glass + teal accent (allineato a .jp-card / .kb-run esistenti).
 * Hook no-css-scope-mismatch enforced: .fm-* DS-general SOLO in globals.css.
 * ============================================================================ */

/* Base overlay drawer (handoff fm-feedback.css §4 DRAWER) — mancava in globals:
   senza, gli <aside className="fm-drawer"> (es. NewAgentDrawer) cadevano nel flow
   normale e rendevano inline a tutta larghezza invece che come pannello a destra. */
.fm-drawer-backdrop {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.fm-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.fm-drawer {
  position: fixed;
  top: 24px; right: 24px; bottom: 24px;
  width: 460px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,130,144,.08);
  border-radius: 16px;
  box-shadow: 0 18px 50px -10px rgba(0,30,40,.22), 0 6px 16px -4px rgba(0,30,40,.10);
  z-index: 210;
  transform: translateX(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fm-drawer.open {
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.fm-drawer-body { flex: 1 1; overflow-y: auto; padding: 18px 24px; }
@media (max-width: 560px) {
  .fm-drawer { top: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; }
}

/* Sub-nav pill tabs (handoff tactical-agents.css) — DS condivisa: usata su
   /platform/agents (CatalogScreen) e /content-factory (FcSubNav). Promossa qui
   da globals per evitare duplicazione platform.css + content-factory.css. */
.fc-tabs { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,130,144,.08); border-radius: 12px; padding: 4px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.fc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: transparent; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-family: inherit; text-decoration: none; transition: all .14s; }
.fc-tab svg { width: 14px; height: 14px; stroke-width: 1.8; }
.fc-tab:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.fc-tab.on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(6,43,49,.08); }
.fc-tab.on svg { color: var(--teal); }
.fc-tab-badge { font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: rgba(0,130,144,.1); color: var(--teal); margin-left: 2px; }
.fc-tab.on .fc-tab-badge { background: rgba(0,180,204,.18); color: var(--teal-2); }

.fm-drawer-head {
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  align-items: start;
  grid-gap: 14px;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 130, 144, 0.1);
}
/* Variante SENZA icona (header con .fm-drawer-head-body = titolo+sub, es. NewAgentDrawer
   handoff agenti v2): la grid 3-col schiaccerebbe il corpo nella colonna icona da 48px.
   Quando è presente .fm-drawer-head-body passiamo a flex. WorkspaceModal (icona+title+close)
   non ha head-body → resta sulla grid, nessuna regressione. */
.fm-drawer-head:has(.fm-drawer-head-body) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.fm-drawer-head-body { flex: 1 1; min-width: 0; }

.fm-drawer-ico {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 180, 204, 0.12), rgba(0, 130, 144, 0.18));
  color: var(--teal, #0095A9);
}
.fm-drawer-ico svg { width: 20px; height: 20px; }

.fm-drawer-h { min-width: 0; }
.fm-drawer-title {
  margin: 0;
  font-size: 17px; font-weight: 800; line-height: 1.3;
  color: var(--ink, #0f172a);
}
.fm-drawer-sub {
  margin: 2px 0 0;
  font-size: 13px; color: var(--ink-3, #64748b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-drawer-sub strong {
  font-weight: 700; color: var(--ink, #0f172a);
}

.fm-drawer-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0, 130, 144, 0.18);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-3, #64748b);
  transition: all .12s;
}
.fm-drawer-close:hover {
  color: var(--ink, #0f172a);
  border-color: rgba(0, 130, 144, 0.4);
  background: rgba(0, 180, 204, 0.05);
}
.fm-drawer-close svg { width: 16px; height: 16px; }

.fm-drawer-foot {
  /* M15 fix DELTA-F (HVP v1.1): bg rgba(255,255,255,.5) + border-top rgba(0,130,144,.08)
     verbatim handoff fm-feedback.css:482-489. Era trasparente. */
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(0, 130, 144, 0.08);
}

.fm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  /* M16 fix delta 3: no wrap CTA text (handoff README §2.5 "+ Crea nuovo workspace" single line) */
  white-space: nowrap;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
}
.fm-btn:disabled { opacity: .45; cursor: not-allowed; }
.fm-btn-sm { height: 36px; padding: 0 14px; font-size: 12.5px; }
/* icon-only: il glifo va sempre centrato (handoff liquid-glass .fm-btn ha justify-content:center;
   la base .fm-btn della piattaforma no, quindi un bottone icon-only fuori da scope con
   justify-content centrato — es. chat-sidebar-title-row — lasciava l'icona allineata a sinistra). */
.fm-btn-icon { padding: 0; width: 36px; flex-shrink: 0; justify-content: center; }
.fm-btn-icon.fm-btn-sm { width: 36px; }

.fm-btn-primary {
  border: none;
  background: linear-gradient(135deg, var(--teal, #0095A9), var(--teal-2, #00b4cc));
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 180, 204, 0.28);
}
.fm-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 180, 204, 0.38);
}

.fm-btn-secondary {
  border: 1px solid rgba(0, 130, 144, 0.2);
  background: transparent;
  color: var(--ink-2, #475569);
}
.fm-btn-secondary:hover:not(:disabled) {
  background: rgba(0, 180, 204, 0.06);
  border-color: rgba(0, 130, 144, 0.4);
}

/* Sprint 22 PR-2 loop dev 6 M3 C3 closure — fm-btn-danger DS canonical variant
   (port da legacy .btn-danger). Usato in DeleteConfirmModal + ColorEditModal
   delete confirm actions. Modello: ghost-danger default, solid on hover or
   `.solid` modifier (replicato pattern legacy). */
.fm-btn-danger {
  color: var(--red);
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid rgba(229, 72, 77, 0.3);
}
.fm-btn-danger:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.fm-btn-danger.solid {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* ── Confirm modal bloccante (.fm-confirm + .fm-modal-backdrop) — DS da handoff
   fm-feedback.css, usato dalla conferma eliminazione widget (WidgetListScreen). ── */
:root {
  --fm-tone-danger: var(--red, #ec627e);
  --fm-tone-danger-bg: rgba(236,98,126,.10);
  --fm-tone-danger-bd: rgba(236,98,126,.30);
}
.fm-modal-backdrop {
  position: fixed; inset: 0; background: rgba(6,43,49,.55); z-index: 220;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fm-modal-backdrop.open { opacity: 1; pointer-events: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fm-confirm {
  width: 460px; max-width: 100%; background: #fff; border-radius: 16px;
  box-shadow: 0 24px 80px rgba(6,43,49,.4); overflow: hidden;
  transform: scale(.96) translateY(8px); opacity: 0;
  transition: all .28s cubic-bezier(.2,.8,.2,1);
}
.fm-modal-backdrop.open .fm-confirm { transform: scale(1) translateY(0); opacity: 1; }
.fm-confirm-head { padding: 22px 24px 8px; display: flex; gap: 14px; align-items: flex-start; }
.fm-confirm-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--fm-tone-danger-bg); border: 1px solid var(--fm-tone-danger-bd);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fm-confirm-ico svg { width: 22px; height: 22px; stroke: var(--fm-tone-danger); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fm-confirm-h { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; margin-bottom: 4px; padding-top: 8px; }
.fm-confirm-body { padding: 8px 24px 22px 82px; font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.fm-confirm-body strong { color: var(--ink); font-weight: 700; }
.fm-confirm-foot { padding: 14px 24px; border-top: 1px solid rgba(0,130,144,.08); background: rgba(255,255,255,.5); display: flex; gap: 10px; justify-content: flex-end; }
.fm-confirm-danger .fm-confirm-ico { background: var(--fm-tone-danger-bg); border-color: var(--fm-tone-danger-bd); }
.fm-confirm-danger .fm-confirm-ico svg { stroke: var(--fm-tone-danger); }

/* ===== M3 Centro di Comando — DS copilota (ADR-032) — START ===== */
/* Porting 1:1 delle famiglie DS dal design handoff (design_handoff_centro_comando/).
   I literal font sono sostituiti dai token: 'JetBrains Mono' → var(--ff-mono),
   'Inter Tight' → var(--ff). I literal arancio restano invariati (coerenti coi token --proposta-*).
   Le classi già presenti in globals.css NON sono riportate (fm-btn/section/segmented/confirm/
   drawer/modal-backdrop, wiz-row/field/label/input/select/textarea, jp-card/jp-page). */

/* ── Token mancanti richiesti dalle famiglie portate ──
   --fm-tone-danger* è già definito sopra (blocco fm-confirm); qui solo success/info/warning.
   --mg-red / --mg-red-ink servono a .mg-conf.bassa (marketing-guide.css). */
:root {
  /* SUCCESS — verde */
  --fm-tone-success:     #1f8a52;
  --fm-tone-success-bg:  rgba(38,166,108,.10);
  --fm-tone-success-bd:  rgba(38,166,108,.30);

  /* INFO — teal del brand */
  --fm-tone-info:        var(--teal, #008290);
  --fm-tone-info-bg:     rgba(0,180,204,.10);
  --fm-tone-info-bd:     rgba(0,180,204,.28);

  /* WARNING — giallo scurito per leggibilità */
  --fm-tone-warning:     #b07a00;
  --fm-tone-warning-bg:  rgba(255,203,5,.14);
  --fm-tone-warning-bd:  rgba(176,122,0,.32);

  /* marketing-guide — .mg-conf.bassa */
  --mg-red: #EC627E;
  --mg-red-ink: #c23a57;
}

/* ══════════════════════════════════════════════════════════════════
   knowledge-base.css — kb-status (base + dot) + dropzone
   ══════════════════════════════════════════════════════════════════ */
.kb-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
}
.kb-status .dot { width: 5px; height: 5px; border-radius: 50%; }

/* modifier di stato (stella-polare.css: proposta/wait · centro-comando: warn) */
.kb-status.proposta { background: rgba(255,149,0,.13); color: #c06a00; }
.kb-status.proposta .dot { background: #ff9500; box-shadow: 0 0 0 3px rgba(255,149,0,.18); }
.kb-status.wait { background: rgba(15,36,39,.06); color: var(--ink-4); }
.kb-status.wait .dot { background: var(--ink-5); box-shadow: none; }
.kb-status.warn { background: rgba(255,203,5,.16); color: #a5790a; }
.kb-status.warn .dot { background: #e0b400; box-shadow: 0 0 0 3px rgba(255,203,5,.2); }
.kb-status.ready { background: rgba(0,168,94,.12); color: #007a43; }
.kb-status.ready .dot { background: #00a85e; box-shadow: 0 0 0 3px rgba(0,168,94,.18); }
/* progress bar chat (mb-wizard.css) — usata dallo stato parsing CSV in Tappa 2 */
.mbw-prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.mbw-prog-status { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.mbw-prog-pct { font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -.4px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.mbw-prog-bar { height: 10px; background: rgba(0,130,144,.10); border-radius: 999px; overflow: hidden; }
.mbw-prog-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-2)); border-radius: 999px; transition: width .3s ease; }

.kb-dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 28px 24px;
  border: 2px dashed rgba(0,130,144,.22);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 400px 200px at 50% 50%, rgba(0,180,204,.06), transparent 70%),
    rgba(255,255,255,.5);
  text-align: center;
  cursor: pointer;
  transition: all .18s;
}
.kb-dropzone:hover, .kb-dropzone.drag {
  border-color: var(--teal);
  background:
    radial-gradient(ellipse 400px 200px at 50% 50%, rgba(0,180,204,.12), transparent 70%),
    rgba(255,255,255,.7);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,180,204,.12);
}
.kb-dropzone-inner { padding: 28px 18px; }
.kb-drop-cloud {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,180,204,.32);
  margin-bottom: 4px;
}
.kb-drop-title { font-size: 14px; font-weight: 900; color: var(--ink); letter-spacing: -.1px; }
.kb-drop-sub   { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.kb-drop-formats {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
}
.kb-drop-fmt {
  font-size: 9.5px; font-weight: 900; letter-spacing: .8px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(0,130,144,.08);
  color: var(--ink-3);
  font-family: var(--ff-mono);
}
.kb-drop-ns {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; color: var(--ink-4);
}
.kb-drop-ns code {
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 700;
  padding: 3px 7px;
  background: rgba(0,180,204,.08);
  color: var(--teal-2);
  border-radius: 5px;
  border: 1px solid rgba(0,180,204,.18);
}

/* ══════════════════════════════════════════════════════════════════
   stella-polare.css — famiglie sp-* del workshop Stella polare
   ══════════════════════════════════════════════════════════════════ */
.sp-page { min-width: 0; }
.sp-page .wiz-form { flex: none; }

/* Card "Proposta di sintesi" dentro la chat */
.sp-synth { border: 2px solid var(--teal); border-radius: 14px; background: linear-gradient(135deg, rgba(0,180,204,.07), rgba(0,130,144,.03)); padding: 15px 16px 14px; box-shadow: 0 6px 20px rgba(0,130,144,.08); animation: sp-synth-in .4s ease; }
@keyframes sp-synth-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.sp-synth-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--teal-2); margin-bottom: 9px; }
.sp-synth-quote { position: relative; font-size: 14px; font-style: italic; font-weight: 600; line-height: 1.6; color: var(--ink); padding-left: 14px; border-left: 3px solid var(--teal); text-wrap: pretty; }
.sp-synth-note { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; font-weight: 600; color: var(--ink-3); line-height: 1.45; margin-top: 11px; }
.sp-synth-note svg { color: var(--teal-2); flex-shrink: 0; margin-top: 1px; }
.sp-synth-actions { display: flex; gap: 9px; margin-top: 13px; }
.sp-synth-actions .fm-btn { flex: 0 0 auto; }
.sp-synth.reforming { border-color: rgba(255,149,0,.5); background: linear-gradient(135deg, rgba(255,149,0,.07), rgba(255,203,5,.03)); }
.sp-synth-reform { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: #c06a00; }
.sp-synth-reform .sp-spin { width: 15px; height: 15px; border: 2px solid rgba(255,149,0,.3); border-top-color: #ff9500; border-radius: 50%; animation: sp-rot .7s linear infinite; flex-shrink: 0; }
@keyframes sp-rot { to { transform: rotate(360deg); } }

/* Empty / avvio */
.sp-avvio { width: 100%; }
.sp-hero { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; }
.sp-hero-star { width: 54px; height: 54px; border-radius: 15px; flex-shrink: 0; background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px var(--teal-glow); }
.sp-hero-t { font-size: 21px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; }
.sp-hero-s { font-size: 13px; font-weight: 600; color: var(--ink-3); line-height: 1.55; margin-top: 5px; max-width: 60ch; text-wrap: pretty; }
.sp-badge-ai { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 900; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px; background: rgba(107,61,199,.13); color: #6b3fc7; margin-left: 8px; vertical-align: middle; }

.sp-phases { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; gap: 12px; margin-top: 4px; }
@media (max-width: 720px) { .sp-phases { grid-template-columns: 1fr; } }
.sp-phase { padding: 15px; border-radius: 13px; background: rgba(0,130,144,.03); border: 1px solid rgba(0,130,144,.09); }
.sp-phase-h { display: flex; align-items: center; gap: 9px; }
.sp-phase-n { width: 26px; height: 26px; border-radius: 8px; background: rgba(0,180,204,.12); color: var(--teal-2); font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-phase-name { font-size: 13.5px; font-weight: 900; color: var(--ink); }
.sp-phase-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-3); line-height: 1.5; margin-top: 8px; }

.sp-diario-hint { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 12px; background: rgba(6,43,49,.04); border: 1px solid rgba(6,43,49,.08); margin-top: 4px; }
.sp-diario-hint svg { color: var(--teal-2); flex-shrink: 0; }
.sp-diario-hint-t { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.sp-diario-hint-s { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-top: 1px; }

.sp-avvio-cta { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

/* riquadro "riprendi" (stop & resume) */
.sp-resume { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(0,180,204,.09), rgba(0,130,144,.03)); border: 1px solid rgba(0,180,204,.28); }
.sp-resume-ic { width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--teal-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,130,144,.1); }
.sp-resume-body { flex: 1 1; min-width: 0; }
.sp-resume-t { font-size: 14px; font-weight: 900; color: var(--ink); }
.sp-resume-s { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.sp-resume-prog { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.sp-resume-bar { flex: 1 1; max-width: 180px; height: 6px; border-radius: 999px; background: rgba(0,130,144,.12); overflow: hidden; }
.sp-resume-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--teal-2)); }
.sp-resume-pct { font-size: 10.5px; font-weight: 800; color: var(--ink-3); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Layout 2 colonne workshop (chat sx · pannello dx) */
.sp-2col { display: grid; grid-template-columns: minmax(0, 1fr) 322px; grid-gap: 16px; gap: 16px; align-items: start; }
@media (max-width: 760px) { .sp-2col { grid-template-columns: 1fr; } }
.sp-side { display: flex; flex-direction: column; gap: 14px; position: -webkit-sticky; position: sticky; top: 8px; }
@media (max-width: 760px) { .sp-side { position: static; } }

/* la chat riusa .mbw-cop ma qui è più alta e a piena larghezza colonna */
.sp-chat.mbw-cop { height: 600px; }
@media (max-width: 760px) { .sp-chat.mbw-cop { height: 540px; } }
.sp-turn-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--teal-2); margin-bottom: 5px; }
.sp-chat .mbw-msg.out .mbw-bubble { background: var(--field-bg, #f3f6f7); color: var(--ink-2); border: 1px solid rgba(0,130,144,.10); border-top-right-radius: 4px; }
.sp-chat .mbw-msg.out .mbw-msg-avatar { background: rgba(0,130,144,.08); color: var(--ink-3); }

/* pannello destro · repository manifesto */
.sp-panel-h { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.sp-panel-title { font-size: 13px; font-weight: 900; color: var(--ink); letter-spacing: -.2px; }
.sp-panel-count { margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--ink-4); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.sp-slots { display: flex; flex-direction: column; gap: 6px; }
.sp-slot { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(0,130,144,.03); border: 1px solid rgba(0,130,144,.07); transition: border-color .15s, background .15s; }
.sp-slot.done { background: rgba(0,168,94,.05); border-color: rgba(0,168,94,.16); }
.sp-slot.current { background: rgba(0,180,204,.06); border-color: var(--teal); box-shadow: 0 0 0 1px rgba(0,180,204,.14); }
.sp-slot.incomplete { background: rgba(255,203,5,.07); border-color: rgba(255,203,5,.42); }
.sp-slot-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.sp-slot.done .sp-slot-dot { background: #00a85e; color: #fff; }
.sp-slot.current .sp-slot-dot { background: var(--teal-2); color: #fff; animation: sp-pulse 1.6s ease-in-out infinite; }
.sp-slot.wait .sp-slot-dot { background: #fff; border: 1.5px solid rgba(15,36,39,.16); }
.sp-slot.incomplete .sp-slot-dot { background: #ffcb05; color: #6b4e00; }
@keyframes sp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,180,204,.3); } 50% { box-shadow: 0 0 0 4px rgba(0,180,204,0); } }
.sp-slot-body { flex: 1 1; min-width: 0; }
.sp-slot-name { font-size: 12px; font-weight: 800; color: var(--ink); }
.sp-slot.wait .sp-slot-name { color: var(--ink-3); }
.sp-slot-val { font-size: 11px; font-weight: 500; color: var(--ink-3); line-height: 1.45; margin-top: 3px; text-wrap: pretty; }
.sp-slot-live { font-size: 10px; font-weight: 800; color: var(--teal-2); font-style: italic; margin-top: 3px; }

/* Quality Gate checklist */
.sp-qg { display: flex; flex-direction: column; gap: 7px; }
.sp-qg-item { display: flex; align-items: flex-start; gap: 9px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.sp-qg-box { width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; border: 1.5px solid rgba(0,130,144,.24); background: #fff; color: #fff; transition: all .2s; }
.sp-qg-item.done .sp-qg-box { background: #00a85e; border-color: #00a85e; }
.sp-qg-item.done { color: var(--ink); }
.sp-qg-box svg { opacity: 0; transition: opacity .2s; }
.sp-qg-item.done .sp-qg-box svg { opacity: 1; }
.sp-qg-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(0,130,144,.08); font-size: 10.5px; font-weight: 700; color: var(--ink-4); }
.sp-qg-foot svg { color: var(--ink-4); flex-shrink: 0; }

/* Manifesto in una pagina (passaggio di fase) */
.sp-onepage-wrap { max-width: 820px; }
.sp-op-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 13px; background: rgba(0,168,94,.06); border: 1px solid rgba(0,168,94,.24); margin-bottom: 4px; }
.sp-op-banner-ic { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #00a85e, #008a4d); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-op-banner-t { font-size: 13.5px; font-weight: 900; color: var(--ink); }
.sp-op-banner-s { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }

.sp-op { border-radius: 16px; overflow: hidden; border: 1px solid rgba(6,43,49,.1); background: #fff; }
.sp-op-head { background: linear-gradient(135deg, #062b31, #0a3a42); color: #fff; padding: 24px 26px; }
.sp-op-company { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.sp-op-siamo { font-size: 20px; font-weight: 900; letter-spacing: -.4px; line-height: 1.35; margin-top: 8px; text-wrap: pretty; }
.sp-op-motto { font-size: 13px; font-style: italic; font-weight: 600; color: #00b4cc; margin-top: 12px; }
.sp-op-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.sp-op-el { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-gap: 16px; gap: 16px; align-items: start; }
@media (max-width: 620px) { .sp-op-el { grid-template-columns: 1fr; gap: 4px; } }
.sp-op-el-k { display: flex; flex-direction: column; gap: 6px; }
.sp-op-el-name { font-size: 11px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-4); }
.sp-op-el-v { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.55; text-wrap: pretty; }
.sp-op-el + .sp-op-el { padding-top: 16px; border-top: 1px solid rgba(6,43,49,.07); }
.sp-op-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-op-chip { font-size: 11.5px; font-weight: 700; color: var(--teal-2); background: rgba(0,180,204,.1); border: 1px solid rgba(0,180,204,.24); border-radius: 999px; padding: 5px 12px; }
.sp-op-lines { list-style: none; margin: 0; padding: 0; counter-reset: op; display: flex; flex-direction: column; gap: 8px; }
.sp-op-lines li { position: relative; counter-increment: op; padding-left: 30px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.sp-op-lines li::before { content: counter(op); position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; background: rgba(0,130,144,.1); color: var(--teal-2); font-size: 10.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.sp-op-validate { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgba(255,149,0,.06); border: 1px solid rgba(255,149,0,.26); margin-top: 4px; }
.sp-op-validate-ic { width: 40px; height: 40px; border-radius: 11px; background: #fff; color: #c06a00; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 10px rgba(255,149,0,.12); }
.sp-op-validate-body { flex: 1 1; min-width: 0; }
.sp-op-validate-t { font-size: 13px; font-weight: 900; color: var(--ink); }
.sp-op-validate-s { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }

/* tabella assistita (.sp-grid) + celle */
.sp-grid-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sp-grid-head .fm-section-head { flex: 1 1; min-width: 0; }
.sp-grid-scroll { overflow-x: auto; margin: 0 -2px; padding: 0 2px 2px; }
.sp-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.sp-grid thead th { text-align: left; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-4); padding: 0 10px 9px; white-space: nowrap; border-bottom: 1px solid rgba(0,130,144,.12); }
.sp-grid tbody td { padding: 5px 6px; vertical-align: middle; border-bottom: 1px solid rgba(0,130,144,.06); }
.sp-grid tbody tr:last-child td { border-bottom: none; }
.sp-grid tbody tr.proposta { background: rgba(255,149,0,.035); }
.sp-grid tbody tr.proposta td:first-child { box-shadow: inset 3px 0 0 rgba(255,149,0,.5); }
.sp-grid tbody tr:hover { background: rgba(0,130,144,.025); }
.sp-grid tbody tr.proposta:hover { background: rgba(255,149,0,.06); }
.sp-grid tbody tr.flagged { background: rgba(255,149,0,.035); }
.sp-grid tbody tr.flagged td:first-child { box-shadow: inset 3px 0 0 rgba(255,149,0,.5); }
.sp-cell-input { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 7px; background: none; padding: 6px 8px; font: 600 12px/1.35 inherit; font-family: inherit; color: var(--ink); transition: border-color .12s, background .12s; }
.sp-cell-input.strong { font-weight: 800; }
.sp-cell-input.mono { font-family: var(--ff-mono); font-size: 11.5px; font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.sp-cell-input:hover { border-color: rgba(0,130,144,.14); }
.sp-cell-input:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(0,180,204,.12); }
.sp-owner { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; padding: 0 4px; }
.sp-owner-av { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: #fff; font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.sp-owner-empty { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1px dashed rgba(0,130,144,.3); background: none; color: var(--teal-2); font: 800 11px/1 inherit; cursor: pointer; transition: all .12s; white-space: nowrap; }
.sp-owner-empty:hover { border-color: var(--teal); background: rgba(0,180,204,.05); }
.sp-grid-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sp-grid-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: #00915a; }
.sp-grid-ok svg { color: #00a85e; }
.sp-grid-add { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 8px 13px; border-radius: 9px; border: 1px dashed rgba(0,130,144,.3); background: none; color: var(--teal-2); font: 800 11.5px/1 inherit; cursor: pointer; transition: all .12s; align-self: flex-start; }
.sp-grid-add:hover { border-color: var(--teal); background: rgba(0,180,204,.05); }
.sp-grid-actions .crm-menu { top: calc(100% + 4px); right: 0; min-width: 200px; }

/* ══════════════════════════════════════════════════════════════════
   mb-wizard.css — chat copilota (mbw-cop / mbw-msg / mbw-bubble)
   ══════════════════════════════════════════════════════════════════ */
.mbw-cop { display: flex; flex-direction: column; height: 640px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,252,252,.92)); border: 1px solid rgba(0,130,144,.14); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,60,80,.06); overflow: hidden; position: relative; }
.mbw-cop::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent 10%, rgba(0,180,204,.5) 50%, transparent 90%); pointer-events:none; }
@media (max-width: 900px) { .mbw-cop { height: 560px; } }
.mbw-cop-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid rgba(0,130,144,.1); }
.mbw-cop-avatar { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px var(--teal-glow); }
.mbw-cop-id { flex: 1 1; min-width: 0; }
.mbw-cop-name { font-size: 13.5px; font-weight: 900; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.mbw-cop-badge { font-size: 8.5px; font-weight: 900; letter-spacing: .4px; padding: 2px 6px; border-radius: 999px; background: rgba(0,180,204,.12); color: var(--teal-2); border: 1px solid rgba(0,180,204,.28); display: inline-flex; align-items: center; gap: 3px; }
.mbw-cop-sub { font-size: 10.5px; font-weight: 700; color: var(--ink-4); margin-top: 2px; }
.mbw-cop-meter { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid rgba(0,130,144,.08); background: rgba(0,130,144,.035); }
.mbw-cop-meter svg { color: var(--teal-2); flex-shrink: 0; }
.mbw-cop-meter-bar { flex: 1 1; height: 5px; border-radius: 999px; background: rgba(0,130,144,.12); overflow: hidden; }
.mbw-cop-meter-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--teal-2)); }
.mbw-cop-meter-txt { font-size: 10.5px; font-weight: 800; color: var(--ink-3); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.mbw-cop-disclosure { font-size: 10.5px; font-weight: 600; color: var(--ink-4); padding: 8px 16px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(0,130,144,.06); }
.mbw-cop-disclosure svg { color: var(--ink-4); flex-shrink: 0; }
.mbw-cop-body { flex: 1 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mbw-cop-body::-webkit-scrollbar { width: 4px; }
.mbw-cop-body::-webkit-scrollbar-thumb { background: rgba(0,130,144,.18); border-radius: 2px; }
.mbw-cop-suggest { display: flex; flex-direction: column; gap: 7px; }
.mbw-cop-suggest-lbl { font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-4); margin-bottom: 1px; }
.mbw-cop-chip { text-align: left; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(0,130,144,.14); background: rgba(255,255,255,.7); font: 700 11.5px/1.35 inherit; color: var(--ink-2); cursor: pointer; transition: all .14s; display: flex; align-items: center; gap: 8px; }
.mbw-cop-chip:hover { border-color: var(--teal); background: #fff; color: var(--ink); transform: translateX(2px); }
.mbw-cop-chip svg { color: var(--teal); flex-shrink: 0; }
.mbw-msg { display: flex; gap: 9px; max-width: 100%; }
.mbw-msg-avatar { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mbw-msg-content { min-width: 0; }
.mbw-bubble { padding: 11px 13px; border-radius: 13px; font-size: 12.5px; font-weight: 500; line-height: 1.55; color: var(--ink-2); }
.mbw-bubble strong { color: var(--ink); font-weight: 800; }
.mbw-bubble tool { font: 700 10.5px/1 var(--ff-mono); background: rgba(0,168,94,.12); color: #00824a; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.mbw-msg.in .mbw-bubble { background: rgba(0,130,144,.07); border: 1px solid rgba(0,130,144,.12); border-top-left-radius: 4px; }
.mbw-msg.out { flex-direction: row-reverse; }
.mbw-msg.out .mbw-bubble { background: rgba(15,36,39,.92); color: #eaf2f3; border-top-right-radius: 4px; }
.mbw-msg.out .mbw-msg-avatar { background: rgba(15,36,39,.12); color: var(--ink-2); }
.mbw-msg-added { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 10px; border-radius: 8px; background: rgba(0,180,204,.1); border: 1px solid rgba(0,180,204,.26); font-size: 10.5px; font-weight: 800; color: var(--teal-2); }
.mbw-msg-added svg { flex-shrink: 0; }
.mbw-cop-foot { padding: 12px 14px; border-top: 1px solid rgba(0,130,144,.1); }
.mbw-cop-composer { display: flex; align-items: flex-end; gap: 8px; background: #fff; border: 1px solid rgba(0,130,144,.18); border-radius: 13px; padding: 7px 7px 7px 13px; transition: border-color .14s, box-shadow .14s; }
.mbw-cop-composer:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,180,204,.12); }
.mbw-cop-composer textarea { flex: 1 1; border: none; outline: none; resize: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.5; max-height: 90px; padding: 4px 0; }
.mbw-cop-send { width: 34px; height: 34px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--teal), var(--teal-2)); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .12s; box-shadow: 0 3px 10px var(--teal-glow); }
.mbw-cop-send:hover { transform: translateY(-1px); }
.mbw-cop-send:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ══════════════════════════════════════════════════════════════════
   marketing-guide.css — mg-conf (confidenza) + mg-skel (skeleton)
   ══════════════════════════════════════════════════════════════════ */
.mg-conf { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.mg-conf::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mg-conf.alta { background: rgba(0,168,94,.1); color: #00915a; } .mg-conf.alta::before { background: #00a85e; }
.mg-conf.media { background: rgba(255,203,5,.14); color: #b8870a; } .mg-conf.media::before { background: #e0b000; }
.mg-conf.bassa { background: rgba(236,98,126,.12); color: var(--mg-red-ink); } .mg-conf.bassa::before { background: var(--mg-red); }
.mg-skel { display: block; border-radius: 7px; background: linear-gradient(100deg, rgba(0,130,144,.08) 30%, rgba(0,130,144,.16) 50%, rgba(0,130,144,.08) 70%); background-size: 200% 100%; animation: mg-shimmer 1.3s linear infinite; }
.mg-skel.val { height: 22px; width: 68%; }
.mg-skel.line { height: 12px; }
.mg-skel.line.w90 { width: 90%; } .mg-skel.line.w70 { width: 70%; } .mg-skel.line.w50 { width: 50%; }
@keyframes mg-shimmer { to { background-position: -200% 0; } }

/* ══════════════════════════════════════════════════════════════════
   crm-contacts.css — ct-tag (chip tag)
   ══════════════════════════════════════════════════════════════════ */
.ct-tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; white-space: nowrap;
  line-height: 1.5;
}
.ct-tag-more { color: var(--ink-4); font-size: 11px; font-weight: 800; }
.ct-tag-more-btn { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: var(--ink-3); background: rgba(0,130,144,.07);
  border: 1px solid rgba(0,130,144,.14); cursor: pointer; line-height: 1.5; font-family: inherit; }
.ct-tag-more-btn:hover { color: var(--teal); border-color: var(--teal); background: rgba(0,180,204,.08); }

/* ══════════════════════════════════════════════════════════════════
   fm-feedback.css — alert inline + toast (famiglie assenti in globals)
   NB: @keyframes fm-toast-in NON è riportato: esiste già in globals (toast.tsx).
   ══════════════════════════════════════════════════════════════════ */
.fm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(0,130,144,.18);
  border-left: 3px solid var(--fm-tone-info);
  border-radius: 10px;
  box-shadow:
    0 14px 36px -8px rgba(0,30,40,.22),
    0 4px 10px -2px rgba(0,30,40,.08);
  font-size: 13px;
  color: var(--ink-2);
  max-width: 460px;
  z-index: 1100;
  animation: fm-toast-in .26s cubic-bezier(.4,0,.2,1);
}
.fm-toast-ico {
  width: 16px; height: 16px;
  stroke: var(--fm-tone-info);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.fm-toast-msg { flex: 1 1; min-width: 0; }
.fm-toast-msg strong { color: var(--ink); font-weight: 700; }
.fm-toast-x {
  margin-left: 4px;
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-4);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.fm-toast-x:hover { background: rgba(0,30,40,.06); color: var(--ink-2); }
.fm-toast-success { border-left-color: var(--fm-tone-success); }
.fm-toast-success .fm-toast-ico { stroke: var(--fm-tone-success); }
.fm-toast-info { border-left-color: var(--fm-tone-info); }
.fm-toast-info .fm-toast-ico { stroke: var(--fm-tone-info); }
.fm-toast-warning { border-left-color: var(--fm-tone-warning); }
.fm-toast-warning .fm-toast-ico { stroke: var(--fm-tone-warning); }
.fm-toast-error { border-left-color: var(--fm-tone-danger); }
.fm-toast-error .fm-toast-ico { stroke: var(--fm-tone-danger); }

.fm-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--fm-tone-info-bg);
  border: 1px solid var(--fm-tone-info-bd);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.fm-alert-ico {
  width: 18px; height: 18px;
  stroke: var(--fm-tone-info);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}
.fm-alert-body { flex: 1 1; min-width: 0; }
.fm-alert-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.fm-alert-msg { font-size: 12.5px; color: var(--ink-3); }
.fm-alert-msg strong { color: var(--ink); font-weight: 700; }
.fm-alert-action {
  flex-shrink: 0;
  align-self: center;
  padding: 6px 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,30,40,.10);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.fm-alert-action:hover { background: #fff; border-color: rgba(0,30,40,.18); }
.fm-alert-x {
  flex-shrink: 0;
  align-self: flex-start;
  width: 24px; height: 24px;
  background: transparent;
  border: none;
  color: var(--ink-4);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s;
}
.fm-alert-x:hover { background: rgba(0,30,40,.06); color: var(--ink-2); }
.fm-alert-info     { background: var(--fm-tone-info-bg);     border-color: var(--fm-tone-info-bd); }
.fm-alert-info    .fm-alert-ico { stroke: var(--fm-tone-info); }
.fm-alert-success  { background: var(--fm-tone-success-bg);  border-color: var(--fm-tone-success-bd); }
.fm-alert-success .fm-alert-ico { stroke: var(--fm-tone-success); }
.fm-alert-warning  { background: var(--fm-tone-warning-bg);  border-color: var(--fm-tone-warning-bd); }
.fm-alert-warning .fm-alert-ico { stroke: var(--fm-tone-warning); }
.fm-alert-danger   { background: var(--fm-tone-danger-bg);   border-color: var(--fm-tone-danger-bd); }
.fm-alert-danger  .fm-alert-ico { stroke: var(--fm-tone-danger); }

@media (max-width: 767px) {
  .fm-toast {
    left: 12px; right: 12px;
    transform: none;
    bottom: 12px;
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   tactical-agents.css — wizard chrome (stepper / section / foot / form)
   NB: wiz-row/field/label/input/select/textarea NON riportati (già in globals).
   ══════════════════════════════════════════════════════════════════ */
.wiz-form {
  display: flex; flex-direction: column; gap: 0;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 16px;
  overflow: hidden;
}
.wiz-stepper {
  display: flex; align-items: center; gap: 2px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0,130,144,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.wiz-step {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1; min-width: 0;
}
.wiz-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,130,144,.08);
  color: var(--ink-4);
  display: flex; align-items: center; justify-content: center;
  font: 900 12px/1 inherit;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: all .18s;
}
.wiz-step.done .wiz-step-num {
  background: #00a85e;
  color: #fff;
}
.wiz-step.current .wiz-step-num {
  background: #fff;
  color: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,180,204,.16);
}
.wiz-step-label { font-size: 11.5px; font-weight: 800; color: var(--ink-4); }
.wiz-step.done .wiz-step-label { color: #00a85e; }
.wiz-step.current .wiz-step-label { color: var(--ink); }
.wiz-step-line {
  flex: 1 1; height: 2px;
  background: rgba(0,130,144,.08);
  border-radius: 2px;
  margin: 0 6px;
}
.wiz-step-line.done { background: #00a85e; }
.wiz-section {
  border-bottom: 1px solid rgba(0,130,144,.08);
}
.wiz-section:last-of-type { border-bottom: none; }
.wiz-section.collapsed .wiz-section-body { display: none; }
.wiz-section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.wiz-section-head.locked { cursor: default; opacity: .5; }
.wiz-section-h-l {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1; min-width: 0;
}
.wiz-section-pill {
  font-size: 9.5px; font-weight: 900; letter-spacing: 1.2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,130,144,.08);
  color: var(--ink-4);
}
.wiz-section.current .wiz-section-pill {
  background: linear-gradient(135deg, rgba(0,180,204,.18), rgba(0,130,144,.10));
  color: var(--teal);
}
.wiz-section.done .wiz-section-pill {
  background: rgba(0,168,94,.10);
  color: #00a85e;
}
.wiz-section-title { font-size: 14px; font-weight: 900; color: var(--ink); letter-spacing: -.2px; }
.wiz-section-sub { font-size: 11px; font-weight: 600; color: var(--ink-4); margin-top: 2px; }
.wiz-section-status {
  font-size: 11px; font-weight: 700; color: var(--ink-4);
}
.wiz-section-status.done { color: #00a85e; }
.wiz-section-chev {
  width: 16px; height: 16px;
  color: var(--ink-4);
  transition: transform .14s;
}
.wiz-section.collapsed .wiz-section-chev { transform: rotate(-90deg); }
.wiz-section-body { padding: 6px 22px 22px; }
.wiz-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid rgba(0,130,144,.08);
  background: rgba(255,255,255,.5);
}
.wiz-foot-cost {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
}
.wiz-foot-cost strong { color: var(--ink); font-weight: 900; }
.wiz-foot-actions { display: flex; gap: 8px; }
/* ===== M3 Centro di Comando — DS copilota — END ===== */

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_gf4z22wdamdkvougv5frnjywma/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/app/settings/security/security.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════
   MFA Flow — styles
   Login challenge · Security center · Drawers · Critical modal
   ══════════════════════════════════════════════════════════ */

/* ── Stage host (so we can show login fullscreen vs security inside rail) ── */
.mfa-stage { min-height: 100vh; }

/* ─────────────────────────────────────────────────────────
   1. LOGIN MFA CHALLENGE — riusa .login-* del t01-login.html
   ───────────────────────────────────────────────────────── */

/* OTP input — 6 caselle separate */
.mfa-otp {
  display: flex;
  gap: 8px;
  margin: 18px 0 22px;
  justify-content: space-between;
}
.mfa-otp input {
  width: 48px; height: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  letter-spacing: -.5px;
  color: var(--ink);
  border: 1.5px solid rgba(0,130,144,.15);
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: all .14s;
}
.mfa-otp input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,180,204,.12);
}
.mfa-otp input.filled {
  border-color: rgba(0,130,144,.35);
  background: rgba(0,180,204,.04);
}
.mfa-otp.has-error input {
  border-color: var(--red);
  background: rgba(229,72,77,.04);
  animation: mfa-shake .35s ease-in-out;
}

@keyframes mfa-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.mfa-otp-error {
  font-size: 12px;
  color: var(--red);
  margin: -10px 0 16px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mfa-otp-error svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

/* Backup-code mode — single text input */
.mfa-backup-input {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Step header in MFA challenge */
.mfa-step-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.mfa-step-h-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,180,204,.1);
  border: 1px solid rgba(0,180,204,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mfa-step-h-icon svg {
  width: 20px; height: 20px;
  stroke: var(--teal);
  fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Passkey CTA — visually distinct (primary) */
.mfa-btn-passkey {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .14s;
  box-shadow: 0 4px 12px rgba(0,180,204,.25);
}
.mfa-btn-passkey:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,180,204,.35);
}
.mfa-btn-passkey svg {
  width: 18px; height: 18px;
  stroke: #fff; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.mfa-btn-secondary {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1.5px solid rgba(0,130,144,.18);
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s;
  margin-top: 10px;
}
.mfa-btn-secondary:hover {
  background: rgba(0,180,204,.05);
  border-color: rgba(0,180,204,.3);
  color: var(--teal);
}

.mfa-help-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-4);
  text-decoration: none;
  transition: color .12s;
}
.mfa-help-link:hover { color: var(--teal); }

.mfa-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink-5);
  text-decoration: none;
  margin-top: 4px;
}
.mfa-back-link:hover { color: var(--ink-3); }
.mfa-back-link svg {
  width: 11px; height: 11px;
}

/* ─────────────────────────────────────────────────────────
   2. SECURITY CENTER — in-app page
   ───────────────────────────────────────────────────────── */

.sec-shell {
  min-height: 100vh;
  display: flex;
  background: var(--field-bg);
}

.sec-main {
  flex: 1 1;
  padding: 32px 48px 48px;
  overflow-y: auto;
  position: relative;
}

.sec-header {
  margin-bottom: 24px;
}

.sec-bc {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  margin-bottom: 12px;
}
.sec-bc-seg {
  color: var(--ink-3);
  padding: 3px 6px; border-radius: 5px;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.sec-bc-seg:hover { background: rgba(0,180,204,.08); color: var(--ink-2); }
.sec-bc-seg.on { color: var(--ink); cursor: default; }
.sec-bc-sep { color: var(--ink-5); }

.sec-title {
  font-size: 26px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.4px;
  margin-bottom: 4px;
}
.sec-subtitle {
  font-size: 14px;
  color: var(--ink-4);
  line-height: 1.5;
  max-width: 640px;
}

/* Score card — 3 variants */
.sec-score {
  margin: 24px 0 32px;
  padding: 20px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,130,144,.1);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: var(--sh-card);
}
.sec-score.score-high { border-color: rgba(38,166,108,.3); background: rgba(232,247,237,.6); }
.sec-score.score-mid  { border-color: rgba(255,203,5,.3);  background: rgba(255,247,210,.5); }
.sec-score.score-low  { border-color: rgba(229,72,77,.25); background: rgba(254,236,236,.5); }

.sec-score-left { flex-shrink: 0; }
.sec-score-mid  { flex: 1 1; min-width: 0; }
.sec-score-cta  { flex-shrink: 0; }

/* Variant 1 — numeric score */
.sec-score-numeric .sec-score-num {
  font-size: 48px; font-weight: 900;
  color: var(--ink);
  letter-spacing: -1.5px;
  line-height: 1;
  font-family: 'SF Mono', monospace;
}
.sec-score-numeric .sec-score-num small {
  font-size: 18px; font-weight: 700;
  color: var(--ink-4);
}
.sec-score-numeric .sec-score-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(0,130,144,.1);
  overflow: hidden;
  margin-top: 10px;
  width: 200px;
}
.sec-score-numeric .sec-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red) 0%, #f5a623 50%, #26a66c 100%);
  background-size: 200px 100%;
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}

/* Variant 2 — qualitative state */
.sec-score-qual .sec-score-label-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px;
}
.sec-score-qual .sec-score-shield {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(38,166,108,.12);
  border: 1px solid rgba(38,166,108,.25);
  display: flex; align-items: center; justify-content: center;
}
.sec-score-qual.score-mid .sec-score-shield {
  background: rgba(255,203,5,.15);
  border-color: rgba(255,203,5,.3);
}
.sec-score-qual.score-low .sec-score-shield {
  background: rgba(229,72,77,.1);
  border-color: rgba(229,72,77,.25);
}
.sec-score-qual .sec-score-shield svg {
  width: 28px; height: 28px;
  stroke: #26a66c; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sec-score-qual.score-mid .sec-score-shield svg { stroke: #d99a00; }
.sec-score-qual.score-low .sec-score-shield svg { stroke: var(--red); }

.sec-score-qual .sec-score-label {
  font-size: 22px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px;
}
.sec-score-qual .sec-score-dots {
  display: flex; gap: 4px;
  margin-top: 6px;
}
.sec-score-qual .sec-score-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0,130,144,.12);
}
.sec-score-qual .sec-score-dot.on { background: #26a66c; }
.sec-score-qual.score-mid .sec-score-dot.on { background: #d99a00; }
.sec-score-qual.score-low .sec-score-dot.on { background: var(--red); }

/* Common to both score variants */
.sec-score-msg {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-top: 4px;
}
.sec-score-msg strong { color: var(--ink); font-weight: 700; }

.sec-score-cta-btn {
  padding: 10px 16px;
  background: var(--teal);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .14s;
}
.sec-score-cta-btn:hover {
  background: var(--teal-2);
  transform: translateY(-1px);
}

/* Methods grid */
.sec-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.sec-method {
  padding: 22px;
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,130,144,.1);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .18s;
}
.sec-method:hover {
  border-color: rgba(0,180,204,.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6,43,49,.08);
}
.sec-method.is-active {
  border-color: rgba(38,166,108,.3);
  background: rgba(255,255,255,.85);
}
.sec-method.is-recommended {
  border-color: rgba(0,180,204,.4);
  background: linear-gradient(135deg, rgba(0,180,204,.05) 0%, rgba(255,255,255,.65) 100%);
  position: relative;
}
.sec-method.is-recommended::before {
  content: 'CONSIGLIATO';
  position: absolute;
  top: -8px; left: 16px;
  font-size: 9.5px; font-weight: 900;
  letter-spacing: 1.2px;
  background: var(--teal);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}

.sec-method-head {
  display: flex; align-items: flex-start; gap: 12px;
}
.sec-method-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,180,204,.08);
  border: 1px solid rgba(0,180,204,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sec-method.is-active .sec-method-icon {
  background: rgba(38,166,108,.1);
  border-color: rgba(38,166,108,.2);
}
.sec-method-icon svg {
  width: 20px; height: 20px;
  stroke: var(--teal);
  fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.sec-method.is-active .sec-method-icon svg { stroke: #26a66c; }

.sec-method-body { flex: 1 1; min-width: 0; }
.sec-method-name {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 8px;
}
.sec-method-state {
  font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.sec-method-state.is-on  { color: #1f8a52; }
.sec-method-state.is-off { color: var(--ink-4); }
.sec-method-state.is-warn { color: #d99a00; }
.sec-method-state-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.sec-method-desc {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.5;
  margin-top: 6px;
}

.sec-method-detail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-3);
}
.sec-method-detail svg {
  width: 14px; height: 14px;
  stroke: var(--ink-4); fill: none;
  stroke-width: 1.8; flex-shrink: 0;
}
.sec-method-detail strong { color: var(--ink-2); font-weight: 700; }

.sec-method-actions {
  display: flex; gap: 8px;
  margin-top: auto;
}
/* Device row inside passkey card */
.sec-device {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.5);
  border-radius: 8px;
  margin-top: 8px;
  font-size: 12px;
}
.sec-device-ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(38,166,108,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sec-device-ico svg {
  width: 14px; height: 14px;
  stroke: #26a66c; fill: none;
  stroke-width: 1.8;
}
.sec-device-name { font-weight: 700; color: var(--ink-2); }
.sec-device-meta { font-size: 11px; color: var(--ink-5); margin-top: 1px; }
.sec-device-rm {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-4);
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 5px;
}
.sec-device-rm:hover { color: var(--red); background: rgba(229,72,77,.06); }

/* ─────────────────────────────────────────────────────────
   3. DRAWER (Aggiungi passkey, Setup TOTP)
   ───────────────────────────────────────────────────────── */

.sec-backdrop {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.sec-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.sec-drawer {
  position: fixed; top: 24px; right: 24px; bottom: 24px;
  width: 460px;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  border: 1px solid rgba(0,130,144,.08);
  border-radius: 16px;
  box-shadow:
    0 18px 50px -10px rgba(0,30,40,.22),
    0 6px 16px -4px rgba(0,30,40,.10);
  z-index: 210;
  transform: translateX(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sec-drawer.wide { width: 520px; }
.sec-drawer.open {
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.sec-drawer-head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(0,130,144,.08);
  display: flex; align-items: flex-start; gap: 14px;
}
.sec-drawer-head-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,180,204,.1);
  border: 1px solid rgba(0,180,204,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sec-drawer-head-ico svg {
  width: 20px; height: 20px;
  stroke: var(--teal); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sec-drawer-head-body { flex: 1 1; min-width: 0; }
.sec-drawer-h {
  font-size: 17px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.2px;
  margin-bottom: 3px;
}
.sec-drawer-sub {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.5;
}
.sec-drawer-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(0,130,144,.1);
  color: var(--ink-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .14s;
}
.sec-drawer-close:hover {
  background: rgba(255,255,255,.8);
  color: var(--ink);
}
.sec-drawer-close svg { width: 14px; height: 14px; }

.sec-drawer-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.sec-drawer-foot {
  padding: 16px 24px;
  border-top: 1px solid rgba(0,130,144,.08);
  display: flex; gap: 10px; justify-content: flex-end;
  background: rgba(255,255,255,.5);
}

/* Compatibility chips inside passkey drawer */
.sec-compat {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 12px 0 18px;
}
.sec-compat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,130,144,.15);
  border-radius: 20px;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-2);
}
.sec-compat-chip svg {
  width: 12px; height: 12px;
  stroke: var(--ink-3); fill: none;
  stroke-width: 1.8;
}

/* TOTP setup steps */
.sec-totp-steps {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 20px;
}
.sec-totp-step {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.sec-totp-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.sec-totp-qr-wrap {
  display: flex; gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(0,130,144,.12);
  border-radius: 12px;
  margin-bottom: 16px;
}
.sec-totp-qr {
  width: 140px; height: 140px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sec-totp-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.sec-totp-secret-wrap {
  flex: 1 1; min-width: 0;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.sec-totp-secret-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-4);
}
.sec-totp-secret {
  font-family: 'SF Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(0,180,204,.06);
  padding: 6px 8px;
  border-radius: 6px;
  word-break: break-all;
  position: relative;
  cursor: copy;
  border: 1px solid transparent;
  transition: border-color .12s;
}
.sec-totp-secret:hover { border-color: rgba(0,180,204,.25); }
.sec-totp-hint {
  font-size: 11px;
  color: var(--ink-5);
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px;
}
.sec-totp-hint svg {
  width: 11px; height: 11px;
  stroke: var(--ink-5); fill: none;
}

.sec-app-links {
  display: flex; gap: 8px;
  margin: 14px 0 16px;
  padding: 12px;
  background: rgba(0,180,204,.04);
  border: 1px dashed rgba(0,180,204,.2);
  border-radius: 10px;
}
.sec-app-links-text {
  font-size: 12px;
  color: var(--ink-3);
  flex: 1 1;
  line-height: 1.5;
}
.sec-app-links-text strong { color: var(--ink-2); }

/* ─────────────────────────────────────────────────────────
   4. BACKUP CODES — critical modal
   ───────────────────────────────────────────────────────── */

.sec-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6,43,49,.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sec-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.sec-modal {
  width: 540px; max-width: 100%;
  max-height: 90vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(6,43,49,.4);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(.96) translateY(8px);
  opacity: 0;
  transition: all .28s cubic-bezier(.2,.8,.2,1);
}
.sec-modal-backdrop.open .sec-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.sec-modal-warning {
  padding: 18px 24px;
  background: linear-gradient(90deg, #fff7d2 0%, #ffe8a3 100%);
  border-bottom: 1px solid rgba(217,154,0,.3);
  display: flex; align-items: center; gap: 14px;
}
.sec-modal-warning-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(217,154,0,.18);
  border: 1px solid rgba(217,154,0,.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sec-modal-warning-ico svg {
  width: 20px; height: 20px;
  stroke: #b58200; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sec-modal-warning-h {
  font-size: 15px; font-weight: 800;
  color: #62450a;
  letter-spacing: -.1px;
  margin-bottom: 2px;
}
.sec-modal-warning-sub {
  font-size: 12.5px;
  color: #876515;
  line-height: 1.45;
}

.sec-modal-body {
  padding: 22px 24px;
  flex: 1 1;
  overflow-y: auto;
}

.sec-codes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px 24px;
  gap: 10px 24px;
  padding: 18px 22px;
  background: rgba(0,180,204,.04);
  border: 1px solid rgba(0,180,204,.15);
  border-radius: 12px;
  margin-bottom: 18px;
}
.sec-code {
  font-family: 'SF Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--ink);
  padding: 4px 0;
  text-align: center;
}

.sec-codes-actions {
  display: flex; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sec-codes-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,130,144,.18);
  border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .14s;
}
.sec-codes-action:hover {
  background: #fff;
  border-color: rgba(0,180,204,.4);
  color: var(--teal);
}
.sec-codes-action.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.sec-codes-action.primary:hover {
  background: var(--teal-2);
  border-color: var(--teal-2);
  color: #fff;
}
.sec-codes-action svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sec-codes-action.copied {
  background: rgba(38,166,108,.12);
  border-color: rgba(38,166,108,.4);
  color: #1f8a52;
}

.sec-confirm-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  background: rgba(229,72,77,.05);
  border: 1px solid rgba(229,72,77,.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all .14s;
}
.sec-confirm-row:hover {
  border-color: rgba(229,72,77,.35);
}
.sec-confirm-row.checked {
  background: rgba(38,166,108,.05);
  border-color: rgba(38,166,108,.3);
}
.sec-confirm-cb {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid var(--red);
  background: #fff;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  transition: all .14s;
}
.sec-confirm-row.checked .sec-confirm-cb {
  background: #26a66c;
  border-color: #26a66c;
}
.sec-confirm-cb svg {
  width: 12px; height: 12px;
  stroke: #fff; fill: none;
  stroke-width: 3; stroke-linecap: round;
  opacity: 0;
  transition: opacity .12s;
}
.sec-confirm-row.checked .sec-confirm-cb svg { opacity: 1; }
.sec-confirm-text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.sec-confirm-text strong { color: var(--ink); font-weight: 700; }

.sec-modal-foot {
  padding: 14px 24px;
  border-top: 1px solid rgba(0,130,144,.08);
  display: flex; justify-content: flex-end; gap: 10px;
  background: rgba(0,130,144,.02);
}

/* ─────────────────────────────────────────────────────────
   6. SECTION HEADERS — raggruppano i blocchi (Accesso / 2FA / Sessioni)
   ───────────────────────────────────────────────────────── */

.sec-section {
  margin-top: 32px;
}
.sec-section:first-of-type { margin-top: 0; }

.sec-section-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(0,130,144,.12);
}
.sec-section-h ~ .sec-section-h,
.sec-rows + .sec-section-h,
.sec-methods + .sec-section-h,
.sec-sessions + .sec-section-h,
* + .sec-section-h {
  margin-top: 36px;
}
.sec-header + .sec-section-h,
.sec-bc + .sec-section-h {
  margin-top: 0;
}
.sec-section-h-sub {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-5);
}

/* ─────────────────────────────────────────────────────────
   7. ACCOUNT ROW — card piatta (Password, Recovery email)
   ───────────────────────────────────────────────────────── */

.sec-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,130,144,.1);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  transition: all .16s;
}
.sec-row + .sec-row { margin-top: 10px; }
.sec-row:hover {
  border-color: rgba(0,180,204,.25);
  background: rgba(255,255,255,.85);
}
.sec-row-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(0,180,204,.08);
  border: 1px solid rgba(0,180,204,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sec-row-ico svg {
  width: 18px; height: 18px;
  stroke: var(--teal); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sec-row-body { flex: 1 1; min-width: 0; }
.sec-row-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.sec-row-meta { font-size: 12px; color: var(--ink-4); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sec-row-meta strong { color: var(--ink-2); font-weight: 700; }
.sec-row-meta .sec-verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700;
  color: #1f8a52;
  background: rgba(38,166,108,.1);
  padding: 2px 7px; border-radius: 999px;
}
.sec-row-meta .sec-verified svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.sec-row-meta .sec-pending {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700;
  color: #876515;
  background: rgba(255,203,5,.18);
  padding: 2px 7px; border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────
   8. SESSIONS LIST — dispositivi attivi
   ───────────────────────────────────────────────────────── */

.sec-sessions {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,130,144,.1);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  overflow: hidden;
}
.sec-session {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0,130,144,.07);
  transition: background .12s;
}
.sec-session:last-child { border-bottom: none; }
.sec-session:hover { background: rgba(255,255,255,.45); }
.sec-session-ico {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(0,130,144,.06);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sec-session-ico svg {
  width: 17px; height: 17px;
  stroke: var(--ink-3); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sec-session.is-current .sec-session-ico {
  background: rgba(38,166,108,.12);
}
.sec-session.is-current .sec-session-ico svg { stroke: #1f8a52; }
.sec-session-body { flex: 1 1; min-width: 0; }
.sec-session-name {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.sec-session-meta {
  font-size: 11.5px;
  color: var(--ink-5);
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.sec-session-meta-sep { color: var(--ink-6, rgba(0,130,144,.25)); }
.sec-session-current-tag {
  font-size: 9.5px; font-weight: 900;
  letter-spacing: 1.2px;
  background: #1f8a52;
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
}
.sec-session-revoke {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(0,130,144,.18);
  border-radius: 7px;
  font-size: 11.5px; font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
  transition: all .14s;
  flex-shrink: 0;
}
.sec-session-revoke:hover {
  border-color: rgba(229,72,77,.4);
  color: var(--red);
  background: rgba(229,72,77,.05);
}

.sec-sessions-foot {
  padding: 14px 20px;
  background: rgba(229,72,77,.03);
  border-top: 1px solid rgba(229,72,77,.12);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.sec-sessions-foot-text {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.sec-sessions-foot-text strong { color: var(--ink-2); }
/* ─────────────────────────────────────────────────────────
   9. PASSWORD STRENGTH — drawer Aggiorna password
   ───────────────────────────────────────────────────────── */

.sec-pwd-strength {
  margin-top: 8px;
}
.sec-pwd-strength-bar {
  height: 4px;
  background: rgba(0,130,144,.1);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  gap: 3px;
}
.sec-pwd-strength-seg {
  flex: 1 1;
  background: rgba(0,130,144,.1);
  border-radius: 2px;
  transition: background .18s;
}
.sec-pwd-strength-seg.on-weak   { background: var(--red); }
.sec-pwd-strength-seg.on-fair   { background: #f5a623; }
.sec-pwd-strength-seg.on-good   { background: #26a66c; }
.sec-pwd-strength-seg.on-strong { background: #1f8a52; }

.sec-pwd-strength-label {
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: .2px;
}
.sec-pwd-strength-label.weak   { color: var(--red); }
.sec-pwd-strength-label.fair   { color: #b67800; }
.sec-pwd-strength-label.good   { color: #1f8a52; }
.sec-pwd-strength-label.strong { color: #1f8a52; }

.sec-pwd-rules {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(0,180,204,.04);
  border: 1px solid rgba(0,180,204,.15);
  border-radius: 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px 12px;
  gap: 5px 12px;
}
.sec-pwd-rule {
  font-size: 11.5px;
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-4);
  transition: color .12s;
}
.sec-pwd-rule.met { color: #1f8a52; }
.sec-pwd-rule-ico {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(0,130,144,.08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s;
}
.sec-pwd-rule.met .sec-pwd-rule-ico { background: rgba(38,166,108,.18); }
.sec-pwd-rule-ico svg {
  width: 9px; height: 9px;
  stroke: var(--ink-5); fill: none;
  stroke-width: 3; stroke-linecap: round;
}
.sec-pwd-rule.met .sec-pwd-rule-ico svg { stroke: #1f8a52; }

/* ─────────────────────────────────────────────────────────
   10. CONFIRM MODAL (Esci da tutti i dispositivi)
   ───────────────────────────────────────────────────────── */

.sec-confirm-modal {
  width: 460px; max-width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(6,43,49,.4);
  overflow: hidden;
}
.sec-confirm-modal-head {
  padding: 22px 24px 8px;
  display: flex; gap: 14px; align-items: flex-start;
}
.sec-confirm-modal-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(229,72,77,.1);
  border: 1px solid rgba(229,72,77,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sec-confirm-modal-ico svg {
  width: 22px; height: 22px;
  stroke: var(--red); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Variante "info" (es. sudo / step-up): icona teal-2 invece di red.
   Class canonica `.tone-info` da design-handoff knowledge-base.css:30; il
   selettore legacy `.sec-confirm-modal-ico-info` resta per non rompere
   markup esistente. */
.sec-confirm-modal-ico.tone-info,
.sec-confirm-modal-ico.sec-confirm-modal-ico-info {
  background: rgba(0,180,204,.1);
  border-color: rgba(0,180,204,.25);
}
.sec-confirm-modal-ico.tone-info svg,
.sec-confirm-modal-ico.sec-confirm-modal-ico-info svg { stroke: var(--teal-2); }
/* Variante "warn" (es. backup codes): icona amber */
.sec-confirm-modal-ico.sec-confirm-modal-ico-warn {
  background: rgba(240,160,32,.12);
  border-color: rgba(240,160,32,.3);
}
.sec-confirm-modal-ico.sec-confirm-modal-ico-warn svg { stroke: #b8870a; }

/* BackupCodesModal — layout interno */
.sec-backup-modal { max-width: 520px; }
.sec-backup-warning {
  padding: 12px 24px;
  background: rgba(255,178,0,.12);
  border-bottom: 1px solid rgba(240,160,32,.3);
  color: #7a4d00;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.4;
}
.sec-backup-content {
  padding: 0 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec-backup-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px 14px;
  gap: 6px 14px;
  margin: 0;
  list-style: none;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 14.5px;
  color: var(--ink);
  background: rgba(0,180,204,.04);
  border: 1px solid rgba(0,130,144,.1);
  border-radius: 10px;
  padding: 14px 18px;
}
.sec-backup-codes li { letter-spacing: .5px; }
.sec-backup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sec-backup-confirm {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,180,204,.04);
  border: 1px solid rgba(0,130,144,.12);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.sec-backup-confirm input { margin-top: 2px; flex-shrink: 0; }
.sec-confirm-modal-h {
  font-size: 17px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -.2px;
  margin-bottom: 4px;
}
.sec-confirm-modal-body {
  padding: 8px 24px 22px 82px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
}
.sec-confirm-modal-body strong { color: var(--ink); font-weight: 700; }
.sec-confirm-modal-foot {
  padding: 14px 24px;
  border-top: 1px solid rgba(0,130,144,.08);
  display: flex; justify-content: flex-end; gap: 10px;
  background: rgba(0,130,144,.02);
}

/* ─────────────────────────────────────────────────────────
   11. RECOVERY EMAIL DRAWER — verification state
   ───────────────────────────────────────────────────────── */

.sec-rec-state {
  padding: 14px 16px;
  background: rgba(0,180,204,.05);
  border: 1px solid rgba(0,180,204,.18);
  border-radius: 10px;
  margin-bottom: 16px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.sec-rec-state svg {
  width: 16px; height: 16px;
  stroke: var(--teal); fill: none;
  stroke-width: 1.8; flex-shrink: 0; margin-top: 1px;
}
.sec-rec-state strong { color: var(--ink); font-weight: 700; display: block; margin-bottom: 2px; }
.sec-rec-state.verified { background: rgba(38,166,108,.06); border-color: rgba(38,166,108,.25); }
.sec-rec-state.verified svg { stroke: #1f8a52; }
.sec-rec-state.pending { background: rgba(255,203,5,.08); border-color: rgba(255,203,5,.3); }
.sec-rec-state.pending svg { stroke: #b58200; }

/* Toast */
.sec-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 14px;
  background: #fff;
  border: 1px solid rgba(0,130,144,.18);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  box-shadow: 0 14px 36px -8px rgba(0,30,40,.22), 0 4px 10px -2px rgba(0,30,40,.08);
  font-size: 13px;
  color: var(--ink-2);
  max-width: 460px;
  z-index: 1100;
  animation: sec-toast-in .26s cubic-bezier(.4,0,.2,1);
}
.sec-toast.warn { border-left-color: #d99a00; }
.sec-toast svg {
  width: 16px; height: 16px;
  stroke: var(--teal); fill: none;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.sec-toast.warn svg { stroke: #d99a00; }
.sec-toast-x {
  margin-left: 4px;
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.sec-toast-x:hover { background: rgba(0,30,40,.06); color: var(--ink-2); }

@keyframes sec-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─────────────────────────────────────────────────────────
   12. RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .sec-main { padding: 20px 16px 32px; }
  .sec-title { font-size: 22px; }
  .sec-score {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .sec-score-cta { width: 100%; }
  .sec-score-cta-btn { width: 100%; }
  .sec-methods { grid-template-columns: 1fr; }

  .sec-row { flex-wrap: wrap; }
  .sec-row .btn { width: 100%; }

  .sec-session { flex-wrap: wrap; }
  .sec-session-revoke { margin-left: auto; }
  .sec-sessions-foot { flex-direction: column; align-items: stretch; }
  .btn-danger { justify-content: center; }

  .sec-pwd-rules { grid-template-columns: 1fr; }

  .sec-drawer {
    width: auto;
    top: auto; left: 0; right: 0;
    bottom: 0;
    height: 92vh;
    border-radius: 18px 18px 0 0;
    border-left: 1px solid rgba(0,130,144,.08);
    transform: translateY(8px) scale(1);
  }
  .sec-drawer.open { transform: translateY(0) scale(1); }
  .sec-drawer.wide { width: auto; }

  .sec-modal { border-radius: 18px 18px 0 0; max-height: 95vh; align-self: flex-end; }
  .sec-modal-backdrop { padding: 0; align-items: flex-end; }
  .sec-codes-grid { grid-template-columns: 1fr; gap: 6px; }

  .sec-confirm-modal { border-radius: 18px 18px 0 0; align-self: flex-end; width: 100%; }
  .sec-confirm-modal-body { padding-left: 24px; }

  .sec-toast { left: 12px; right: 12px; transform: none; bottom: 12px; max-width: none; }
  @keyframes sec-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Lista device dentro la passkey method card */
.sec-passkey-device {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(0,130,144,.08);
  border-radius: 10px;
}
.sec-passkey-device + .sec-passkey-device { margin-top: 6px; }
.sec-passkey-device-info { flex: 1 1; min-width: 0; }
.sec-passkey-device-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.sec-passkey-device-meta { font-size: 11px; color: var(--ink-4); margin-top: 2px; }

/* ─── Sprint MFA-6: Mobile responsive ─── */
@media (max-width: 767px) {
  .sec-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(8px);
  }
  .sec-drawer.open { transform: translateY(0); }

  .sec-confirm-modal { width: 92vw; max-width: 480px; }
  .sec-rows .sec-row { flex-wrap: wrap; }
  .sec-row > .btn { width: 100%; margin-top: 10px; }
  .sec-method { padding: 16px 14px; }
  .sec-methods .sec-method-actions { flex-wrap: wrap; gap: 8px; }
  .sec-passkey-device { flex-wrap: wrap; }
}