/* =========================================================
   PRIME TECH ASSISTANT
   GLOBAL DESIGN SYSTEM
   Dark + Light
========================================================= */


/* =========================================================
   VARIABLES — DARK PAR DÉFAUT
========================================================= */

:root {

    color-scheme: dark;

    --navy: #020817;
    --navy-deep: #01050d;
    --navy-light: #06152b;
    --navy-card: #071328;
    --navy-card-light: #0a1930;

    --blue: #087cff;
    --blue-light: #21a2ff;
    --blue-electric: #00b7ff;
    --blue-dark: #0755c9;

    --white: #ffffff;

    --text: #e8edf7;
    --text-heading: #f3f7fd;
    --text-soft: #c2ccda;

    --muted: #8291a8;
    --muted-dark: #5f7088;

    --page-bg: #020817;
    --page-bg-secondary: #030b1a;

    --header-bg: rgba(3, 10, 25, .96);

    --surface: rgba(255, 255, 255, .035);
    --surface-soft: rgba(255, 255, 255, .022);
    --surface-hover: rgba(8, 124, 255, .05);
    --surface-solid: #071328;

    --input-bg: rgba(2, 8, 23, .72);
    --input-bg-focus: rgba(3, 12, 29, .90);

    --border: rgba(255, 255, 255, .085);
    --border-soft: rgba(255, 255, 255, .055);
    --border-hover: rgba(38, 149, 255, .30);
    --border-blue: rgba(38, 149, 255, .25);

    --success: #41d98b;
    --success-bg: rgba(65, 217, 139, .08);

    --warning: #ffcc66;
    --danger: #ff7c7c;

    --shadow:
        0 20px 55px
        rgba(0, 0, 0, .22);

    --shadow-soft:
        0 12px 35px
        rgba(0, 0, 0, .12);

    --shadow-blue:
        0 15px 45px
        rgba(8, 124, 255, .16);

    --grid-color:
        rgba(40, 135, 255, .09);

    --hero-start: #010612;
    --hero-middle: #06152b;
    --hero-end: #020817;
}


/* =========================================================
   VARIABLES — LIGHT
========================================================= */

html[data-theme="light"] {

    color-scheme: light;

    --navy: #f5f9fd;
    --navy-deep: #edf4fa;
    --navy-light: #eaf3fb;
    --navy-card: #ffffff;
    --navy-card-light: #f8fbfe;

    --blue: #087cff;
    --blue-light: #159cff;
    --blue-electric: #00a7f5;
    --blue-dark: #0755c9;

    --white: #10243e;

    --text: #12263f;
    --text-heading: #0c213b;
    --text-soft: #3e536b;

    --muted: #687d94;
    --muted-dark: #8998a8;

    --page-bg: #f5f9fd;
    --page-bg-secondary: #edf4fa;

    --header-bg: rgba(255, 255, 255, .94);

    --surface: rgba(255, 255, 255, .82);
    --surface-soft: rgba(255, 255, 255, .62);
    --surface-hover: rgba(8, 124, 255, .055);
    --surface-solid: #ffffff;

    --input-bg: #f9fbfd;
    --input-bg-focus: #ffffff;

    --border: rgba(16, 42, 75, .10);
    --border-soft: rgba(16, 42, 75, .07);
    --border-hover: rgba(8, 124, 255, .28);
    --border-blue: rgba(8, 124, 255, .20);

    --success: #14945c;
    --success-bg: rgba(20, 148, 92, .08);

    --warning: #a96c00;
    --danger: #d94d4d;

    --shadow:
        0 20px 55px
        rgba(31, 63, 95, .09);

    --shadow-soft:
        0 10px 30px
        rgba(31, 63, 95, .07);

    --shadow-blue:
        0 15px 40px
        rgba(8, 124, 255, .11);

    --grid-color:
        rgba(8, 124, 255, .075);

    --hero-start: #ffffff;
    --hero-middle: #eef7ff;
    --hero-end: #f5f9fd;
}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}


body {

    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background: var(--page-bg);

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    transition:
        background .35s ease,
        color .35s ease;
}


/* Les pages privées restent invisibles jusqu'à validation de la session. */

html.prime-private-page-pending body {
    visibility: hidden;
}


a {
    color: inherit;
}


img {
    max-width: 100%;
}


button,
textarea,
input,
select {
    font: inherit;
}


button {
    -webkit-tap-highlight-color: transparent;
}


.container {

    width: 90%;
    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.site-header,
body > header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: var(--header-bg);

    border-bottom:
        1px solid
        var(--border-soft);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow:
        0 6px 25px
        rgba(0, 0, 0, .08);

    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


html[data-theme="light"] .site-header,
html[data-theme="light"] body > header {

    box-shadow:
        0 8px 30px
        rgba(32, 64, 96, .06);
}


.header-inner,
body > header > .container {

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 26px;
}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;

    align-items: center;

    flex: 0 0 270px;

    width: 270px;
    height: 70px;

    text-decoration: none;
}


.logo img {

    display: block;

    width: 100%;

    max-width: none;
    max-height: none;

    height: 100%;

    object-fit: contain;

    object-position: left center;

    filter:
        drop-shadow(
            0 0 10px
            rgba(8, 124, 255, .10)
        );

    transition:
        transform .25s ease,
        filter .25s ease;
}


.logo:hover img {

    transform: scale(1.02);

    filter:
        drop-shadow(
            0 0 16px
            rgba(8, 124, 255, .20)
        );
}


/*
 * Le contenu visible de logo-light.png est plus bas et moins haut
 * que celui de logo-dark.png, malgré une toile de même dimension.
 * Le logo sombre sert de référence pour garder un rendu identique.
 */

html[data-theme="light"] .site-header .logo img,
html[data-theme="light"] body > header .logo img {
    transform-origin: left top;
    transform:
        translate(.1%, -16%)
        scale(.9898, 1.1589);
}


html[data-theme="light"] .site-header .logo:hover img,
html[data-theme="light"] body > header .logo:hover img {
    transform:
        translate(.1%, -16%)
        scale(1.0096, 1.1821);
}


/* =========================================================
   ASSISTANT HEADER BRAND
========================================================= */

.assistant-header-brand {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-right: auto;
}


.assistant-header-separator {

    display: block;

    width: 1px;

    height: 34px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--border-hover),
            transparent
        );
}


.assistant-header-brand > div {

    display: flex;

    flex-direction: column;

    line-height: 1.2;
}


.assistant-header-brand strong {

    color: var(--text-heading);

    font-size: 12px;

    font-weight: 700;
}


.assistant-header-brand small {

    margin-top: 3px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 15px;

    flex-shrink: 0;
}


.assistant-context-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}


.assistant-context-actions[hidden],
.hero-actions .btn[hidden],
.launch-content .btn[hidden],
.launch-login-hint[hidden] {
    display: none;
}


.assistant-login-link {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}


.assistant-login-link:hover {
    color: var(--text-heading);
}


.assistant-signup-link {
    min-height: 42px;
    padding: 0 16px;
    white-space: nowrap;
}


/* =========================================================
   NAVIGATION
========================================================= */

nav,
.module-nav {

    display: flex;

    align-items: center;

    gap: 28px;
}


nav a,
.back-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--text-soft);

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition:
        color .25s ease,
        transform .25s ease;
}


nav a:hover,
.back-link:hover {

    color: var(--text-heading);
}


.back-link:hover {

    transform: translateX(-2px);
}


/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 62px;

    height: 34px;

    padding: 0;

    border: 0;

    outline: none;

    background: transparent;

    cursor: pointer;
}


.theme-toggle-track {

    position: relative;

    width: 58px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 8px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    background: var(--surface);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .04);

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.theme-toggle:hover
.theme-toggle-track {

    border-color:
        var(--border-hover);

    box-shadow:
        0 0 0 3px
        rgba(8, 124, 255, .05);
}


.theme-toggle:focus-visible
.theme-toggle-track {
    outline: 2px solid rgba(8, 124, 255, .65);
    outline-offset: 3px;
}


.theme-sun,
.theme-moon {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 15px;

    height: 15px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1;

    transition:
        color .3s ease,
        opacity .3s ease;
}


.theme-toggle-thumb {

    position: absolute;

    z-index: 1;

    top: 3px;

    left: 3px;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #159cff,
            #0769dc
        );

    box-shadow:
        0 4px 14px
        rgba(8, 124, 255, .32),
        inset 0 1px 0
        rgba(255, 255, 255, .25);

    transition:
        transform .35s
        cubic-bezier(.4, 0, .2, 1);
}


html[data-theme="light"]
.theme-toggle-thumb {

    transform:
        translateX(28px);
}


html[data-theme="dark"]
.theme-moon {

    color: #d8e7f7;
}


html[data-theme="light"]
.theme-sun {

    color: #087cff;
}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    overflow: hidden;

    text-align: center;

    background:

        radial-gradient(
            circle at 50% 15%,
            rgba(8, 124, 255, .17),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            var(--hero-start),
            var(--hero-middle) 52%,
            var(--hero-end)
        );

    transition:
        background .35s ease;
}


html[data-theme="light"] .hero {

    background:

        radial-gradient(
            circle at 50% 5%,
            rgba(8, 124, 255, .13),
            transparent 36%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #edf7ff 52%,
            #f6faff
        );
}


.module-hero {

    min-height: 390px;

    display: flex;

    align-items: center;
}


.hero-background {

    position: absolute;

    inset: 0;

    pointer-events: none;
}


.hero-content,
.hero .container {

    position: relative;

    z-index: 5;

    padding: 68px 0;
}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .12;

    pointer-events: none;

    background-image:

        linear-gradient(
            var(--grid-color) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            var(--grid-color) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            transparent 95%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            transparent 95%
        );
}


.hero-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(110px);
}


.hero-glow-left {

    width: 450px;

    height: 450px;

    left: -270px;

    top: 20px;

    background:
        rgba(8, 124, 255, .10);
}


.hero-glow-right {

    width: 500px;

    height: 500px;

    right: -300px;

    top: 20px;

    background:
        rgba(0, 183, 255, .08);
}


/* =========================================================
   HERO BADGE
========================================================= */

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 7px 13px;

    margin-bottom: 20px;

    border:
        1px solid
        var(--border-blue);

    border-radius: 999px;

    background:
        rgba(8, 124, 255, .07);

    color: #b5d7fa;

    font-size: 11px;

    font-weight: 650;

    letter-spacing: .2px;
}


html[data-theme="light"]
.hero-badge {

    color: #176bb9;

    background:
        rgba(8, 124, 255, .06);
}


.status-dot {

    width: 6px;

    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #20a6ff;

    box-shadow:
        0 0 12px
        #168fff;
}


/* =========================================================
   MODULE HERO ICON
========================================================= */

.module-hero-icon {

    width: 54px;

    height: 54px;

    margin: 0 auto 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    border:
        1px solid
        var(--border-blue);

    background:
        linear-gradient(
            145deg,
            rgba(8, 124, 255, .14),
            rgba(8, 124, 255, .045)
        );

    font-size: 24px;

    box-shadow:
        0 8px 28px
        rgba(8, 124, 255, .08);
}


/* =========================================================
   HERO TYPOGRAPHY
========================================================= */

.hero h1 {

    max-width: 900px;

    margin: 0 auto;

    color: var(--text-heading);

    font-size:
        clamp(
            2.25rem,
            4.5vw,
            3.7rem
        );

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 720;
}


.hero h1 span {

    display: block;

    margin-top: 4px;

    background:
        linear-gradient(
            90deg,
            var(--text-heading),
            #72bdff,
            #168dff
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


html[data-theme="light"]
.hero h1 span {

    background:
        linear-gradient(
            90deg,
            #0d2744,
            #087cff,
            #00a7f5
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.hero p,
.hero-text {

    max-width: 760px;

    margin: 21px auto 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   HERO TRUST
========================================================= */

.hero-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 28px;

    color: var(--muted-dark);

    font-size: 11px;
}


.hero-trust div {

    display: flex;

    align-items: center;

    gap: 6px;
}


.hero-trust span {

    color: #168dff;
}


.hero-bottom-line {

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 72%;

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(38, 149, 255, .40),
            transparent
        );

    box-shadow:
        0 0 25px
        rgba(8, 124, 255, .22);
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section {

    padding: 85px 20px;
}


.app-section,
.assistant-workspace {

    position: relative;

    padding: 80px 0 90px;

    background:

        radial-gradient(
            circle at 50% 0,
            rgba(8, 124, 255, .045),
            transparent 35%
        ),

        var(--page-bg);
}


html[data-theme="light"]
.app-section,
html[data-theme="light"]
.assistant-workspace {

    background:

        radial-gradient(
            circle at 50% 0,
            rgba(8, 124, 255, .055),
            transparent 34%
        ),

        #f5f9fd;
}


.app-container {

    max-width: 1050px;
}


/* =========================================================
   WORKSPACE HEADING
========================================================= */

.workspace-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;
}


.workspace-heading h2 {

    margin-top: 3px;

    color: var(--text-heading);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.25rem
        );

    line-height: 1.15;

    letter-spacing: -.8px;
}


.workspace-heading p {

    max-width: 650px;

    margin-top: 9px;

    color: var(--muted);

    font-size: 12px;
}


.workspace-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    padding: 7px 11px;

    color: var(--text-soft);

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    background: var(--surface);

    font-size: 10px;

    font-weight: 650;
}


/* =========================================================
   MODULES / PANELS
========================================================= */

.module,
.workspace-card {

    position: relative;

    margin-bottom: 22px;

    padding: 31px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    background:

        linear-gradient(
            145deg,
            var(--surface),
            var(--surface-soft)
        );

    box-shadow:
        var(--shadow-soft),
        inset 0 1px 0
        rgba(255, 255, 255, .025);

    transition:
        transform .25s ease,
        background .35s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


html[data-theme="light"]
.module,
html[data-theme="light"]
.workspace-card {

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96),
            rgba(248, 251, 254, .88)
        );

    box-shadow:
        0 15px 45px
        rgba(31, 63, 95, .07),
        inset 0 1px 0
        rgba(255, 255, 255, .90);
}


.module::before,
.workspace-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(38, 149, 255, .22),
            transparent
        );
}


.module:hover,
.workspace-card:hover {

    border-color:
        var(--border-hover);

    box-shadow:
        var(--shadow);
}


/* =========================================================
   MODULE HEADING
========================================================= */

.module-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


.module-heading-left {

    display: flex;

    align-items: center;

    gap: 15px;
}


.module-heading-icon,
.module-icon {

    flex: 0 0 46px;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    border:
        1px solid
        var(--border-blue);

    background:
        rgba(8, 124, 255, .065);

    font-size: 20px;
}


.result-icon {

    background:
        linear-gradient(
            145deg,
            rgba(8, 124, 255, .12),
            rgba(0, 183, 255, .04)
        );
}


.module-step,
.module-eyebrow {

    display: block;

    margin-bottom: 3px;

    color: #168dff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;
}


.module h2,
.module-heading h2 {

    margin: 0;

    color: var(--text-heading);

    font-size: 19px;

    font-weight: 680;
}


.module-heading p {

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   STEP NUMBER
========================================================= */

.module-heading .step-number {

    flex: 0 0 46px;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #1192ff,
            #0757c9
        );

    border:
        1px solid
        rgba(65, 165, 255, .35);

    box-shadow:
        0 8px 25px
        rgba(8, 124, 255, .15);

    font-size: 10px;

    font-weight: 800;
}


.module-heading
.step-number.neutral {

    color: var(--blue);

    background:
        rgba(8, 124, 255, .07);

    border-color:
        var(--border-blue);

    box-shadow: none;

    font-size: 17px;
}


/* =========================================================
   MODULE CONTENT
========================================================= */

.module-content {

    position: relative;
}


.input-label {

    display: block;

    margin-bottom: 9px;

    color: var(--text-soft);

    font-size: 11px;

    font-weight: 650;
}


.option-description {

    margin-bottom: 18px;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   TEXTAREA
========================================================= */

.textarea-wrapper {

    position: relative;
}


textarea {

    width: 100%;

    min-height: 260px;

    padding: 19px 20px;

    resize: vertical;

    outline: none;

    color: var(--text);

    background:
        var(--input-bg);

    border:
        1px solid
        var(--border);

    border-radius: 12px;

    font-size: 14px;

    line-height: 1.7;

    box-shadow:
        inset 0 1px 2px
        rgba(0, 0, 0, .05);

    transition:
        color .35s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .35s ease;
}


textarea::placeholder {

    color: var(--muted-dark);

    opacity: .82;
}


textarea:hover {

    border-color:
        var(--border-hover);
}


textarea:focus {

    border-color:
        rgba(38, 149, 255, .55);

    background:
        var(--input-bg-focus);

    box-shadow:
        0 0 0 3px
        rgba(8, 124, 255, .08),
        0 10px 35px
        rgba(0, 0, 0, .07);
}


html[data-theme="light"]
textarea {

    box-shadow:
        inset 0 1px 2px
        rgba(22, 51, 82, .03);
}


.textarea-corner {

    position: absolute;

    right: 6px;

    bottom: 7px;

    width: 13px;

    height: 13px;

    pointer-events: none;

    opacity: .28;

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            var(--blue) 46%,
            var(--blue) 52%,
            transparent 53%
        );
}


/* =========================================================
   INPUT HELP
========================================================= */

.input-help {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 12px;

    padding: 11px 13px;

    color: var(--muted);

    border:
        1px solid
        var(--border-soft);

    border-radius: 10px;

    background:
        rgba(8, 124, 255, .025);

    font-size: 10px;
}


.input-help-icon {

    color: var(--blue);

    font-size: 13px;
}


.input-help > div {

    display: flex;

    flex-direction: column;

    gap: 1px;
}


.input-help strong {

    color: var(--text-soft);

    font-size: 10px;
}


.input-help span {

    color: var(--muted);

    line-height: 1.55;
}


/* =========================================================
   OPTION PILLS
========================================================= */

.styles-options {

    display: flex;

    align-items: stretch;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin:
        8px 0 29px;
}


.styles-options
input[type="radio"] {

    display: none;
}


.option-pill {

    cursor: pointer;
}


.option-pill > span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 0 15px;

    color: var(--text-soft);

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    background:
        var(--surface-soft);

    font-size: 12px;

    font-weight: 600;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.option-pill > span:hover {

    transform:
        translateY(-2px);

    color: var(--text-heading);

    border-color:
        var(--border-hover);

    background:
        rgba(8, 124, 255, .05);
}


.option-pill
input[type="radio"]:checked
+ span {

    color: white;

    border-color:
        rgba(38, 149, 255, .50);

    background:
        linear-gradient(
            135deg,
            #1192ff,
            #0757c9
        );

    box-shadow:
        0 8px 24px
        rgba(8, 124, 255, .16),
        inset 0 1px 0
        rgba(255, 255, 255, .15);
}


.option-icon {

    font-size: 15px;
}


.option-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1.15;
}


.option-text strong {

    font-size: 11px;
}


.option-text small {

    margin-top: 2px;

    opacity: .70;

    font-size: 8px;

    font-weight: 500;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 9px;

    border:
        1px solid transparent;

    color: white;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .25s ease,
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}


.btn span {

    transition:
        transform .25s ease;
}


.btn:hover:not(:disabled) {

    transform:
        translateY(-2px);
}


.btn:hover:not(:disabled)
> span:last-child {

    transform:
        translateX(3px);
}


.btn-primary {

    color: white;

    border-color:
        rgba(65, 165, 255, .40);

    background:
        linear-gradient(
            135deg,
            #1192ff,
            #0757c9
        );

    box-shadow:
        0 10px 30px
        rgba(8, 124, 255, .19),
        inset 0 1px 0
        rgba(255, 255, 255, .12);
}


.btn-primary:hover:not(:disabled) {

    box-shadow:
        0 15px 38px
        rgba(8, 124, 255, .29),
        inset 0 1px 0
        rgba(255, 255, 255, .14);
}


.btn-secondary {

    color: var(--text-soft);

    background:
        var(--surface-soft);

    border-color:
        var(--border);
}


.btn-secondary:hover:not(:disabled) {

    color: var(--text-heading);

    border-color:
        var(--border-hover);

    background:
        rgba(8, 124, 255, .055);
}


button:disabled {

    opacity: .37;

    cursor: not-allowed;

    transform: none !important;

    box-shadow: none !important;
}


.actions {

    display: flex;

    align-items: center;

    justify-content: center;
}


.generate-actions {

    margin-top: 0;
}


.generate-button {

    min-width: 245px;
}


.response-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 19px;
}


.social-share-panel {

    margin-top: 20px;

    padding: 20px;

    border:
        1px solid
        var(--border);

    border-radius: 13px;

    background:
        var(--surface-soft);
}


.social-share-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 22px;

    margin-bottom: 15px;
}


.social-share-heading h3 {

    margin: 2px 0 0;

    color: var(--text-heading);

    font-size: 17px;
}


.social-share-heading p {

    max-width: 430px;

    margin: 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.55;

    text-align: right;
}


.social-share-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;
}


.social-share-button {

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 11px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    color: var(--text-soft);

    background: var(--input-bg);

    font: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.social-share-button > span {

    width: 27px;

    height: 27px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 27px;

    border-radius: 8px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1192ff,
            #0757c9
        );

    font-size: 12px;

    font-weight: 800;
}


.social-share-button:hover:not(:disabled) {

    transform: translateY(-1px);

    color: var(--text-heading);

    border-color: var(--border-hover);

    background: rgba(8, 124, 255, .055);
}


.social-share-feedback {

    min-height: 18px;

    margin: 12px 0 0;

    color: var(--success);

    font-size: 11px;

    text-align: center;
}


.social-share-feedback.is-error {

    color: var(--danger);
}


/* =========================================================
   RESPONSE WRAPPER
========================================================= */

.response-wrapper {

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 13px;

    background:
        var(--input-bg);

    transition:
        background .35s ease,
        border-color .35s ease;
}


.response-toolbar {

    min-height: 38px;

    display: flex;

    align-items: center;

    padding: 0 15px;

    color: var(--muted);

    border-bottom:
        1px solid
        var(--border-soft);

    background:
        var(--surface-soft);

    font-size: 9px;

    font-weight: 600;
}


.response-toolbar > div {

    display: flex;

    align-items: center;

    gap: 7px;
}


.response-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--success);

    box-shadow:
        0 0 10px
        rgba(65, 217, 139, .40);
}


/* =========================================================
   RESPONSE
========================================================= */

#response,
.response-box,
.generated-response {

    min-height: 260px;

    padding: 23px;

    white-space: pre-wrap;

    color: var(--text);

    background:
        var(--input-bg);

    font-size: 13px;

    line-height: 1.8;

    transition:
        color .35s ease,
        background .35s ease;
}


.response-wrapper #response,
.response-wrapper .generated-response {

    border: 0;

    border-radius: 0;
}


#response:not(.generated-response),
.response-box {

    border:
        1px solid
        var(--border);

    border-radius: 12px;
}


.response-placeholder {

    min-height: 210px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--muted-dark);

    text-align: center;
}


.response-placeholder-icon {

    margin-bottom: 3px;

    color: var(--blue);

    font-size: 23px;
}


.response-placeholder strong {

    color: var(--text-soft);

    font-size: 12px;
}


.response-placeholder span {

    color: var(--muted);

    font-size: 10px;
}


/* =========================================================
   LOADING
========================================================= */

.generation-loading {

    min-height: 210px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    color: var(--text-soft);

    text-align: center;
}


.generation-loading strong {

    display: block;

    margin-top: 5px;

    font-size: 13px;
}


.generation-loading span,
.generation-loading small {

    display: block;

    color: var(--muted);

    font-size: 10px;
}


.ai-loader {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--border-blue);

    border-radius: 12px;

    color: var(--blue);

    background:
        rgba(8, 124, 255, .07);

    box-shadow:
        0 0 25px
        rgba(8, 124, 255, .08);

    font-size: 18px;

    animation:
        aiPulse 1.4s
        ease-in-out infinite;
}


@keyframes aiPulse {

    0%,
    100% {

        transform: scale(1);

        box-shadow:
            0 0 20px
            rgba(8, 124, 255, .06);

    }

    50% {

        transform: scale(1.06);

        box-shadow:
            0 0 30px
            rgba(8, 124, 255, .18);

    }

}


.loading-spinner,
.button-loader {

    width: 18px;

    height: 18px;

    display: inline-block;

    border-radius: 50%;

    border:
        2px solid
        rgba(255, 255, 255, .25);

    border-top-color:
        white;

    animation:
        spin .8s linear infinite;
}


.loading-spinner {

    width: 29px;

    height: 29px;

    border:
        2px solid
        rgba(38, 149, 255, .14);

    border-top-color:
        #168dff;
}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   ERROR
========================================================= */

.response-error {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 210px;

    color: var(--danger);

    text-align: left;
}


.response-error > span {

    font-size: 24px;
}


.response-error strong {

    display: block;

    font-size: 12px;
}


.response-error p {

    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;
}


/* =========================================================
   DETECTED TYPE
========================================================= */

.detected-type {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 13px;

    min-height: 0;
}


.detected-label {

    color: var(--muted);

    font-size: 10px;
}


.detected-pill {

    display: inline-flex;

    align-items: center;

    padding: 5px 9px;

    color: #b9ddff;

    background:
        rgba(8, 124, 255, .08);

    border:
        1px solid
        var(--border-blue);

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;
}


html[data-theme="light"]
.detected-pill {

    color: #1268b6;
}


/* =========================================================
   HISTORY
========================================================= */

.history-limit {

    padding: 5px 9px;

    color: var(--muted);

    border:
        1px solid
        var(--border);

    border-radius: 999px;

    background:
        var(--surface-soft);

    font-size: 9px;
}


.history-item {

    position: relative;

    display: block;

    min-height: 74px;

    margin-bottom: 8px;

    padding: 14px 15px;

    cursor: pointer;

    color: inherit;

    background:
        var(--surface-soft);

    border:
        1px solid
        var(--border-soft);

    border-radius: 11px;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.history-item:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--border-hover);

    background:
        rgba(8, 124, 255, .04);

    box-shadow:
        var(--shadow-soft);
}


.history-item.active {

    border-color:
        rgba(38, 149, 255, .36);

    background:
        rgba(8, 124, 255, .07);
}


.history-main {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    flex: 1;
}


.history-icon {

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        rgba(8, 124, 255, .055);

    font-size: 17px;
}


.history-content {

    flex: 1;

    min-width: 0;
}


.history-header {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 13px;
}


.history-type {

    color: var(--text-soft);

    font-size: 11px;

    font-weight: 700;
}


.history-date {

    color: var(--muted-dark);

    font-size: 9px;

    white-space: nowrap;
}


.history-preview {

    margin-top: 5px;

    overflow: hidden;

    color: var(--muted);

    font-size: 10px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.history-arrow {

    color: var(--muted-dark);

    font-size: 13px;

    transition:
        transform .2s ease,
        color .2s ease;
}


.history-item:hover
.history-arrow {

    color: #168dff;

    transform:
        translateX(3px);
}


.history-open {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    margin-top: 7px;

    color: var(--blue);

    font-size: 9px;

    font-weight: 700;
}


.history-open span {

    transition:
        transform .2s ease;
}


.history-item:hover
.history-open span {

    transform:
        translateX(3px);
}


/* =========================================================
   EMPTY HISTORY
========================================================= */

.empty-history {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    gap: 8px;

    color: var(--muted-dark);

    text-align: center;
}


.empty-history span {

    font-size: 22px;
}


.empty-history p {

    font-size: 11px;
}


.history-auth-required p {

    max-width: 360px;

    line-height: 1.65;
}


.history-auth-required a {

    color: var(--blue-light);

    font-weight: 750;

    text-decoration: none;
}


.history-auth-required a:hover {

    text-decoration: underline;
}


/* =========================================================
   ASSISTANT HOME — SECTION HEADING
========================================================= */

.section-heading {

    max-width: 760px;

    margin:
        0 auto 48px;

    text-align: center;
}


.section-label {

    display: inline-block;

    margin-bottom: 11px;

    color: #168dff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.section-heading h2,
.section > .container > h2 {

    color: var(--text-heading);

    font-size:
        clamp(
            1.9rem,
            3.5vw,
            2.7rem
        );

    line-height: 1.15;

    letter-spacing: -1px;
}


.section-heading p {

    margin-top: 15px;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   HOME CARDS
========================================================= */

.cards {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(270px, 1fr)
        );

    gap: 16px;
}


.card {

    position: relative;

    min-height: 250px;

    padding: 26px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            var(--surface),
            var(--surface-soft)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .025);

    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


html[data-theme="light"]
.card {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbfe
        );

    box-shadow:
        0 12px 38px
        rgba(31, 63, 95, .06);
}


.cards a {

    color: inherit;

    text-decoration: none;
}


.cards a.card {

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.cards a.card:hover {

    transform:
        translateY(-6px);

    border-color:
        var(--border-hover);

    background:
        rgba(8, 124, 255, .045);

    box-shadow:
        var(--shadow);
}


html[data-theme="light"]
.cards a.card:hover {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f8fe
        );

    box-shadow:
        0 20px 50px
        rgba(31, 63, 95, .10);
}


.card-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 13px;

    border:
        1px solid
        var(--border-blue);

    background:
        rgba(8, 124, 255, .06);

    font-size: 22px;
}


.card-content {

    display: flex;

    flex-direction: column;

    min-height: 170px;
}


.module-status {

    align-self: flex-start;

    padding: 4px 8px;

    margin-bottom: 8px;

    color: var(--success);

    background:
        var(--success-bg);

    border:
        1px solid
        rgba(65, 217, 139, .13);

    border-radius: 999px;

    font-size: 8px;

    font-weight: 750;

    letter-spacing: .3px;
}


.card h3 {

    color: var(--text-heading);

    font-size: 17px;

    margin-bottom: 8px;
}


.card p {

    color: var(--muted);

    font-size: 11px;

    line-height: 1.65;
}


.card-link {

    margin-top: auto;

    padding-top: 18px;

    color: #168dff;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   BENEFITS
========================================================= */

.alt {

    background:
        var(--page-bg-secondary);
}


.benefits {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}


.benefit {

    padding: 28px;

    text-align: center;

    border:
        1px solid
        var(--border);

    border-radius: 16px;

    background:
        var(--surface);
}


html[data-theme="light"]
.benefit {

    background:
        rgba(255, 255, 255, .82);

    box-shadow:
        0 12px 35px
        rgba(31, 63, 95, .05);
}


.benefit-icon {

    width: 50px;

    height: 50px;

    margin:
        0 auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: var(--text-heading);

    background:
        rgba(8, 124, 255, .07);

    border:
        1px solid
        rgba(8, 124, 255, .14);

    font-size: 21px;
}


.benefit h3 {

    color: var(--text-heading);

    margin-bottom: 8px;

    font-size: 15px;
}


.benefit p {

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   STEPS — HOME
========================================================= */

.steps {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    max-width: 950px;

    margin: auto;
}


.step {

    position: relative;

    padding: 18px;

    text-align: center;
}


.step > .step-number {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 17px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #0b82ed,
            #0755c9
        );

    box-shadow:
        0 8px 25px
        rgba(8, 124, 255, .15);

    font-size: 11px;

    font-weight: 800;
}


.step h3 {

    color: var(--text-heading);

    font-size: 14px;

    margin-bottom: 7px;
}


.step p {

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   LAUNCH HOME
========================================================= */

.launch-section {

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(8, 124, 255, .07),
            transparent 40%
        ),

        var(--page-bg);
}


.launch-box {

    max-width: 900px;

    margin: auto;

    padding: 48px;

    border:
        1px solid
        var(--border-blue);

    border-radius: 19px;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(8, 124, 255, .11),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            rgba(8, 124, 255, .045),
            var(--surface-soft)
        );
}


html[data-theme="light"]
.launch-box {

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(8, 124, 255, .10),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #f5faff
        );

    box-shadow:
        0 18px 50px
        rgba(31, 63, 95, .07);
}


.launch-content {

    max-width: 680px;
}


.technical-module-card {

    grid-column:
        1 / -1;

    min-height:
        210px;

    display:
        grid;

    grid-template-columns:
        62px 1fr;

    align-items:
        start;

    gap:
        22px;

    border-color:
        rgba(38, 149, 255, .30);

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(8, 124, 255, .13),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--surface),
            var(--surface-soft)
        );
}


.technical-module-card .card-icon {

    width:
        62px;

    height:
        62px;

    margin:
        0;

    font-size:
        26px;
}


.technical-module-card .card-content {

    min-height:
        155px;
}


.technical-module-card p {

    max-width:
        780px;
}


html[data-theme="light"]
.technical-module-card {

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(8, 124, 255, .10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f4f9ff
        );
}


.launch-login-hint {
    margin-top: 16px;
    color: var(--muted);
    font-size: 12px;
}


.launch-login-hint a {
    color: var(--blue-light);
    font-weight: 700;
    text-decoration: none;
}


.launch-login-hint a:hover {
    text-decoration: underline;
}


.launch-badge {

    display: inline-flex;

    padding: 5px 10px;

    margin-bottom: 16px;

    color: #9ed0ff;

    border:
        1px solid
        var(--border-blue);

    border-radius: 999px;

    background:
        rgba(8, 124, 255, .06);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .8px;
}


html[data-theme="light"]
.launch-badge {

    color: #1268b6;
}


.launch-box h2 {

    margin-bottom: 16px;

    color: var(--text-heading);
}


.launch-box p {

    margin-bottom: 12px;

    color: var(--muted);

    font-size: 12px;
}


.launch-points {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 22px 0;

    color: var(--text-soft);

    font-size: 11px;
}


/* =========================================================
   CONTACT HOME
========================================================= */

.contact-section {

    max-width: 720px;

    text-align: center;
}


.contact-section p {

    margin:
        0 auto 22px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   FOOTER
========================================================= */

footer,
.assistant-footer {

    border-top:
        1px solid
        var(--border-soft);

    background:
        var(--navy-deep);

    transition:
        background .35s ease,
        border-color .35s ease;
}


html[data-theme="light"]
footer,
html[data-theme="light"]
.assistant-footer {

    background:
        #edf4fa;
}


footer .footer-inner {

    min-height: 125px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 25px;
}


.footer-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-brand a {

    display: inline-flex;

    align-items: center;
}


.footer-brand img,
.footer-logo img {

    display: block;

    width: 195px;

    height: auto;

    object-fit: contain;
}


.footer-brand p {

    margin-top: 4px;

    color: var(--muted-dark);

    font-size: 8px;
}


.footer-text {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;
}


.footer-text strong {

    color: var(--text-soft);

    font-size: 10px;
}


.footer-text span {

    color: var(--muted-dark);

    font-size: 8px;
}


.footer-module {

    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--muted);

    font-size: 9px;
}


.footer-copy {

    color: var(--muted-dark);

    font-size: 9px;
}


footer > .container:not(.footer-inner) {

    padding: 27px 0;

    text-align: center;

    color: var(--muted);

    font-size: 10px;
}


footer p {

    margin: 2px 0;
}


/* =========================================================
   LIGHT THEME — FINITIONS
========================================================= */

html[data-theme="light"] body {

    background:
        #f5f9fd;
}


html[data-theme="light"] .hero-glow-left {

    background:
        rgba(8, 124, 255, .08);
}


html[data-theme="light"] .hero-glow-right {

    background:
        rgba(0, 167, 245, .06);
}


html[data-theme="light"] .module-hero-icon,
html[data-theme="light"] .module-heading-icon,
html[data-theme="light"] .module-icon,
html[data-theme="light"] .card-icon {

    background:
        linear-gradient(
            145deg,
            rgba(8, 124, 255, .10),
            rgba(8, 124, 255, .035)
        );
}


html[data-theme="light"] .response-toolbar {

    background:
        #f4f8fc;
}


html[data-theme="light"] .history-item {

    background:
        rgba(247, 250, 253, .85);
}


html[data-theme="light"]
.history-item:hover {

    background:
        #ffffff;
}


html[data-theme="light"]
.input-help {

    background:
        rgba(8, 124, 255, .035);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 900px) {


    .main-nav {

        display: none;
    }


    .assistant-header-brand {

        display: none;
    }


    .benefits {

        grid-template-columns: 1fr;
    }


    .steps {

        grid-template-columns: 1fr;

        gap: 6px;
    }


    .launch-box {

        padding: 38px 28px;
    }


    .workspace-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 768px) {


    html {

        scroll-padding-top: 76px;
    }


    .header-inner,
    body > header > .container {

        height: 76px;

        padding: 0;

        gap: 12px;
    }


    .logo {
        flex-basis: 205px;
        width: 205px;
        height: 60px;
    }

    .logo img {
        width: 100%;
        height: 100%;
    }


    .header-actions {

        gap: 9px;
    }


    nav {

        gap: 13px;
    }


    nav a,
    .back-link {

        font-size: 10px;
    }


    .theme-toggle {

        width: 58px;
    }


    .module-hero {

        min-height: 350px;
    }


    .hero-content,
    .hero .container {

        padding: 55px 0;
    }


    .hero h1 {

        font-size: 2.25rem;

        letter-spacing: -1px;
    }


    .hero p,
    .hero-text {

        font-size: 13px;
    }


    .hero-trust {

        gap: 10px 17px;
    }


    .section {

        padding: 65px 18px;
    }


    .assistant-workspace,
    .app-section {

        padding:
            60px 0 70px;
    }


    .module,
    .workspace-card {

        padding: 24px 19px;

        border-radius: 15px;
    }


    .module-heading {

        gap: 12px;
    }


    .module-heading-left {

        gap: 11px;
    }


    .module-heading-icon,
    .module-icon,
    .module-heading .step-number {

        flex-basis: 42px;

        width: 42px;

        height: 42px;
    }


    textarea {

        min-height: 230px;

        padding: 16px;
    }


    .styles-options {

        gap: 7px;
    }


    .option-pill > span {

        min-height: 39px;

        padding: 0 12px;

        font-size: 10px;
    }


    .actions .btn {

        width: 100%;
    }


    .generate-button {

        min-width: 0;
    }


    .response-actions {

        flex-direction: column;

        align-items: stretch;
    }


    .response-actions .btn {

        width: 100%;
    }


    .social-share-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 6px;
    }


    .social-share-heading p {

        text-align: left;
    }


    .social-share-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .social-share-button {

        min-height: 44px;

        padding: 7px 9px;
    }


    #response,
    .response-box,
    .generated-response {

        min-height: 220px;
    }


    .history-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 2px;
    }


    .history-date {

        white-space: normal;
    }


    .cards {

        grid-template-columns: 1fr;
    }


    .technical-module-card {

        grid-column:
            auto;

        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    footer .footer-inner {

        min-height: auto;

        flex-direction: column;

        padding: 30px 0;

        text-align: center;
    }


    .footer-brand {

        align-items: center;
    }


    .footer-brand img,
    .footer-logo img {

        width: 190px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 560px) {


    .container {

        width: 92%;
    }


    .header-inner,
    body > header > .container {

        justify-content: space-between;
    }


    .logo {
        flex-basis: 128px;
        width: 128px;
        height: 46px;
    }


    .module-nav {

        display: none;
    }


    .back-link {

        display: none;
    }


    .header-actions {

        margin-left: auto;
        gap: 5px;
    }


    .assistant-signup-link {
        display: none;
    }


    .assistant-account-chip {
        padding: 0 8px;
    }


    .assistant-account-link {
        padding: 0 8px;
        font-size: 9px;
    }


    .theme-toggle,
    .theme-toggle-track {
        width: 50px;
    }


    html[data-theme="light"]
    .theme-toggle-thumb {
        transform: translateX(20px);
    }


    .module-hero-icon {

        width: 48px;

        height: 48px;

        font-size: 21px;
    }


    .hero h1 {

        font-size: 2rem;
    }


    .hero-trust {

        flex-direction: column;
    }


    .module-heading {

        align-items: flex-start;
    }


    .module-heading p {

        display: none;
    }


    .module h2,
    .module-heading h2 {

        font-size: 16px;
    }


    .module-icon {

        display: none;
    }


    .styles-options {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        align-items: stretch;
    }


    .option-pill {

        width: 100%;
    }


    .option-pill > span {

        width: 100%;

        min-height: 48px;

        justify-content: flex-start;

        border-radius: 11px;
    }


    .history-arrow {

        display: none;
    }


    .history-open {

        justify-content: flex-start;
    }


    .launch-box {

        padding: 30px 20px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width: 380px) {


    .logo {
        flex-basis: 118px;
        width: 118px;
        height: 44px;
    }


    .theme-toggle {

        width: 48px;
    }


    .theme-toggle-track {

        width: 48px;
    }


    html[data-theme="light"]
    .theme-toggle-thumb {

        transform:
            translateX(18px);
    }


    .hero h1 {

        font-size: 1.8rem;
    }


    .styles-options {

        grid-template-columns: 1fr;
    }

}

/* =========================================================
   COMPTE ASSISTANT - HEADER
========================================================= */

.assistant-account-chip {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;

    border: 1px solid var(--border-color, rgba(148, 163, 184, .18));
    border-radius: 11px;

    color: var(--text-soft);
    background: rgba(15, 23, 42, .35);

    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


button.assistant-account-chip {
    appearance: none;
    font: inherit;
    cursor: pointer;
}


.assistant-account-chip:hover {
    transform: translateY(-1px);
    color: var(--text-heading);
    border-color: var(--border-hover);
    background: rgba(8, 124, 255, .075);
    box-shadow: 0 8px 22px rgba(8, 124, 255, .07);
}


.assistant-account-chip:focus-visible {
    outline: 2px solid rgba(8, 124, 255, .55);
    outline-offset: 3px;
}


.assistant-account-chip.active {
    color: var(--text-heading);
    border-color: rgba(8, 124, 255, .38);
    background: rgba(8, 124, 255, .11);
}


.assistant-credit-chip strong {
    color: var(--text-heading);
    font-size: 13px;
}


.assistant-credit-chip > span:first-child {
    color: var(--blue-light);
}


.assistant-company-link.loaded {
    border-color: rgba(52, 211, 153, .20);
}


html[data-theme="light"] .assistant-account-chip {
    color: #415a75;
    border-color: rgba(8, 124, 255, .14);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .98),
            rgba(242, 248, 255, .94)
        );
    box-shadow:
        0 7px 20px rgba(31, 63, 95, .055),
        inset 0 1px 0 rgba(255, 255, 255, .95);
}


html[data-theme="light"] .assistant-account-chip:hover,
html[data-theme="light"] .assistant-account-chip.active {
    color: #173c62;
    border-color: rgba(8, 124, 255, .27);
    background: rgba(8, 124, 255, .085);
}


html[data-theme="light"] .assistant-credit-chip strong {
    color: var(--blue-dark);
}


.assistant-account-link {
    min-height: 42px;
    padding-left: 16px;
    padding-right: 16px;
}


.assistant-account-link.active {
    color: var(--text-heading);
    border-color: rgba(8, 124, 255, .38);
    background: rgba(8, 124, 255, .11);
}


html[data-theme="light"] .assistant-account-link.active {
    color: #173c62;
    border-color: rgba(8, 124, 255, .27);
    background: rgba(8, 124, 255, .085);
}


.assistant-account-badge {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 40px;
    padding: 0 14px;

    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.18));
    border-radius: 12px;

    background: rgba(15, 23, 42, 0.35);

    font-size: 13px;
    white-space: nowrap;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.assistant-account-company,
.assistant-account-credits {
    display: flex;
    align-items: center;
    gap: 7px;
}


.assistant-credits-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}


.assistant-credits-button:hover strong {
    text-decoration: underline;
}


.assistant-account-company {
    font-weight: 600;
}


.assistant-account-status {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
}


.assistant-account-divider {
    width: 1px;
    height: 18px;

    background: rgba(148, 163, 184, 0.25);
}


.assistant-account-credits {
    color: var(--muted, #94a3b8);

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.assistant-account-credits strong {
    color: var(--text-heading, #ffffff);
    font-size: 14px;
}


/* Mode clair */

body.light-mode .assistant-account-badge,
html[data-theme="light"] .assistant-account-badge {
    gap: 9px;
    min-height: 42px;
    padding: 4px 5px 4px 12px;

    color: var(--text);

    border-color: rgba(8, 124, 255, .14);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .98),
            rgba(242, 248, 255, .94)
        );

    box-shadow:
        0 7px 20px rgba(31, 63, 95, .07),
        inset 0 1px 0 rgba(255, 255, 255, .95);
}


html[data-theme="light"]
.assistant-account-badge
.assistant-account-company {
    color: var(--text-heading);
    font-weight: 650;
}


html[data-theme="light"]
.assistant-account-badge
.assistant-account-status {
    width: 8px;
    height: 8px;

    border: 2px solid #ffffff;

    background: #20c985;

    box-shadow:
        0 0 0 3px rgba(32, 201, 133, .10),
        0 2px 6px rgba(20, 148, 92, .22);
}


html[data-theme="light"]
.assistant-account-badge
.assistant-account-divider {
    height: 20px;
    background: rgba(8, 124, 255, .13);
}


html[data-theme="light"]
.assistant-account-badge
.assistant-account-credits {
    gap: 6px;
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid rgba(8, 124, 255, .11);
    border-radius: 9px;

    color: #415a75;
    background: rgba(8, 124, 255, .055);
}


html[data-theme="light"]
.assistant-account-badge
.assistant-account-credits strong {
    color: var(--blue-dark);
    font-weight: 750;
}


html[data-theme="light"]
.assistant-account-badge
.assistant-account-credits:hover {
    color: #244463;
    border-color: rgba(8, 124, 255, .22);
    background: rgba(8, 124, 255, .10);
    transform: translateY(-1px);
}


html[data-theme="light"]
.assistant-account-badge
.assistant-account-credits:hover strong {
    text-decoration: none;
}


.assistant-account-credits:focus-visible {
    outline: 2px solid rgba(8, 124, 255, .55);
    outline-offset: 2px;
}


/* Responsive */

@media (max-width: 1100px) {

    .assistant-account-badge {
        display: none;
    }


    .assistant-company-link {
        display: none;
    }

}


@media (max-width: 768px) {

    .assistant-account-chip {
        min-height: 40px;
        padding: 0 10px;
    }


    .assistant-credit-label {
        display: none;
    }


    .assistant-account-link {
        min-height: 40px;
        padding: 0 11px;
        font-size: 10px;
    }

}

/* =========================================================
   COÛT GÉNÉRATION
========================================================= */

.generation-credit-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-bottom: 18px;

    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
}


.generation-credit-icon {
    font-size: 14px;
}


.generation-credit-info strong {
    color: var(--text-primary, #ffffff);
    font-weight: 600;
}


/* =========================================================
   CRÉDITS ÉPUISÉS
========================================================= */

.generate-button.credits-empty {
    cursor: not-allowed;
    opacity: 0.55;
}

/* =========================================================
   ZONE GÉNÉRATION + TARIFICATION
========================================================= */

/* Force coût + bouton à être l'un sous l'autre */
.generation-module .module-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.generation-credit-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    margin: 0 0 16px 0;

    font-size: 14px;
    color: var(--text-secondary, #94a3b8);
}

.generation-credit-info strong {
    color: var(--text-primary, #ffffff);
    font-weight: 700;
    white-space: nowrap;
}

.generate-actions {
    display: flex;
    justify-content: center;

    width: 100%;
    margin: 0;
}

.generate-button {
    min-width: 245px;
}

/* =========================================================
   ASSISTANT GÉNÉRAL
========================================================= */

.general-assistant-section {
    position: relative;
    padding: 72px 0 56px;
}


.general-assistant-card {
    position: relative;
    max-width: 1050px;
    margin: 0 auto;
    padding: 38px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(30, 136, 229, 0.12),
            transparent 34%
        ),
        rgba(8, 17, 32, 0.82);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   EN-TÊTE
========================================================= */

.general-assistant-heading {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}


.general-assistant-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(30, 136, 229, 0.45);
    border-radius: 16px;
    background: rgba(30, 136, 229, 0.10);
    color: #ffffff;
    font-size: 23px;
}


.general-assistant-heading h2 {
    margin: 5px 0 8px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.1;
}


.general-assistant-heading h2 span {
    color: #2196f3;
}


.general-assistant-heading p {
    max-width: 720px;
    margin: 0;
    color: #8ea6c7;
    line-height: 1.65;
}


/* =========================================================
   ZONE DE SAISIE
========================================================= */

.general-assistant-input {
    padding: 6px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(3, 10, 24, 0.58);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.general-assistant-input:focus-within {
    border-color: rgba(33, 150, 243, 0.65);
    box-shadow:
        0 0 0 3px rgba(33, 150, 243, 0.08);
}


.general-assistant-input textarea {
    display: block;
    width: 100%;
    min-height: 105px;
    max-height: 240px;
    padding: 20px 20px 12px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: transparent;
    color: #f8fafc;
    font: inherit;
    font-size: 15px;
    line-height: 1.6;
}


.general-assistant-input textarea::placeholder {
    color: #64748b;
}


/* =========================================================
   BAS DU CHAMP
========================================================= */

.general-assistant-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 12px 12px 16px;
}


.general-assistant-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7186a4;
    font-size: 12px;
}


.general-assistant-hint > span:first-child {
    color: #2196f3;
}


#assistantGeneralSubmit {
    flex-shrink: 0;
    min-width: 210px;
}


/* =========================================================
   MODULE DÉTECTÉ
========================================================= */

.general-assistant-result {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 16px;
    background: rgba(34, 197, 94, 0.055);
}


.general-assistant-result[hidden] {
    display: none;
}


.general-assistant-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    font-weight: 800;
}


.general-assistant-result-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}


.general-assistant-result-label {
    color: #4ade80;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}


#assistantGeneralModuleName {
    color: #f8fafc;
    font-size: 17px;
}


#assistantGeneralModuleCost {
    color: #8ea6c7;
    font-size: 13px;
}


/* =========================================================
   FEEDBACK
========================================================= */

.general-assistant-feedback {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.055);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.55;
}


.general-assistant-feedback[hidden] {
    display: none;
}


/* =========================================================
   PIÈCES JOINTES DES MODULES
========================================================= */

.module-attachments {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-soft);
}


.attachment-heading,
.attachment-heading > div,
.attachment-dropzone,
.attachment-item,
.attachment-item-details,
.attachment-file-text {
    display: flex;
}


.attachment-heading {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}


.attachment-heading > div,
.attachment-file-text {
    min-width: 0;
    flex-direction: column;
}


.attachment-heading strong {
    color: var(--text-heading);
    font-size: 12px;
}


.attachment-heading span,
.attachment-privacy,
.attachment-feedback {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}


.attachment-limits {
    flex-shrink: 0;
}


.attachment-dropzone {
    position: relative;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border: 1px dashed var(--border-hover);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--muted);
    font-size: 10px;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}


.attachment-dropzone.is-dragging {
    border-color: var(--blue-light);
    background: rgba(8, 124, 255, .09);
    transform: translateY(-1px);
}


.attachment-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


.attachment-browse {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    color: var(--blue-light);
    border: 1px solid var(--border-blue);
    border-radius: 9px;
    background: rgba(8, 124, 255, .07);
    font: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}


.attachment-browse:hover,
.attachment-browse:focus-visible {
    border-color: var(--blue-light);
    background: rgba(8, 124, 255, .12);
    outline: none;
}


.attachment-list {
    display: grid;
    margin: 12px 0 0;
    padding: 0;
    gap: 7px;
    list-style: none;
}


.attachment-list[hidden],
.attachment-feedback[hidden] {
    display: none;
}


.attachment-item {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface);
}


.attachment-item-details {
    min-width: 0;
    align-items: center;
    gap: 9px;
}


.attachment-file-icon {
    color: var(--blue-light);
    font-size: 17px;
}


.attachment-file-text strong {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.attachment-file-text small {
    color: var(--muted);
    font-size: 9px;
}


.attachment-remove {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    padding: 0;
    color: var(--muted);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}


.attachment-remove:hover,
.attachment-remove:focus-visible {
    color: var(--danger);
    border-color: rgba(255, 124, 124, .35);
    outline: none;
}


.attachment-privacy {
    margin: 10px 0 0;
}


.attachment-feedback {
    margin: 8px 0 0;
}


.attachment-feedback[data-type="success"] {
    color: var(--success);
}


.attachment-feedback[data-type="error"] {
    color: var(--danger);
}


@media(max-width: 620px) {
    .attachment-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .attachment-dropzone {
        flex-direction: column;
    }
}


/* =========================================================
   CONVERSATION CONTEXTUELLE DES MODULES
========================================================= */

.module-conversation {
    border-color: rgba(38, 149, 255, .24);
}


.conversation-waiting {
    padding: 17px 18px;
    color: var(--muted);
    border: 1px dashed var(--border-hover);
    border-radius: 12px;
    background: rgba(8, 124, 255, .035);
    text-align: center;
    font-size: 11px;
    line-height: 1.65;
}


.conversation-messages {
    display: flex;
    max-height: 440px;
    margin-bottom: 18px;
    padding: 16px;
    overflow-y: auto;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--input-bg);
}


.conversation-message {
    width: min(86%, 720px);
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-soft);
}


.conversation-user {
    align-self: flex-end;
    border-color: rgba(38, 149, 255, .26);
    background: rgba(8, 124, 255, .085);
}


.conversation-assistant {
    align-self: flex-start;
}


.conversation-message strong {
    display: block;
    margin-bottom: 5px;
    color: var(--blue-light);
    font-size: 9px;
    letter-spacing: .25px;
}


.conversation-message p {
    margin: 0;
    white-space: pre-wrap;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.65;
}


.conversation-input {
    min-height: 118px;
}


.conversation-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}


.conversation-cost {
    color: var(--muted);
    font-size: 10px;
}


.conversation-send {
    flex-shrink: 0;
}


.conversation-feedback {
    margin-top: 13px;
    padding: 11px 13px;
    color: #ffb4ba;
    border: 1px solid rgba(255, 82, 96, .24);
    border-radius: 10px;
    background: rgba(255, 55, 72, .07);
    font-size: 10px;
    line-height: 1.55;
}


.conversation-feedback[data-type="success"] {
    color: var(--success);
    border-color: rgba(65, 217, 139, .22);
    background: var(--success-bg);
}


@media(max-width: 768px) {
    .conversation-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .conversation-send {
        width: 100%;
    }

    .conversation-message {
        width: 94%;
    }
}


.general-assistant-feedback.authentication-required {
    border-color: rgba(8, 124, 255, .28);
    background: rgba(8, 124, 255, .075);
}


.general-assistant-feedback a {
    color: var(--blue-light);
    font-weight: 750;
    text-decoration: none;
}


.general-assistant-feedback a:hover {
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 760px) {

    .general-assistant-section {
        padding: 48px 0 38px;
    }

    .general-assistant-card {
        padding: 24px;
        border-radius: 20px;
    }

    .general-assistant-heading {
        gap: 14px;
    }

    .general-assistant-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .general-assistant-input-footer {
        align-items: stretch;
        flex-direction: column;
    }

    #assistantGeneralSubmit {
        width: 100%;
    }

    .general-assistant-result {
        align-items: stretch;
        flex-wrap: wrap;
    }

    #assistantGeneralContinue {
        width: 100%;
    }

}

/* =========================================================
   ASSISTANT GÉNÉRAL
   THÈME CLAIR
========================================================= */

[data-theme="light"] .general-assistant-card {
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(30, 136, 229, 0.08),
            transparent 34%
        ),
        rgba(255, 255, 255, 0.94);

    border-color:
        rgba(30, 136, 229, 0.22);

    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.10);
}


[data-theme="light"] .general-assistant-heading h2 {
    color: #0f2747;
}


[data-theme="light"] .general-assistant-heading h2 span {
    color: #1687ee;
}


[data-theme="light"] .general-assistant-heading p {
    color: #58708f;
}


[data-theme="light"] .general-assistant-icon {
    background:
        rgba(30, 136, 229, 0.08);

    border-color:
        rgba(30, 136, 229, 0.28);

    color:
        #1687ee;
}


/* =========================================================
   CHAMP
========================================================= */

[data-theme="light"] .general-assistant-input {
    background:
        #f8fbff;

    border-color:
        rgba(15, 39, 71, 0.13);
}


[data-theme="light"] .general-assistant-input:focus-within {
    border-color:
        rgba(30, 136, 229, 0.55);

    box-shadow:
        0 0 0 3px rgba(30, 136, 229, 0.08);
}


[data-theme="light"] .general-assistant-input textarea {
    color:
        #10233f;
}


[data-theme="light"] .general-assistant-input textarea::placeholder {
    color:
        #8191a7;
}


[data-theme="light"] .general-assistant-hint {
    color:
        #657a96;
}


/* =========================================================
   MODULE RECOMMANDÉ
========================================================= */

[data-theme="light"] .general-assistant-result {
    background:
        rgba(22, 163, 74, 0.055);

    border-color:
        rgba(22, 163, 74, 0.22);
}


[data-theme="light"] .general-assistant-result-icon {
    background:
        rgba(22, 163, 74, 0.10);

    color:
        #16a34a;
}


[data-theme="light"] .general-assistant-result-label {
    color:
        #15803d;
}


[data-theme="light"] #assistantGeneralModuleName {
    color:
        #10233f;
}


[data-theme="light"] #assistantGeneralModuleCost {
    color:
        #58708f;
}


/* =========================================================
   MESSAGE / AMBIGUÏTÉ
========================================================= */

[data-theme="light"] .general-assistant-feedback {
    background:
        rgba(245, 158, 11, 0.07);

    border-color:
        rgba(217, 119, 6, 0.22);

    color:
        #475569;
}


/* =========================================================
   NAVIGATION LÉGALE PARTAGÉE
========================================================= */

.legal-footer-bar {
    border-top: 1px solid var(--border-soft);
}

.legal-footer-inner {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.legal-footer-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.legal-footer-nav a,
.legal-footer-inner > span {
    padding: 0;
    color: var(--muted-dark);
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    transition: color .2s ease;
}

.legal-footer-nav a:hover,
.legal-footer-nav a[aria-current="page"] {
    color: var(--blue-electric);
    transform: none;
}


/* =========================================================
   TRANSITION ENTRE LE SITE ET PRIMETECH ASSISTANT
========================================================= */

@view-transition {
    navigation: auto;
}

.site-header {
    view-transition-name: primetech-header;
}

.site-header .logo img {
    view-transition-name: primetech-logo;
}

::view-transition-old(root) {
    animation: primetech-assistant-out .16s ease both;
}

::view-transition-new(root) {
    animation: primetech-assistant-in .28s ease both;
}

@keyframes primetech-assistant-out {
    to { opacity: .15; transform: translateY(-4px); }
}

@keyframes primetech-assistant-in {
    from { opacity: .15; transform: translateY(5px); }
}

@media (max-width: 680px) {
    .legal-footer-inner {
        padding: 18px 0;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}