/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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[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: #c5d0d2;

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

  /* Card shadows (juice pages) */
  --sh-glass: 0 8px 32px rgba(0,60,80,.10), 0 2px 8px rgba(0,60,80,.06);
  --sh-card:  0 4px 16px rgba(6,43,49,.04);

  /* 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;
}

* { 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;
}


/* ═══════════════════════════════════════════════════════════════
   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;
}

/* 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 { 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); }

/* 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); } }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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 invece di red */
.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.sec-confirm-modal-ico-info svg { stroke: var(--teal); }
/* 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; }
}