:root {
    --navy: #1E3A5F;
    --navy-dark: #14283F;
    --navy-line: #4A6A8E;
    --accent: #F28C28;        /* orange vif : boutons, accents sur fond foncé */
    --orange-text: #B85C0A;   /* orange foncé : texte sur fond clair (contraste) */
    --gray-bg: #F4F6F8;
    --gray-line: #E3E8EE;
    --text: #1B2A3D;
    --text-soft: #3D4E61;
    --text-muted: #5B6B7D;
    --on-navy: #C9D6E3;
    --green-bg: #D8F0E4;
    --green: #1B5E3F;
    --green-stock: #2E7D57;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Work Sans', 'Segoe UI', Roboto, sans-serif;

    --radius-sm: 22px;
    --radius-md: 28px;
    --radius-lg: 32px;
    --container: 1216px;
    --gutter: clamp(20px, 5vw, 112px);
    --section-y: clamp(64px, 9vw, 104px);
}

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

html { 
    scroll-behavior: smooth; 
}

@media (prefers-reduced-motion: reduce) { 
    html { 
        scroll-behavior: auto; 
    } 
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

img 
{ 
    max-width: 100%; 
    height: auto; 
}

p, h1, h2, h3, ul, ol, figure, blockquote { 
    margin: 0; 
}

ul, ol { 
    padding: 0; 
    list-style: none; 
}

a { 
    color: var(--navy); 
    text-decoration: none; 
}

a:hover { 
    color: var(--orange-text); 
}

:focus-visible { 
    outline: 3px solid var(--accent); 
    outline-offset: 3px; border-radius: 4px; 
}

.sr-only {
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px;
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    white-space: nowrap; 
    border: 0;
}

.skip-link {
    position: absolute; 
    left: 16px; 
    top: -60px; 
    z-index: 100;
    padding: 10px 16px; 
    background: var(--accent); 
    color: var(--navy); 
    font-weight: 600; 
    border-radius: 8px;
}

.skip-link:focus { top: 16px; }

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.text-orange { 
    color: var(--orange-text); 
}

.text-accent { 
    color: var(--accent); 
}

em.text-orange { 
    font-style: italic; 
}

.btn {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    min-height: 46px; 
    padding: 0 24px;
    border: 0; 
    border-radius: 999px;
    font-family: inherit; 
    font-size: 16px; 
    font-weight: 600; 
    line-height: 1.2;
    text-align: center; 
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.btn--sm  { 
    min-height: 46px; 
}

.btn--lg  { 
    min-height: 58px; 
    padding: 0 32px; 
    font-size: 18px; 
}

.btn--block { 
    width: 100%;
    min-height: 52px; 
}

.btn--accent { 
    background: var(--accent); 
    color: var(--navy); 
}

.btn--accent:hover { 
    background: #E07A14; 
    color: var(--navy); 
}

.btn--primary { 
    background: var(--navy); 
    color: #FFFFFF; 
}

.btn--primary:hover { 
    background: var(--navy-dark); 
    color: #FFFFFF; 
}

.btn--outline { 
    border: 1.5px solid var(--navy); 
    color: var(--navy); 
    font-weight: 400; 
}

.btn--outline:hover { 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.btn-group { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 14px; 
}

.site-header { 
    background: var(--navy); 
    position: relative; 
    z-index: 10; 
}
.site-header__inner {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 24px;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto; 
    padding: 24px var(--gutter);
}

.logo {
    font-family: var(--font-display); 
    font-size: 30px; 
    font-weight: 700;
    color: #FFFFFF; 
    line-height: 1;
}

.logo:hover { 
    color: #FFFFFF; 
}

.logo__accent { 
    color: var(--accent); 
}

.logo--footer { 
    font-size: 26px; 
}

.main-nav { 
    display: flex; 
    align-items: center; 
    gap: 40px; 
}

.main-nav__link { 
    color: #FFFFFF; 
    font-weight: 500; 
}

.main-nav__link:hover { 
    color: #FFFFFF; 
    text-decoration: underline; 
    text-underline-offset: 4px; 
}

.nav-toggle {
    display: none;
    width: 44px; 
    height: 44px; 
    padding: 10px;
    background: transparent; 
    border: 1px solid var(--navy-line); 
    border-radius: 10px;
    cursor: pointer; 
    flex-direction: column; 
    justify-content: space-between;
}

.nav-toggle__bar { 
    display: block; 
    height: 2px; 
    background: #FFFFFF; 
    border-radius: 2px; 
}

.hero { 
    padding-block: clamp(56px, 8vw, 96px) var(--section-y); 
}

.hero__inner { 
    display: flex; 
    align-items: center; 
    gap: 72px; 
}

.hero__text { 
    flex: 1 1 0; 
    display: flex; 
    flex-direction: column; 
    gap: 28px; 
}

.badge {
    align-self: flex-start;
    padding: 7px 16px; 
    border-radius: 999px;
    background: var(--gray-bg); 
    color: var(--navy);
    font-size: 14px; 
    font-weight: 500;
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(44px, 6vw, 76px); 
    line-height: 1.03; 
    font-weight: 500;
    color: var(--navy); 
    letter-spacing: -0.025em;
}

.hero__lead { 
    max-width: 540px; 
    font-size: clamp(18px, 1.6vw, 20px); 
    line-height: 1.6; 
    color: var(--text-soft); 
}

.hero__note { 
    font-size: 15px; 
    color: var(--text-muted); 
}

.devis-card {
    flex: 0 0 560px; 
    max-width: 100%;
    display: flex; 
    flex-direction: column; 
    gap: 18px;
    padding: 28px; 
    border: 1px solid var(--gray-line); 
    border-radius: var(--radius-sm);
    background: #FFFFFF;
}

.devis-card__head { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
}

.devis-card__num { 
    font-size: 13px; 
    color: var(--text-muted); 
}

.devis-card__title { 
    font-family: var(--font-display); 
    font-size: 23px; 
    font-weight: 500; 
    color: var(--navy); 
}

.status { 
    padding: 5px 12px; 
    border-radius: 999px; 
    font-size: 13px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.status--signed { 
    background: var(--green-bg); 
    color: var(--green); 
}

.devis-card__lines { 
    border-top: 1px solid var(--gray-line); 
}

.devis-card__line {
    display: flex; 
    justify-content: space-between; 
    align-items: 
    center; gap: 16px;
    padding: 14px 0; 
    border-bottom: 1px solid var(--gray-line);
}

.devis-card__label { 
    font-size: 15px; 
    font-weight: 500; 
}

.devis-card__info { 
    font-size: 13px; 
    color: var(--text-muted); 
}

.devis-card__info.is-stock { 
    color: var(--green-stock); 
}

.devis-card__price { 
    font-size: 15px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.devis-card__total { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.devis-card__total span { 
    font-size: 15px; 
    color: var(--text-muted); 
}

.devis-card__total strong { font-family: var(--font-display); 
    font-size: 28px; 
    font-weight: 700; 
    color: var(--navy); 
}

.testimonial-wrap { 
    padding-bottom: var(--section-y); 
}

.testimonial {
    display: flex; 
    align-items: center; 
    gap: 48px;
    padding: clamp(32px, 4vw, 56px) clamp(24px, 4.5vw, 64px);
    border-radius: var(--radius-md); 
    background: var(--gray-bg);
}

.testimonial__mark {
    font-family: var(--font-display); 
    font-size: 120px; 
    line-height: 0.8; 
    font-weight: 700;
    color: var(--orange-text);
}

.testimonial__quote {
    font-family: var(--font-display); 
    font-size: clamp(22px, 2.2vw, 30px); 
    line-height: 1.35;
    color: var(--navy);
}

.testimonial__author { 
    margin-top: 16px; 
    font-size: 15px; 
    color: var(--text-muted); 
}

.band { 
    padding-block: var(--section-y); 
    background: var(--gray-bg); 
}

.band--cta { 
    margin-top: var(--section-y); 
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(34px, 3.8vw, 52px); 
    line-height: 1.1; 
    font-weight: 500;
    color: var(--navy); 
    letter-spacing: -0.02em;
}

.section-title--center { 
    text-align: center; 
}

.steps { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 32px; 
    margin-top: 48px; 
}

.step { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
    padding: 40px; 
    border-radius: 24px; 
    background: #FFFFFF; 
}

.step__num {
    width: 56px; 
    height: 56px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: var(--accent); 
    color: var(--navy);
    font-family: var(--font-display); 
    font-size: 26px; 
    font-weight: 700;
}

.step__title { 
    font-family: var(--font-display); 
    font-size: 28px; 
    font-weight: 500; 
    color: var(--navy); 
}

.step__text { 
    font-size: 17px; 
    line-height: 1.6; 
    color: var(--text-soft); 
}

.difference {
    display: flex; 
    flex-direction: column; 
    gap: 44px;
    margin-top: var(--section-y);
    padding: clamp(32px, 5vw, 72px);
    border-radius: var(--radius-lg); 
    background: var(--navy);
}

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

.difference__label { 
    font-size: 22px; 
    font-weight: 600; 
    color: var(--accent); 
    letter-spacing: 1.5px; 
}

.difference__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.6vw, 50px); 
    line-height: 1.1; 
    font-weight: 500;
    color: #FFFFFF; 
    letter-spacing: -0.02em;
}
.difference__body { 
    display: flex; 
    align-items: flex-start; 
    gap: 80px; 
}

.difference__text { 
    flex: 1 1 0; 
    font-size: 19px; 
    line-height: 1.6; 
    color: var(--on-navy); 
}

.difference__grid { 
    flex: 0 0 560px; 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 32px 40px; 
}

.advantage { 
    border-top: 1.5px solid var(--navy-line); 
    padding-top: 18px; 
}

.advantage__title { 
    margin-bottom: 8px; 
    font-size: 19px; 
    font-weight: 600; 
    color: #FFFFFF; 
}

.advantage__text { 
    font-size: 15px; 
    line-height: 1.55; 
    color: var(--on-navy); 
}

.cta { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 24px; 
    text-align: center; 
}

.cta__text { 
    font-size: 19px; 
    color: var(--text-soft); 
}

.site-footer { 
    background: var(--navy-dark); 
    color: #9FB3C8; 
    font-size: 15px; 
}

.site-footer__grid {
    display: grid; 
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; 
    gap: 48px;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto; 
    padding: 72px var(--gutter) 0;
}
.site-footer__brand { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.site-footer__brand p { 
    max-width: 280px; 
    line-height: 1.6; 
}

.site-footer__col { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
}

.site-footer__col p { 
    line-height: 1.6; 
}

.site-footer__title { 
    font-size: 14px; 
    font-weight: 600; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    color: #FFFFFF; 
}

.site-footer__link { 
    color: var(--on-navy); 
}

.site-footer__link:hover { 
    color: #FFFFFF; 
    text-decoration: underline; 
    text-underline-offset: 4px; 
}

.site-footer__phone { 
    font-family: var(--font-display); 
    font-size: 22px; 
    color: #FFFFFF; 
}

.site-footer__phone:hover { 
    color: var(--accent); 
}

.socials { 
    display: flex; 
    gap: 10px; 
    margin-top: 6px; 
}

.socials__link {
    width: 44px; 
    height: 44px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 1px solid #3A5677; 
    color: #DCE6F0; 
    font-size: 14px; 
    font-weight: 600;
}

.socials__link:hover { 
    border-color: var(--accent); 
    color: var(--accent); 
}

.site-footer__bottom {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 16px 24px;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: 56px auto 0; 
    padding: 28px var(--gutter) 40px;
    border-top: 1px solid #2A4260; 
    font-size: 14px;
}

.site-footer__legal { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px 28px; 
}

.auth { 
    display: flex; 
    min-height: 100vh; 
}
 
.auth__aside {
    flex: 0 0 43%;
    max-width: 620px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
    padding: 48px clamp(32px, 4.5vw, 64px);
    background: var(--navy); color: #FFFFFF;
    position: sticky; top: 0; height: 100vh;
}
.auth__aside-content { display: flex; flex-direction: column; gap: 32px; }
 
.auth__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 3.6vw, 52px); line-height: 1.06; font-weight: 500;
    letter-spacing: -0.02em;
}
.auth__title em { 
    font-style: italic; 
}

.auth__lead { 
    max-width: 440px; 
    font-size: 19px; 
    line-height: 1.6; 
    color: var(--on-navy); 
}
 
.auth__benefits { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}

.auth__benefits li { 
    border-top: 1.5px solid var(--navy-line); 
    padding-top: 16px; 
}

.auth__benefits strong { 
    display: block; 
    font-size: 19px; 
    font-weight: 600; 
}

.auth__benefits span { 
    display: block; 
    margin-top: 6px; 
    font-size: 15px; 
    line-height: 1.55; 
    color: var(--on-navy); 
}
 
.auth__help { 
    font-size: 15px; 
    color: var(--on-navy); 
}

.auth__help a { 
    color: #FFFFFF; 
    font-weight: 500; 
}

.auth__help a:hover { 
    color: var(--accent); 
}
 
.auth__main {
    flex: 1 1 auto;
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 48px clamp(20px, 4vw, 48px);
}

.auth__panel { 
    width: 100%; 
    max-width: 440px; 
    display: flex; 
    flex-direction: 
    column; gap: 28px; 
}

.auth__panel--wide { 
    max-width: 560px; 
}
 
.auth-tabs { 
    display: flex; 
    padding: 5px; 
    border-radius: 999px; 
    background: var(--gray-bg); 
}

.auth-tabs__tab {
    flex: 1 1 0;
    display: flex; 
    align-items: center; 
    justify-content: center;
    min-height: 44px; 
    border-radius: 999px;
    color: var(--text-soft);
}

.auth-tabs__tab:hover { 
    color: var(--navy); 
}

.auth-tabs__tab.is-active { 
    background: #FFFFFF; 
    color: var(--navy); 
    font-weight: 600; 
}
 
.auth__intro { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.auth__intro p { 
    font-size: 17px; 
    line-height: 1.55; 
    color: var(--text-soft); 
}

.auth__heading {
    font-family: var(--font-display);
    font-size: clamp(32px, 3vw, 40px); 
    line-height: 1.1; 
    font-weight: 500;
    color: var(--navy); 
    letter-spacing: -0.02em;
}
 
.auth__switch { 
    text-align: center; 
    font-size: 15px; 
    color: var(--text-soft); 
}
 
.link-orange { 
    color: var(--orange-text); 
    font-weight: 600; 
}

.link-orange:hover { 
    color: var(--navy); 
    text-decoration: underline; 
    text-underline-offset: 3px; 
}
 
.form { 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
}

.form__row { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 18px; 
}

.form_input_container {
    display: grid;
    align-items: center;
}

.form_input_container input {
    min-height: 52px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid #D5DCE4;
    font-size: 16px;
    font-family: inherit;
}
 
.field { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.field__row { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    gap: 12px; 
}

.field__row .link-orange { 
    font-size: 14px; 
    font-weight: 500; 
}

.field label { 
    font-size: 15px; 
    font-weight: 500; 
    color: var(--text); 
}
 
.field input, .field select {
    width: 100%; 
    min-height: 52px; 
    padding: 0 16px;
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px;
    font-family: inherit; 
    font-size: 16px; 
    color: var(--text); 
    background: #FFFFFF;
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E3A5F' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
    padding-right: 44px;
}

.field input::placeholder { 
    color: #8A97A6; 
}

.field input:focus, .field select:focus { 
    outline: 3px solid var(--accent); 
    outline-offset: 1px; 
    border-color: var(--navy); 
}
 
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { 
    border-color: #C0362C; 
}

.field__hint { 
    font-size: 13px; 
    color: var(--text-muted); 
}

.field__error { 
    font-size: 14px; 
    color: #B42318; 
    font-weight: 500; 
}
 
.checkbox { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-size: 15px; 
    line-height: 1.5; 
    color: var(--text-soft); 
    cursor: pointer; 
    margin: 15px 0 15px 0;
}

.checkbox input { 
    flex-shrink: 0; 
    width: 20px; 
    height: 20px; 
    margin: 2px 0 0; 
    accent-color: var(--navy); 
}
 
.alert { 
    padding: 14px 16px; 
    border-radius: 12px; 
    font-size: 15px; 
}

.alert--success { 
    background: var(--green-bg); 
    color: var(--green); 
}

.user-menu { 
    position: relative; 
}
 
.user-menu__toggle {
    display: flex; 
    align-items: center; 
    gap: 12px;
    min-height: 46px; 
    padding: 0 14px 0 6px;
    border: 1px solid var(--navy-line); 
    border-radius: 999px;
    background: #274A73; 
    color: #FFFFFF;
    font-size: 15px; 
    font-weight: 500;
    cursor: pointer; 
    list-style: none; 
    user-select: none;
}

.user-menu__toggle::-webkit-details-marker { 
    display: none; 
}

.user-menu__toggle::marker { 
    content: ''; 
}

.user-menu__toggle:hover { 
    background: #2E5482; 
}
 
.user-menu__avatar {
    width: 34px; 
    height: 34px; 
    flex-shrink: 0; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: #FFFFFF; 
    color: var(--navy);
    font-size: 13px; 
    font-weight: 600;
}
 
.user-menu__company {
    max-width: 200px;
    color: #FFFFFF;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
 
.user-menu__chevron { 
    flex-shrink: 0; 
    color: #FFFFFF; 
    transition: transform .15s ease; 
}

.user-menu[open] .user-menu__chevron { 
    transform: rotate(180deg); 
}
 
.user-menu__panel {
    position: absolute; 
    top: calc(100% + 12px); 
    right: 0; 
    z-index: 20;
    width: 280px; 
    padding: 8px;
    border: 1px solid var(--gray-line); 
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 12px 32px rgba(20, 40, 63, .18);
}
 
.user-menu__identity { 
    padding: 12px 14px 14px; 
    border-bottom: 1px solid var(--gray-line); 
}

.user-menu__name { 
    font-size: 15px; 
    font-weight: 600; 
    color: var(--text); 
}

.user-menu__email { 
    font-size: 14px; 
    color: var(--text-muted); 
    overflow-wrap: anywhere; 
}
 
.user-menu__links { 
    display: flex; 
    flex-direction: column; 
    padding: 6px 0; 
}
 
.user-menu__item {
    display: flex; 
    align-items: center; 
    width: 100%;
    min-height: 44px; 
    padding: 0 14px;
    border: 0; 
    border-radius: 10px; 
    background: transparent;
    font-family: inherit; 
    font-size: 15px; 
    text-align: left;
    color: var(--text); 
    cursor: pointer;
}

.user-menu__item:hover { 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.user-menu__item--danger { 
    color: #B42318; 
}

.user-menu__item--danger:hover { 
    color: #B42318; 
    background: #FDECEA; 
}
 
.user-menu__count {
    margin-left: auto; 
    padding: 2px 9px; 
    border-radius: 999px;
    background: var(--gray-bg); 
    font-size: 13px; 
    color: var(--text-soft);
}
 
.user-menu__logout { 
    padding-top: 6px; 
    border-top: 1px solid var(--gray-line); 
}

.dashboard {
    display: flex; flex-direction: column; gap: 32px;
    padding-block: 48px 72px;
}

.dashboard__head { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    gap: 24px; 
    flex-wrap: wrap; 
}

.dashboard__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.4vw, 44px); 
    line-height: 1.1; 
    font-weight: 500;
    color: var(--navy); 
    letter-spacing: -0.02em;
}

.dashboard__summary { 
    margin-top: 8px; 
    font-size: 17px; 
    color: var(--text-soft); 
}

.dashboard__actions { 
    display: flex; 
    gap: 12px; 
    flex-wrap: wrap; 
}

.dashboard__actions .btn { 
    min-height: 52px; 
}

.btn__plus { 
    margin-right: 8px; 
    font-size: 22px; 
    line-height: 1; 
}

.stats { 
    display: grid; 
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 20px; 
}

.stat { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    padding: 24px; 
    border-radius: 20px; 
    background: var(--gray-bg); 
}

.stat__label { 
    font-size: 14px; 
    color: var(--text-soft); 
}

.stat__value { 
    font-family: var(--font-display); 
    font-size: 36px; line-height: 1.1; 
    font-weight: 700; 
    color: var(--navy); 
}

.stat__sub { 
    font-size: 13px; 
    color: var(--text-muted); 
}
 
.dashboard__grid { 
    display: grid; 
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); 
    gap: 24px; 
    align-items: start; 
}

.dashboard__side { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}
 
.card { 
    border: 1px solid var(--gray-line); 
    border-radius: 20px; 
    background: #FFFFFF; 
    overflow: hidden; 
}

.card__head {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px;
    padding: 22px 24px; 
    border-bottom: 1px solid var(--gray-line);
}

.card__title { 
    font-family: var(--font-display); 
    font-size: 22px; 
    font-weight: 500; 
    color: var(--navy); 
}

.card__link { 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--orange-text); 
    white-space: nowrap; 
}

.card__link:hover { 
    color: var(--navy); 
    text-decoration: underline; 
    text-underline-offset: 3px; 
}
 
.table-wrap { 
    overflow-x: auto; 
}

.quotes-table { 
    width: 100%; 
    min-width: 560px; 
    border-collapse: collapse; 
    font-size: 15px; 
}

.quotes-table th {
    padding: 12px 24px; 
    text-align: left;
    font-size: 13px; 
    font-weight: 500; 
    color: var(--text-muted);
    background: #FAFBFC; 
    border-bottom: 1px solid var(--gray-line);
}

.quotes-table td { 
    padding: 16px 24px; 
    border-bottom: 1px solid #EEF1F4; 
    vertical-align: middle; 
}

.quotes-table tr:last-child td { 
    border-bottom: 0; 
}

.quotes-table__title { 
    display: block; 
    font-weight: 500; 
    color: var(--text); 
}

.quotes-table__title:hover { 
    color: var(--navy); 
    text-decoration: underline; 
    text-underline-offset: 3px; 
}

.quotes-table__meta { 
    display: block; 
    font-size: 13px; 
    color: var(--text-muted); 
}

.amount { 
    text-align: right; 
    font-weight: 600; 
    white-space: nowrap; 
}
 
.badge { 
    display: inline-flex; 
    align-items: center; 
    padding: 4px 11px; 
    border-radius: 999px; 
    font-size: 13px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.badge--signed  { 
    background: var(--green-bg); 
    color: var(--green); 
}

.badge--sent    { 
    background: #E1ECF7; 
    color: var(--navy); 
}

.badge--draft   { 
    background: #EEF1F4; 
    color: var(--text-soft); 
}

.badge--refused { 
    background: #FDECEA; 
    color: #B42318; 
}
 
.todo { 
    display: flex; 
    gap: 14px; 
    align-items: flex-start; 
    padding: 16px 24px; 
    border-bottom: 1px solid #EEF1F4; 
}

.todo:last-child { 
    border-bottom: 0; 
}

.todo__dot { 
    width: 10px; 
    height: 10px; 
    margin-top: 6px; 
    border-radius: 50%; 
    flex-shrink: 0; 
    background: var(--accent); 
}

.todo__dot--overdue { 
    background: #B42318; 
}

.todo__dot--order { 
    background: #2E9E6A; 
}

.todo__body { 
    flex-grow: 1; 
}

.todo__title { 
    font-weight: 500; 
}

.todo__detail { 
    font-size: 13px; 
    color: var(--text-muted); 
}
 
.order { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    padding: 18px 24px; 
    border-bottom: 1px solid #EEF1F4; 
}

.order:last-child { 
    border-bottom: 0; 
}

.order__head { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    gap: 12px; 
}

.order__label { 
    font-weight: 500; 
}

.order__status { 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--text-soft); 
    white-space: nowrap; 
}

.order__status--soon { 
    color: var(--green); 
}

.order__progress { 
    display: flex; 
    gap: 6px; 
}

.order__step { 
    flex: 1 1 0; 
    height: 6px; 
    border-radius: 999px; 
    background: var(--gray-line); 
}

.order__step.is-done { 
    background: #2E9E6A; 
}

.order__detail { 
    font-size: 13px; 
    color: var(--text-muted); 
}
 
.empty { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 10px; 
    padding: 32px 24px; 
    color: var(--text-soft); 
}

.empty__title { 
    font-family: var(--font-display); 
    font-size: 20px; 
    color: var(--navy); 
}

.empty .btn { 
    margin-top: 8px; 
}

.empty--small { 
    padding: 20px 24px; 
    font-size: 15px; 
}

[hidden] { 
    display: none !important; 
}

.qe-topbar { 
    position: sticky; 
    top: 0; 
    z-index: 8; 
    background: #FFFFFF; 
    border-bottom: 1px solid var(--gray-line); 
}

.qe-topbar__inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 20px; 
    flex-wrap: wrap; 
    padding-block: 18px; 
}

.qe-breadcrumb { 
    font-size: 14px; 
    color: var(--text-muted); 
}

.qe-breadcrumb a { 
    color: var(--text-muted); 
}

.qe-breadcrumb a:hover { 
    color: var(--navy); 
    text-decoration: underline; 
}

.qe-topbar__title { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    flex-wrap: wrap; 
    margin-top: 4px; 
}

.qe-topbar__title h1 { 
    font-family: var(--font-display); 
    font-size: clamp(24px, 2.4vw, 32px); 
    font-weight: 500; 
    color: var(--navy); 
}

.qe-topbar__actions { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.qe-topbar__actions .btn { 
    min-height: 48px; 
}

.qe-hint { 
    font-size: 13px; 
    color: var(--text-muted); 
}
 
.btn--ghost { 
    background: transparent; 
    color: var(--navy); 
    font-weight: 500; 
}

.btn--ghost:hover { 
    background: var(--gray-bg); 
}

.btn--ghost:disabled { 
    color: #8A97A6; 
    cursor: not-allowed; 
    background: transparent; 
}

.btn--xs { 
    min-height: 36px; 
    padding: 0 14px; 
    font-size: 14px; 
}

.qe-page { 
    padding-block: 28px 72px; 
    background: #FAFBFC; 
    min-height: 60vh; 
}

.qe-layout { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 330px; 
    gap: 28px; 
    align-items: start; 
}

.qe-main { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    min-width: 0; 
}

.qe-side { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    position: sticky; 
    top: 112px; 
}

.qe-two { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 24px; 
}

.qe-row-2 { 
    display: grid; 
    grid-template-columns: 
    repeat(2, minmax(0, 1fr)); 
    gap: 16px; 
}

.qe-row-3 { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 16px; 
}

.card__body { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    padding: 20px 24px 24px; 
}

button.card__link { 
    border: 0; 
    background: none; 
    padding: 0; 
    font-family: inherit; 
    cursor: pointer; 
}

.alert { 
    margin-bottom: 20px; 
    padding: 14px 18px; 
    border-radius: 14px; 
    font-size: 15px; 
}

.alert--success { 
    background: var(--green-bg); 
    color: var(--green); 
}

.alert--error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.alert--error ul { 
    margin: 6px 0 0 18px; 
    padding: 0; 
    list-style: disc; 
}

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

.field label { 
    font-size: 14px; 
    font-weight: 500; 
    color: var(--text); 
}

.field input, .field select, .field textarea, .qe-input {
    width: 100%; 
    min-height: 48px; 
    padding: 0 14px; 
    box-sizing: border-box;
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px;
    font-family: inherit; 
    font-size: 15px; 
    color: var(--text); 
    background: #FFFFFF;
}

.field textarea, .qe-input--text { 
    padding: 12px 14px; 
    line-height: 1.5; 
    resize: vertical; 
}

.field input:focus, .field select:focus, .field textarea:focus, .qe-input:focus {
    outline: 3px solid #F9D3AE; 
    outline-offset: 0; 
    border-color: var(--navy);
}

.field__error { 
    font-size: 14px; 
    color: #B42318; 
    font-weight: 500; 
}

.qe-client-info { 
    font-size: 14px; 
    line-height: 1.6; 
    color: var(--text-soft); 
}

.qe-coef { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
    color: var(--text-soft); 
}

.qe-coef input { 
    width: 84px; 
    min-height: 40px; 
    padding: 0 10px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 10px; 
    font: inherit; 
    font-weight: 600; 
    text-align: center; 
}

.qe-search { 
    position: relative; 
    padding: 18px 24px; 
    border-bottom: 1px solid var(--gray-line); 
}

.qe-search__box { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    min-height: 50px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    color: var(--navy); 
}

.qe-search__box:focus-within { 
    border-color: var(--navy); 
    outline: 3px solid #F9D3AE; 
}

.qe-search__box input { 
    flex: 1 1 auto; 
    min-width: 0; 
    border: 0; 
    outline: 0; 
    font: inherit; 
    font-size: 15px; 
    color: var(--text); 
    background: transparent; 
}
 
.qe-results {
    position: absolute; 
    left: 24px; 
    right: 24px; 
    top: calc(100% - 10px); 
    z-index: 6;
    border: 1px solid var(--gray-line); 
    border-radius: 16px; 
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(20, 40, 63, .16); 
    overflow: hidden;
}

.qe-results__head { 
    padding: 10px 16px; 
    font-size: 13px; 
    color: var(--text-muted); 
    background: #FAFBFC; 
    border-bottom: 1px solid #EEF1F4; 
}

.qe-result { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
    padding: 12px 16px; 
    border-bottom: 1px solid #EEF1F4; 
}

.qe-result:last-child { 
    border-bottom: 0; 
}

.qe-result:hover { 
    background: var(--gray-bg); 
}

.qe-result__name { 
    font-weight: 500; 
}

.qe-result__ref { 
    font-size: 13px; 
    color: var(--text-muted); 
}

.qe-result__right { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    flex-shrink: 0; 
}

.qe-result__price { 
    min-width: 80px; 
    text-align: right; 
    font-weight: 600; 
}

.table-wrap { 
    overflow-x: auto; 
}

.qe-lines { 
    width: 100%; 
    min-width: 760px; 
    border-collapse: collapse; 
    table-layout: fixed; 
    font-size: 15px; 
}

.qe-lines th { 
    padding: 11px 6px; 
    text-align: left; 
    font-size: 13px; 
    font-weight: 500; 
    color: var(--text-muted); 
    background: #FAFBFC; 
    border-bottom: 1px solid var(--gray-line); 
}

.qe-lines td { 
    padding: 12px 6px; 
    border-bottom: 1px solid #EEF1F4; 
    vertical-align: top; 
}

.qe-lines th:first-child, .qe-lines td:first-child { 
    padding-left: 16px; 
}

.qe-lines th:last-child, .qe-lines td:last-child { 
    padding-right: 16px; 
}

.qe-col-move { 
    width: 30px; 
}

.qe-col-qty { 
    width: 76px; 
}

.qe-col-unit { 
    width: 82px; 
}

.qe-col-price { 
    width: 104px; 
}

.qe-col-vat { 
    width: 84px; 
}

.qe-col-total { 
    width: 96px; 
    text-align: right; 
    font-weight: 600; 
    white-space: nowrap; 
    padding-top: 24px !important; 
}

.qe-col-del { 
    width: 30px; 
}

th.qe-col-price, th.qe-col-total { 
    text-align: right; 
}
 
.qe-line .qe-input { 
    min-height: 40px; 
    padding: 0 8px; 
    border-width: 1px; 
    border-radius: 9px; 
}

.qe-line select.qe-input { 
    padding: 0 4px; 
}

.qe-input--num { 
    text-align: right; 
}

.qe-input--label { 
    font-weight: 500; 
}

.qe-input--desc { 
    margin-top: 6px; 
    min-height: 34px !important; 
    font-size: 13px !important; 
    color: var(--text-soft) !important; 
    border-style: dashed !important; 
}

.qe-line--section { 
    background: var(--gray-bg); 
}

.qe-input--section { 
    font-family: var(--font-display); 
    font-size: 18px !important; 
    color: var(--navy) !important; 
    background: transparent !important; 
}

.qe-line--text .qe-input--text { 
    min-height: 60px; 
}
 
.qe-meta { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 8px; 
    margin-top: 6px; 
    font-size: 13px; 
    color: var(--text-muted); 
}

.qe-tag { 
    display: inline-flex; 
    align-items: center; 
    padding: 2px 9px; 
    border-radius: 999px; 
    font-size: 12px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.qe-tag--material { 
    background: #FDEEDC; 
    color: #8A4A08; 
}

.qe-tag--labor { 
    background: #E1ECF7; 
    color: var(--navy); 
}

.qe-stock-ok { 
    color: var(--green); 
    font-weight: 500; 
}

.qe-stock-later { 
    color: #8A4A08; 
    font-weight: 500; 
}

.qe-tag.qe-stock-ok { 
    background: var(--green-bg); 
}

.qe-tag.qe-stock-later { 
    background: #FDEEDC; 
}
 
.qe-move { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}

.qe-icon-btn {
    width: 26px; 
    height: 26px; 
    padding: 0; 
    border: 0; 
    border-radius: 6px;
    background: transparent; 
    color: #8A97A6; 
    font-size: 14px; 
    cursor: pointer;
}

.qe-icon-btn:hover:not(:disabled) { 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.qe-icon-btn:disabled { 
    opacity: .3; 
    cursor: default; 
}

.qe-col-del .qe-icon-btn { 
    margin-top: 8px; 
}
 
.qe-empty { 
    padding: 28px 24px; 
    color: var(--text-muted); 
    text-align: center; 
}

.qe-add { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    padding: 18px 24px 22px; 
    border-top: 1px solid #EEF1F4; 
}

.qe-add__btn {
    display: inline-flex; 
    align-items: center; 
    min-height: 44px; 
    padding: 0 16px;
    border: 1.5px dashed #C5CFDA; 
    border-radius: 999px; 
    background: #FFFFFF;
    font-family: inherit; 
    font-size: 14px; 
    font-weight: 500; 
    color: var(--navy); 
    cursor: pointer;
}

.qe-add__btn:hover { 
    border-color: var(--navy); 
    background: var(--gray-bg); 
}

.qe-summary { gap: 12px; 
    padding-top: 20px; 
}

.qe-sum-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    gap: 12px; 
    font-size: 15px; 
}

.qe-sum-row > span:first-child { 
    color: var(--text-soft); 
}

.qe-sum-row--strong { 
    padding-top: 12px; 
    border-top: 1px solid #EEF1F4; 
    font-weight: 600; 
}

.qe-sum-row--strong > span:first-child { 
    color: var(--text); 
}

.qe-sum-row--small { 
    font-size: 14px; 
}

#sum-vat { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.qe-sum-total { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    padding-top: 14px; 
    border-top: 1px solid #EEF1F4; 
    font-weight: 600; 
}

.qe-sum-total strong { 
    font-family: var(--font-display); 
    font-size: 28px; 
    color: var(--navy); 
}
 
.qe-margin { 
    border-color: #F6C79A; 
    background: #FFF8F1; 
}

.qe-margin .card__body { 
    gap: 10px; 
}

.qe-margin__label { 
    font-size: 13px; 
    font-weight: 600; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    color: #8A4A08; 
}

.qe-margin__value { 
    font-family: var(--font-display); 
    font-size: 24px; 
    color: var(--navy); 
}

.qe-margin__text { 
    font-size: 14px; 
    line-height: 1.5; 
    color: var(--text-soft); 
}
 
.qe-stock { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-weight: 500; 
}

.qe-dot { 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    flex-shrink: 0; 
    background: #C5CFDA; 
}

.qe-stock.is-ok .qe-dot { 
    background: #2E9E6A; 
}

.qe-stock.is-warning .qe-dot { 
    background: var(--accent); 
}

.qe-dialog { 
    width: min(620px, calc(100vw - 32px)); 
    padding: 0; 
    border: 0; 
    border-radius: 22px; 
    box-shadow: 0 24px 60px rgba(20, 40, 63, .3); 
}

.qe-dialog::backdrop { 
    background: rgba(20, 40, 63, .45); 
}

.qe-dialog__form { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    padding: 28px; 
}

.qe-dialog__actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: 10px; 
    margin-top: 4px; 
}

.qe-toggle { 
    display: flex; 
    gap: 6px; 
    padding: 5px; 
    border-radius: 999px; 
    background: var(--gray-bg); 
}

.qe-toggle label { 
    flex: 1 1 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    min-height: 42px; 
    border-radius: 999px; 
    cursor: pointer; 
    font-weight: 500; 
    color: var(--text-soft); 
}

.qe-toggle input { 
    accent-color: var(--navy); 
}

.qe-toggle label:has(input:checked) { 
    background: #FFFFFF; 
    color: var(--navy); 
}

.ql { 
    display: flex; 
    flex-direction: column; 
    gap: 28px; 
    padding-block: 40px 72px; 
}

.ql-head { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    gap: 20px; 
    flex-wrap: wrap; 
}

.ql-breadcrumb { 
    font-size: 14px; 
    color: var(--text-muted); 
}

.ql-breadcrumb a { 
    color: var(--text-muted); 
}

.ql-breadcrumb a:hover { 
    color: var(--navy); 
    text-decoration: underline; 
}

.ql-title { 
    margin-top: 6px; 
    font-family: var(--font-display); 
    font-size: clamp(32px, 3.4vw, 42px); 
    font-weight: 500; 
    color: var(--navy); 
    letter-spacing: -0.02em; 
}

.ql-plus { 
    margin-right: 8px; 
    font-size: 22px; 
    line-height: 1; 
}
 
.ql-alert { 
    padding: 14px 18px; 
    border-radius: 14px; 
    font-size: 15px; 
}

.ql-alert--success { 
    background: var(--green-bg); 
    color: var(--green); 
}

.ql-alert--error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.ql-kpis { 
    display: grid; 
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 18px; 
}

.ql-kpi { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    padding: 20px 22px; 
    border-radius: 18px; 
    background: var(--gray-bg); 
}

.ql-kpi__label { 
    font-size: 14px; 
    color: var(--text-soft); 
}

.ql-kpi__value { 
    font-family: var(--font-display); 
    font-size: 28px; 
    font-weight: 700; 
    color: var(--navy); 
}

.ql-kpi__sub { 
    font-size: 13px; 
    color: var(--text-muted); 
}

.ql-card { 
    border: 1px solid var(--gray-line); 
    border-radius: 20px; 
    background: #FFFFFF; 
}

.ql-toolbar { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
    padding: 18px 20px; 
    border-bottom: 1px solid var(--gray-line); 
}
 
.ql-tabs { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 4px; 
}

.ql-tab { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    min-height: 44px; 
    padding: 0 16px; 
    border-radius: 999px; 
    font-size: 15px; 
    color: var(--text-soft); 
}

.ql-tab:hover { 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.ql-tab__count { 
    padding: 1px 8px; 
    border-radius: 999px; 
    background: #EEF1F4; 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--text-soft); 
}

.ql-tab.is-active { 
    background: var(--navy); 
    color: #FFFFFF; 
    font-weight: 600; 
}

.ql-tab.is-active .ql-tab__count { 
    background: #274A73; 
    color: #FFFFFF; 
}

.ql-filters { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.ql-search { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    width: min(340px, 100%); 
    min-height: 46px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    color: var(--navy); 
    background: #FFFFFF; 
}

.ql-search:focus-within { 
    border-color: var(--navy); 
    outline: 3px solid #F9D3AE; 
}

.ql-search input { 
    flex: 1 1 auto; 
    min-width: 0; 
    border: 0; 
    outline: 0; 
    font: inherit; 
    font-size: 15px; 
    color: var(--text); 
    background: transparent; 
}

.ql-select { 
    min-height: 46px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    font: inherit; 
    font-size: 15px; 
    color: var(--text); 
    background: #FFFFFF; 
}

.ql-select:focus { 
    border-color: var(--navy); 
    outline: 3px solid #F9D3AE; 
}

.ql-table-wrap { 
    overflow-x: auto; 
}

.ql-table { 
    width: 100%; 
    min-width: 820px; 
    border-collapse: collapse; 
    font-size: 15px; 
}

.ql-table th { 
    padding: 12px 20px; 
    text-align: left; 
    font-size: 13px; 
    font-weight: 500; 
    color: var(--text-muted); 
    background: #FAFBFC; 
    border-bottom: 1px solid var(--gray-line); 
    white-space: nowrap; 
}

.ql-table td { 
    padding: 14px 20px; 
    border-bottom: 1px solid #EEF1F4; 
    vertical-align: middle; 
}

.ql-table tbody tr:last-child td { 
    border-bottom: 0; 
}

.ql-table tbody tr:hover { 
    background: #FAFBFC; 
}

.ql-right { 
    text-align: right !important; 
}

.ql-quote-title { 
    display: block; 
    font-weight: 500; 
    color: var(--text); 
}

a.ql-quote-title:hover { 
    color: var(--navy); 
    text-decoration: underline; 
    text-underline-offset: 3px; 
}

.ql-meta { 
    display: block; 
    font-size: 13px; 
    color: var(--text-muted); 
}

.ql-info { 
    margin-top: 4px; 
}

.ql-info.is-warning { 
    color: var(--orange-text); 
    font-weight: 600; 
}

.ql-info.is-danger { 
    color: #B42318; 
    font-weight: 600; 
}

.ql-date { 
    color: var(--text-soft); 
    white-space: nowrap; 
}

.ql-amount { 
    font-weight: 600; 
    white-space: nowrap; 
}
 
.badge { 
    display: inline-flex; 
    align-items: center; 
    padding: 4px 11px; 
    border-radius: 999px; 
    font-size: 13px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.badge--draft { 
    background: #EEF1F4; 
    color: var(--text-soft); 
}

.badge--sent { 
    background: #E1ECF7; 
    color: var(--navy); 
}

.badge--signed { 
    background: var(--green-bg); 
    color: var(--green); 
}

.badge--refused { 
    background: #FDECEA; 
    color: #B42318; 
}

.badge--expired { 
    background: #FDF1E4; 
    color: #8A4A08; 
}

.ql-actions { 
    white-space: nowrap; 
}

.ql-inline { 
    display: inline; 
}

.ql-action {
    display: inline-flex; 
    align-items: center; 
    min-height: 36px; 
    padding: 0 14px;
    border: 1.5px solid #D5DCE4; 
    border-radius: 999px; 
    background: #FFFFFF;
    font-family: inherit; 
    font-size: 14px; 
    font-weight: 500; 
    color: var(--navy); 
    cursor: pointer;
}

.ql-action:hover:not(:disabled) { 
    border-color: var(--navy); 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.ql-action:disabled { 
    color: #8A97A6; 
    cursor: not-allowed; 
}
 
.ql-more { 
    position: relative; 
    display: inline-block; 
    margin-left: 6px; 
    vertical-align: middle; 
}

.ql-more summary {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 36px; 
    height: 36px;
    border-radius: 999px; 
    color: var(--text-muted); 
    font-size: 18px; 
    cursor: pointer; 
    list-style: none;
}

.ql-more summary::-webkit-details-marker { 
    display: none; 
}

.ql-more summary:hover, .ql-more[open] summary { 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.ql-more__menu {
    position: absolute; 
    right: 0; 
    top: calc(100% + 6px); 
    z-index: 10; 
    min-width: 220px; 
    padding: 6px;
    border: 1px solid var(--gray-line); 
    border-radius: 14px; 
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(20, 40, 63, .16); 
    text-align: left;
}

.ql-more__item {
    display: flex; 
    align-items: center; 
    gap: 6px; 
    width: 100%; 
    min-height: 42px; 
    padding: 0 12px;
    border: 0; 
    border-radius: 9px; 
    background: transparent;
    font-family: inherit; 
    font-size: 15px; 
    color: var(--text); 
    cursor: pointer; 
    text-align: left;
}

.ql-more__item:hover:not(:disabled) { 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.ql-more__item:disabled { 
    color: #8A97A6; 
    cursor: not-allowed; 
}

.ql-more__item--danger { 
    color: #B42318; 
}

.ql-more__item--danger:hover { 
    background: #FDECEA !important; 
    color: #B42318 !important; 
}

.ql-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
    flex-wrap: wrap; 
    padding: 16px 20px; 
    border-top: 1px solid var(--gray-line); 
    font-size: 14px; 
    color: var(--text-muted); 
}

.ql-pages { 
    display: flex; 
    gap: 6px; 
}

.ql-page { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-width: 40px; 
    height: 40px; 
    border-radius: 10px; 
    font-size: 15px; 
    color: var(--text-soft); 
}

.ql-page:hover { 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.ql-page.is-active { 
    background: var(--navy); 
    color: #FFFFFF; 
    font-weight: 600; 
}

.ql-page.is-disabled { 
    color: #C5CFDA; 
}

.ql-empty { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    padding: 56px 24px; 
    text-align: center; 
    color: var(--text-soft); 
}

.ql-empty__title { 
    font-family: var(--font-display); 
    font-size: 22px; 
    color: var(--navy); 
}

.ql-empty .btn { 
    margin-top: 8px; 
}

.card__link { 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--orange-text); 
}

.co-page { 
    background: #FAFBFC; 
}

.co { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    padding-block: 40px 48px; 
}

.co-breadcrumb { 
    font-size: 14px; 
    color: var(--text-muted); 
}

.co-breadcrumb a { 
    color: var(--text-muted); 
}

.co-breadcrumb a:hover { 
    color: var(--navy); 
    text-decoration: underline; 
}

.co-title { 
    margin-top: 6px; 
    font-family: var(--font-display); 
    font-size: clamp(32px, 3.4vw, 42px); 
    font-weight: 500; 
    color: var(--navy); 
    letter-spacing: -0.02em; 
}

.co-alert { 
    padding: 14px 18px; 
    border-radius: 14px; 
    font-size: 15px; 
}

.co-alert ul { 
    margin: 6px 0 0 18px; 
    padding: 0; 
    list-style: disc; 
}

.co-alert--success { 
    background: var(--green-bg); 
    color: var(--green); 
}

.co-alert--error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.co-alert--info { 
    background: #E1ECF7; 
    color: var(--navy); 
}

.co-progress { 
    display: flex; 
    align-items: center; 
    gap: 24px; 
    padding: 20px 24px; 
    border: 1px solid #F6C79A; 
    border-radius: 18px; 
    background: #FFF8F1; 
}

.co-progress__body { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.co-progress__title { 
    font-weight: 600; 
    color: var(--navy); 
}

.co-progress__bar { 
    height: 8px; 
    border-radius: 999px; 
    background: #F6DEC4; 
    overflow: hidden; 
}

.co-progress__bar span { 
    display: block; 
    height: 100%; 
    border-radius: 999px; 
    background: var(--accent); 
}

.co-progress__list { 
    font-size: 14px; 
    color: var(--text-soft); 
}

.co-progress__list a { 
    color: var(--orange-text); 
    font-weight: 500; 
    text-decoration: underline; 
    text-underline-offset: 2px; 
}

.co-layout { 
    display: grid; 
    grid-template-columns: 250px minmax(0, 1fr); 
    gap: 28px; 
    align-items: start; 
}

.co-main { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    min-width: 0; 
}

.co-main > form { 
    display: contents; 
}

.co-fieldset { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    min-width: 0; 
    margin: 0; 
    padding: 0; 
    border: 0; 
}

.co-nav { 
    position: sticky; 
    top: 24px; 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    padding: 10px; 
    border: 1px solid var(--gray-line); 
    border-radius: 18px; 
    background: #FFFFFF; 
}

.co-nav__item { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    min-height: 44px; 
    padding: 0 14px; 
    border-radius: 12px; 
    font-size: 15px; 
    color: var(--text-soft); 
}

.co-nav__item:hover { 
    background: var(--gray-bg); 
    color: var(--navy); 
}

.co-dot { 
    display: inline-block; 
    width: 9px; 
    height: 9px; 
    border-radius: 50%; 
    flex-shrink: 0; 
}

.co-dot--ok { 
    background: #2E9E6A; 
}

.co-dot--warn { 
    background: var(--accent); 
}

.co-dot--none { 
    border: 1.5px solid #C5CFDA; 
}

html { 
    scroll-padding-top: 24px; 
}

.card { 
    border: 1px solid var(--gray-line); 
    border-radius: 20px; 
    background: #FFFFFF; 
    scroll-margin-top: 24px; 
}

.card--warning { 
    border-color: #F6C79A; 
}

.card__head { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 16px; 
    padding: 20px 24px; 
    border-bottom: 1px solid var(--gray-line); 
}

.card__title { 
    font-family: var(--font-display); 
    font-size: 22px; 
    font-weight: 500; 
    color: var(--navy); 
}

.card__sub { 
    margin-top: 4px; 
    font-size: 14px; 
    color: var(--text-muted); 
}

.card__link { 
    padding: 4px 0 0; 
    border: 0; 
    background: none; 
    font-family: inherit; 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--orange-text); 
    white-space: nowrap; 
    cursor: pointer; 
}

.card__link:hover { 
    color: var(--navy); 
    text-decoration: underline; 
}

.co-grid { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 18px; 
    padding: 20px 24px 24px; 
}

.co-grid--3 { 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    padding-bottom: 6px; 
}

.co-grid--top0 { 
    padding-top: 12px; 
}

.co-span-2 { 
    grid-column: span 2; 
}

.field { 
    display: flex; 
    flex-direction: column; 
    gap: 7px; 
    min-width: 0; 
}

.field label, .field__label { 
    font-size: 14px; 
    font-weight: 500; 
    color: var(--text); 
}

.field input:not([type="checkbox"]):not([type="hidden"]):not([type="file"]), .field select, .field textarea {
    width: 100%; 
    min-height: 48px; 
    padding: 0 14px; 
    box-sizing: border-box;
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px;
    font-family: inherit; 
    font-size: 15px; 
    color: var(--text); 
    background: #FFFFFF;
}

.field textarea { 
    padding: 12px 14px; 
    line-height: 1.5; 
    resize: vertical; 
}

.field input:focus, .field select:focus, .field textarea:focus { 
    outline: 3px solid #F9D3AE; 
    outline-offset: 0; 
    border-color: var(--navy); 
}

.co-fieldset:disabled input, .co-fieldset:disabled select, .co-fieldset:disabled textarea { 
    background: var(--gray-bg); 
    color: var(--text-soft); 
}

.hint { 
    font-size: 13px; 
    color: var(--text-muted); 
}

.field.is-missing input, .field.is-missing select { 
    border-color: #E8A39B; 
    background: #FFFBFA; 
}

.field.is-missing::after { 
    content: 'Obligatoire pour envoyer vos devis'; 
    font-size: 13px; 
    font-weight: 500; 
    color: #B42318; 
}

.field.is-error input, .field.is-error select { 
    border-color: #B42318; 
}

.field.is-filled input, .field.is-filled select { 
    border-color: #2E9E6A; 
    background: #F3FBF6; 
}

.co-readonly { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    min-height: 48px; 
    padding: 0 14px; 
    border: 1.5px solid #E3E8EE; 
    border-radius: 12px; 
    background: var(--gray-bg); 
    font-size: 15px; 
    color: var(--text); 
}

.co-readonly .co-tag { 
    margin-left: auto; 
}

.co-input-action { 
    display: flex; 
    gap: 8px; 
}

.co-input-action input { 
    flex: 1 1 auto; 
}

.co-switch { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    min-height: 48px; 
    font-size: 15px; 
    font-weight: 400 !important; 
    cursor: pointer; 
}

.co-switch input[type="checkbox"] { 
    position: absolute; 
    opacity: 0; 
    width: 1px; 
    height: 1px; 
}

.co-switch__track { 
    position: relative; 
    width: 44px; 
    height: 26px; 
    flex-shrink: 0; 
    border-radius: 999px; 
    background: #C5CFDA; 
    transition: background .15s; 
}

.co-switch__track::after { 
    content: ''; 
    position: absolute; 
    top: 3px; 
    left: 3px; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: #FFFFFF; 
    transition: transform .15s; 
}

.co-switch input:checked + .co-switch__track { 
    background: var(--navy); 
}

.co-switch input:checked + .co-switch__track::after { 
    transform: translateX(18px); 
}

.co-switch input:focus-visible + .co-switch__track { 
    outline: 3px solid #F9D3AE; 
    outline-offset: 2px; 
}

.co-tag { 
    display: inline-flex; 
    align-items: center; 
    padding: 3px 10px; 
    border-radius: 999px; 
    font-size: 12px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.co-tag--ok { 
    background: var(--green-bg); 
    color: var(--green); 
}

.co-tag--warn { 
    background: #FDEEDC; 
    color: #8A4A08; 
}

.co-tag--navy { 
    background: #E1ECF7; 
    color: var(--navy); 
}

.co-tag--gray { 
    background: #EEF1F4; 
    color: var(--text-soft); 
}

.co-mini-btn {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 40px; 
    padding: 0 14px;
    border: 1.5px solid #D5DCE4; 
    border-radius: 999px; 
    background: #FFFFFF;
    font-family: inherit; 
    font-size: 14px; 
    font-weight: 500; 
    color: var(--navy); 
    white-space: nowrap; 
    cursor: pointer;
}

.co-mini-btn:hover:not(:disabled) { 
    border-color: var(--navy); 
    background: var(--gray-bg); 
}

.co-mini-btn:disabled { 
    opacity: .55; 
    cursor: not-allowed; 
}

.co-mini-btn--primary { 
    border-color: var(--navy); 
    background: var(--navy); 
    color: #FFFFFF; 
    font-weight: 600; 
}

.co-mini-btn--primary:hover:not(:disabled) { 
    background: var(--navy-dark); 
}

.co-mini-btn--danger { 
    border-color: transparent; 
    color: #B42318; 
}

.co-mini-btn--danger:hover { 
    background: #FDECEA !important; 
    border-color: transparent !important; 
}

.co-lookup-msg { 
    margin: 16px 24px 0; 
    padding: 12px 16px; 
    border-radius: 12px; 
    background: var(--gray-bg); 
    font-size: 14px; 
    color: var(--text-soft); 
}

.co-lookup-msg.is-success { 
    background: var(--green-bg); 
    color: var(--green); 
}

.co-lookup-msg.is-error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.co-logo { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); 
    gap: 24px; 
    padding: 20px 24px 24px; 
}

.co-dropzone { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    padding: 24px; 
    border: 1.5px dashed #C5CFDA; 
    border-radius: 16px; 
    background: #FAFBFC; 
    text-align: center; 
}

.co-logo-img { 
    max-width: 180px; 
    max-height: 90px; 
    object-fit: contain; 
}

.co-logo-placeholder { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 120px; 
    height: 72px; 
    border-radius: 12px; 
    background: #EEF1F4; 
    color: var(--text-muted); 
    font-size: 14px; 
}

.co-logo-actions { 
    display: flex; 
    gap: 8px; 
    margin-top: 6px; 
}

.co-preview { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    padding: 16px; 
    border-radius: 16px; 
    background: #EEF1F4; 
}

.co-preview__page { 
    padding: 18px; 
    background: #FFFFFF; 
    box-shadow: 0 4px 14px rgba(20, 40, 63, .12); 
}

.co-preview__top { 
    display: flex; 
    justify-content: space-between; 
    gap: 16px; 
}

.co-preview__logo { 
    max-width: 90px; 
    max-height: 40px; 
    object-fit: contain; 
}

.co-preview__name { 
    margin-top: 6px; 
    font-size: 14px; 
    font-weight: 700; 
    color: var(--navy); 
}

.co-preview__small { 
    font-size: 10px; 
    line-height: 1.5; 
    color: var(--text-muted); 
}

.co-preview__box { 
    display: flex; 
    flex-direction: column; 
    width: 130px; 
    height: fit-content; 
    padding: 10px 12px; 
    background: var(--navy); 
    color: #FFFFFF; 
    font-size: 10px; 
}

.co-preview__box strong { 
    font-size: 16px; 
    letter-spacing: 1px; 
}

.co-preview__box span { 
    color: #F6B67A; 
}

.co-preview__lines { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    margin-top: 14px; 
}

.co-preview__lines span { 
    height: 8px; 
    border-radius: 2px; 
    background: #EEF1F4; 
}

.co-preview__lines span:last-child { 
    width: 70%; 
}

.co-preview__legal { 
    margin-top: 14px; 
    padding-top: 6px; 
    border-top: 1px solid var(--gray-line); 
    font-size: 8px; 
    color: var(--text-muted); 
}

.co-user { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    padding: 16px 24px; 
    border-bottom: 1px solid #EEF1F4; 
}

.co-user:last-child { 
    border-bottom: 0; 
}

.co-user__body { 
    flex-grow: 1; 
    min-width: 0; 
}

.co-user__name { 
    font-weight: 500; 
}

.co-avatar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px; 
    height: 40px; 
    flex-shrink: 0; 
    border-radius: 50%; 
    background: var(--navy); 
    color: #FFFFFF; 
    font-size: 14px; 
    font-weight: 600; 
}

.co-avatar--alt { 
    background: #E1ECF7; 
    color: var(--navy); 
}

.co-savebar { 
    position: sticky; 
    bottom: 0; 
    z-index: 20; 
    background: #FFFFFF; 
    border-top: 1px solid var(--gray-line); 
    box-shadow: 0 -6px 20px rgba(20, 40, 63, .08); 
    padding-bottom: env(safe-area-inset-bottom, 0px); 
}

.co-savebar__inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
    padding-block: 14px; 
}

.co-savebar__state { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 15px; 
    color: var(--text-soft); 
}

.co-savebar__actions { 
    display: flex; 
    gap: 10px; 
}

.co-savebar .btn { 
    min-height: 48px; 
}

.btn--ghost { 
    background: transparent; 
    color: var(--navy); 
    font-weight: 500; 
}

.btn--ghost:hover { 
    background: var(--gray-bg); 
}

.inv-flash { 
    margin: 16px 24px 0; 
}

.inv-invite { 
    padding: 20px 24px; 
    border-bottom: 1px solid var(--gray-line); 
    background: #FAFBFC; 
}

.inv-invite__btn { 
    min-height: 48px; 
    padding: 0 20px; 
}

.inv-actions { 
    display: flex; 
    gap: 6px; 
    min-width: 120px; 
    justify-content: flex-end; 
}

.inv-actions form { 
    display: inline; 
}

.inv-avatar--pending { 
    background: #FFFFFF; 
    border: 1.5px dashed #C5CFDA; 
    color: #8A97A6; 
}

.inv-expired { 
    color: #B42318; 
    font-weight: 500; 
}

.field__error { 
    font-size: 13px; 
    font-weight: 500; 
    color: #B42318; 
}

.inv-page { 
    display: flex; 
    justify-content: center; 
    padding: 56px 20px 72px; 
    background: #FAFBFC; 
    min-height: 60vh; 
}

.inv-card { 
    width: 100%; 
    max-width: 560px; 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
    padding: 36px; 
    border: 1px solid var(--gray-line); 
    border-radius: 22px; 
    background: #FFFFFF; 
}

.inv-kicker { 
    font-size: 13px; 
    font-weight: 600; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    color: var(--orange-text); 
}

.inv-title { 
    font-family: var(--font-display); 
    font-size: clamp(28px, 3vw, 36px); 
    line-height: 1.15; 
    font-weight: 500; 
    color: var(--navy); 
}

.inv-lead { 
    font-size: 16px; 
    line-height: 1.6; 
    color: var(--text-soft); 
}

.inv-form { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    margin-top: 4px; 
}

.inv-row { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 16px; 
}

.inv-check { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-size: 15px; 
    line-height: 1.5; 
    color: var(--text-soft); 
    cursor: pointer; 
}

.inv-check input { 
    flex-shrink: 0; 
    width: 20px; 
    height: 20px; 
    margin: 2px 0 0; 
    accent-color: var(--navy); 
}

.inv-check a { 
    color: var(--orange-text); 
    font-weight: 500; 
}

.inv-submit { 
    width: 100%; 
    margin-top: 4px; 
}

.inv-card > .btn { 
    align-self: flex-start; 
}

.qf-page { 
    background: #FAFBFC; 
    padding: 32px 0 56px; 
}

.qf-narrow { 
    width: min(720px, calc(100% - 32px)); 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.qf-wide { 
    display: flex; 
    flex-direction: column; 
    gap: 22px; 
}

.qf-back { 
    font-size: 14px; 
    font-weight: 500; 
    color: #5B6B7D; 
}

.qf-muted { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.qf-muted a { 
    color: #5B6B7D; 
}

.qf-hint { 
    display: block; 
    font-size: 13px; 
    line-height: 1.5; 
    color: #5B6B7D; 
}

.qf-title { 
    margin: 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 26px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.qf-title--big { 
    font-size: clamp(28px, 3vw, 36px); 
}

.qf-h2 { 
    margin: 0 0 18px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 21px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.qf-h2--small { 
    margin-bottom: 10px; 
    font-size: 18px; 
}

.qf-card { 
    border: 1px solid #E3E8EE; 
    border-radius: 20px; 
    background: #FFFFFF; 
    overflow: hidden; 
}

.qf-card--pad { 
    padding: 22px 24px; 
    overflow: visible; 
}

.qf-card--success { 
    border-color: #A9DCC0; 
    background: #F3FBF6; 
}

.qf-card--muted { 
    background: #FAFBFC; 
}

.qf-card__head { 
    padding: 22px 28px 16px; 
    border-bottom: 1px solid #E3E8EE; 
}

.qf-checks { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px 22px; 
    padding: 14px 28px; 
    background: #F3FBF6; 
    border-bottom: 1px solid #E3E8EE; 
}

.qf-checks.has-blocker { 
    background: #FFF8F1; 
}

.qf-check { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 14px; 
}

.qf-check i { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    font-style: normal; 
    font-size: 12px; 
    font-weight: 700; 
}

.qf-check.is-ok { 
    color: #1B5E3F; 
}

.qf-check.is-ok i { 
    background: #D8F0E4; 
}

.qf-check.is-ko { 
    color: #B42318; 
    font-weight: 500; 
}

.qf-check.is-ko i { 
    background: #FDECEA; 
}

.qf-alert { 
    margin: 0; 
    padding: 12px 16px; 
    border-radius: 12px; 
    font-size: 14px; 
    line-height: 1.5; 
}

.qf-alert p { 
    margin: 0; 
}

.qf-alert--success { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.qf-alert--error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.qf-alert--warning { 
    background: #FDEEDC; 
    color: #6E3B06; 
}

.qf-alert--info { 
    background: #E1ECF7; 
    color: #1E3A5F; 
}

.qf-card > .qf-alert { 
    margin: 16px 28px 0; 
}

.qf-form fieldset { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    margin: 0; 
    padding: 22px 28px; 
    border: 0; 
    min-width: 0; 
}

.qf-form fieldset:disabled { 
    opacity: .6; 
}

.qf-field { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
}

.qf-field label { 
    font-size: 14px; 
    font-weight: 500; 
    color: #1B2A3D; 
}

.qf-field input, .qf-field textarea { 
    width: 100%; 
    min-height: 46px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    box-sizing: border-box; 
    font: inherit; 
    font-size: 15px; 
    color: #1B2A3D; 
    background: #FFFFFF; 
}

.qf-field textarea { 
    padding: 12px 14px; 
    line-height: 1.55; 
    resize: vertical; 
}

.qf-field input:focus, .qf-field textarea:focus { 
    outline: 3px solid #F9D3AE; 
    border-color: #1E3A5F; 
}

.qf-checkbox { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-top: -6px; 
    font-size: 14px; 
    color: #3D4E61; 
}

.qf-checkbox input { 
    width: 18px; 
    height: 18px; 
    accent-color: #1E3A5F; 
}

.qf-attachment { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 12px 14px; 
    border: 1px solid #E3E8EE; 
    border-radius: 12px; 
    background: #FAFBFC; 
}

.qf-attachment div { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
}

.qf-attachment__icon { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 36px; 
    height: 44px; 
    border-radius: 6px; 
    background: #FDECEA; 
    color: #B42318; 
    font-size: 11px; 
    font-weight: 700; 
}

.qf-link { 
    border: 0; 
    background: none; 
    padding: 0; 
    font: inherit; 
    font-size: 14px; 
    font-weight: 600; 
    color: #B85C0A; 
    cursor: pointer; 
}

.qf-actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: 12px; 
    padding: 16px 28px; 
    border-top: 1px solid #E3E8EE; 
    background: #FAFBFC; 
}

.qf-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 46px; 
    padding: 0 22px; 
    border: 1.5px solid transparent; 
    border-radius: 999px; 
    background: transparent; 
    font: inherit; 
    font-size: 15px; 
    font-weight: 500; 
    color: #1E3A5F; 
    white-space: nowrap; 
    cursor: pointer; 
}

.qf-btn--accent { 
    background: #F28C28; 
    color: #1E3A5F; 
    font-weight: 600; 
}

.qf-btn--accent:hover { 
    background: #E07A14; 
}

.qf-btn--accent:disabled { 
    background: #F6C79A; 
    cursor: not-allowed; 
}

.qf-btn--outline { 
    border-color: #D5DCE4; 
    background: #FFFFFF; 
}

.qf-btn--outline:hover:not(:disabled) { 
    border-color: #1E3A5F; 
}

.qf-btn--outline:disabled { 
    color: #8A97A6; 
    cursor: not-allowed; 
}

.qf-btn--ghost:hover { 
    background: #F4F6F8; 
}

.qf-btn--small { 
    min-height: 40px; 
    padding: 0 16px; 
    font-size: 14px; 
}

.qf-head { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    gap: 20px; 
    flex-wrap: wrap; 
}

.qf-head__title { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    flex-wrap: wrap; 
    margin: 4px 0; 
}

.qf-head__actions { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.qf-head__actions form { 
    display: inline; 
}

.qf-badge { 
    display: inline-flex; 
    padding: 4px 12px; 
    border-radius: 999px; 
    font-size: 13px; 
    font-weight: 600; 
}

.qf-badge--sent { 
    background: #E1ECF7; 
    color: #1E3A5F; 
}

.qf-badge--signed { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.qf-badge--refused { 
    background: #FDECEA; 
    color: #B42318; 
}

.qf-badge--expired { 
    background: #FDF1E4; 
    color: #8A4A08; 
}

.qf-grid { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 380px; 
    gap: 24px; 
    align-items: start; 
}

.qf-side { 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
}

.qf-timeline { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}

.qf-step { 
    position: relative; 
    padding: 0 0 22px 32px; 
}

.qf-step::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 3px; 
    width: 14px; 
    height: 14px; 
    border-radius: 50%; 
    background: #2E9E6A; 
}

.qf-step::after { 
    content: ''; 
    position: absolute; 
    left: 6px; 
    top: 20px; 
    bottom: 0; 
    width: 2px; 
    background: #E3E8EE; 
}

.qf-step:last-child { 
    padding-bottom: 0; 
}

.qf-step:last-child::after { 
    display: none; 
}

.qf-step strong { 
    display: block; 
    font-weight: 600; 
}

.qf-step span { 
    display: block; 
    font-size: 13px; 
    color: #5B6B7D; 
}

.qf-step blockquote { 
    margin: 8px 0 0; 
    padding: 10px 14px; 
    border-left: 3px solid #F28C28; 
    border-radius: 0 8px 8px 0; 
    background: #FFF8F1; 
    font-size: 14px; 
    color: #3D4E61; 
}

.qf-step--viewed::before { 
    background: #4A8BD6; 
}

.qf-step--reminded::before { 
    background: #8A97A6; 
}

.qf-step--change_requested::before { 
    background: #F28C28; 
}

.qf-step--refused::before { 
    background: #B42318; 
}

.qf-step--waiting::before { 
    background: #FFFFFF; 
    border: 2px solid #F28C28; 
    box-sizing: border-box; 
}

.qf-step--waiting strong { 
    color: #B85C0A; 
}

.qf-step--expired::before { 
    background: #C5CFDA; 
}

.qf-toggle { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 8px; 
    padding: 0; 
    border: 0; 
    background: none; 
    font: inherit; 
    font-size: 14px; 
    color: #1B2A3D; 
    text-align: left; 
    cursor: pointer; 
}

.qf-switch { 
    position: relative; 
    width: 40px; 
    height: 22px; 
    flex-shrink: 0; 
    border-radius: 999px; 
    background: #C5CFDA; 
}

.qf-switch span { 
    position: absolute; 
    top: 3px; 
    left: 3px; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    background: #FFFFFF; 
    transition: left .15s; 
}

.qf-switch.is-on { 
    background: #1E3A5F; 
}

.qf-switch.is-on span { 
    left: 21px; 
}

.qf-copy { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 8px; 
    padding: 0 12px; 
    min-height: 44px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
}

.qf-copy input { 
    flex: 1 1 auto; 
    min-width: 0; 
    border: 0; 
    outline: 0; 
    font: inherit; 
    font-size: 13px; 
    color: #3D4E61; 
    background: transparent; 
}

.qf-hash code { 
    font-size: 11px; 
    word-break: break-all; 
    color: #3D4E61; 
}

:focus-visible { 
    outline: 3px solid #F9D3AE; 
    outline-offset: 2px; 
}

.qp-top { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
    flex-wrap: wrap; 
    padding: 16px max(20px, calc((100% - 1216px) / 2)); 
    background: #FFFFFF; 
    border-bottom: 1px solid #E3E8EE; 
}

.qp-top__brand { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
}

.qp-top__logo { 
    max-width: 120px; 
    max-height: 48px; 
    object-fit: contain; 
}

.qp-top__initials { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 46px; 
    height: 46px; 
    border-radius: 10px; 
    background: #1E3A5F; 
    color: #F28C28; 
    font-family: 'Fraunces', Georgia, serif; 
    font-size: 18px; 
    font-weight: 700; 
}

.qp-top__name { 
    margin: 0; 
    font-size: 18px; 
    font-weight: 700; 
    color: #1E3A5F; 
}

.qp-main { 
    padding: 32px max(20px, calc((100% - 1216px) / 2)) 48px; 
}

.qp-muted { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.qp-fine { 
    margin: 10px 0 0; 
    font-size: 12px; 
    line-height: 1.5; 
    color: #5B6B7D; 
}

.qp-title { 
    margin: 4px 0 18px; 
    font-family: 'Fraunces', Georgia, serif; 
    font-size: clamp(26px, 3vw, 34px); 
    font-weight: 500; 
    line-height: 1.15; 
    color: #1E3A5F; 
}

.qp-title--small { 
    font-size: 26px; 
    margin-bottom: 6px; 
}

.qp-h2 { 
    margin: 0 0 14px; 
    font-family: 'Fraunces', Georgia, serif; 
    font-size: 21px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.qp-lead { 
    margin: 0; 
    font-size: 16px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.qp-label { 
    margin: 0 0 4px; 
    font-size: 11px; 
    font-weight: 700; 
    letter-spacing: .6px; 
    text-transform: uppercase; 
    color: #B85C0A; 
}

.qp-back { 
    font-size: 14px; 
    font-weight: 500; 
    color: #5B6B7D; 
    text-decoration: none; 
}

.qp-powered { 
    margin: 32px 0 0; 
    font-size: 12px; 
    color: #8A97A6; 
    text-align: center; 
}

.qp-powered strong { 
    color: #1E3A5F; 
}

.qp-powered span { 
    color: #B85C0A; 
}

.qp-layout { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 400px; 
    gap: 32px; 
    align-items: start; 
}

.qp-narrow { 
    width: min(720px, 100%); 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
}

.qp-side { 
    position: sticky; 
    top: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.qp-card { 
    border: 1px solid #E3E8EE; 
    border-radius: 20px; 
    background: #FFFFFF; 
}

.qp-card--pad { 
    padding: 22px 24px; 
}

.qp-card--sign { 
    border: 2px solid #1E3A5F; 
}

.qp-card--info { 
    background: #F4F8FC; 
    border-color: #CFE0F2; 
}

.qp-doc { 
    padding: 28px 30px; 
    border-radius: 8px; 
    background: #FFFFFF; 
    box-shadow: 0 6px 24px rgba(20, 40, 63, .10); 
}

.qp-doc__parties { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 14px; 
    margin-bottom: 18px; 
    font-size: 14px; 
}

.qp-doc__parties > div { 
    padding: 12px 14px; 
    border: 1px solid #D5DCE4; 
    border-radius: 8px; 
}

.qp-table-wrap { 
    overflow-x: auto; 
}

.qp-table { 
    width: 100%; 
    min-width: 520px; 
    border-collapse: collapse; 
    font-size: 14px; 
}

.qp-table th { 
    padding: 9px 8px; 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-size: 12px; 
    text-align: left; 
}

.qp-table td { 
    padding: 9px 8px; 
    border-bottom: 1px solid #EEF1F4; 
    vertical-align: top; 
}

.qp-r { 
    text-align: right !important; 
    white-space: nowrap; 
}

.qp-section td { 
    background: #F4F6F8; 
    font-weight: 700; 
    color: #1E3A5F; 
}

.qp-text td { 
    font-style: italic; 
    color: #3D4E61; 
}

.qp-desc { 
    display: block; 
    font-size: 12px; 
    color: #5B6B7D; 
}

.qp-totals { 
    margin: 14px 0 0 auto; 
    width: min(300px, 100%); 
    font-size: 14px; 
}

.qp-totals div { 
    display: flex; 
    justify-content: space-between; 
    gap: 12px; 
    padding: 5px 8px; 
}

.qp-totals .is-strong { 
    font-weight: 700; 
    border-top: 1px solid #D5DCE4; 
}

.qp-totals .is-total { 
    margin-top: 4px; 
    padding: 10px 8px; 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-size: 16px; 
    font-weight: 700; 
}

.qp-conditions { 
    margin-top: 18px; 
    padding-top: 14px; 
    border-top: 1px solid #EEF1F4; 
    font-size: 14px; 
    color: #3D4E61; 
}

.qp-conditions p { 
    margin: 0 0 8px; 
}

.qp-sum { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    gap: 12px; 
}

.qp-sum--line { 
    margin: 10px 0; 
    padding-top: 10px; 
    border-top: 1px solid #EEF1F4; 
    font-size: 14px; 
}

.qp-big { 
    font-family: 'Fraunces', Georgia, serif; 
    font-size: 30px; 
    color: #1E3A5F; 
}

.qp-orange { 
    color: #B85C0A; 
}

.qp-field { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    margin-bottom: 14px; 
}

.qp-field label { 
    font-size: 14px; 
    font-weight: 500; 
}

.qp-field input, .qp-field textarea { 
    width: 100%; 
    min-height: 46px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    font: inherit; 
    font-size: 15px; 
    color: #1B2A3D; 
}

.qp-field textarea { 
    padding: 12px 14px; 
    resize: vertical; 
}

.qp-field input:focus, .qp-field textarea:focus { 
    outline: 3px solid #F9D3AE; 
    border-color: #1E3A5F; 
}

.qp-check { display: flex; 
    gap: 10px; 
    margin-bottom: 16px; 
    font-size: 14px; 
    line-height: 1.5; 
    cursor: pointer; 
}

.qp-check input { 
    flex-shrink: 0; 
    width: 20px; 
    height: 20px; 
    margin: 1px 0 0; 
    accent-color: #1E3A5F; 
}

.qp-form { 
    margin-top: 14px; 
}

.qp-reasons { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
    margin: 0 0 16px; 
    padding: 0; 
    border: 0; 
}

.qp-reasons legend { 
    margin-bottom: 10px; 
    font-size: 14px; 
    font-weight: 500; 
}

.qp-reason { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    min-height: 48px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    cursor: pointer; 
}

.qp-reason:has(input:checked) { 
    border-color: #1E3A5F; 
    background: #F4F8FC; 
}

.qp-reason input { 
    accent-color: #1E3A5F; 
}

.qp-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 48px; 
    padding: 0 22px; 
    border: 1.5px solid transparent; 
    border-radius: 999px; 
    background: transparent; 
    font: inherit; 
    font-size: 15px; 
    font-weight: 600; 
    color: #1E3A5F; 
    text-decoration: none; 
    cursor: pointer; 
    white-space: nowrap; 
}

.qp-btn--primary { 
    background: #1E3A5F; 
    color: #FFFFFF; 
}

.qp-btn--primary:hover { 
    background: #14283F; 
}

.qp-btn--primary:disabled { 
    background: #8A97A6; 
}

.qp-btn--outline { 
    border-color: #D5DCE4; 
    background: #FFFFFF; 
    font-weight: 500; 
}

.qp-btn--outline:hover { 
    border-color: #1E3A5F; 
}

.qp-btn--danger { 
    border-color: #B42318; 
    color: #B42318; 
}

.qp-btn--danger:hover { 
    background: #FDECEA; 
}

.qp-btn--block { 
    width: 100%; 
}

.qp-danger-link { 
    font-size: 14px; 
    font-weight: 600; 
    color: #B42318; 
    text-decoration: none; 
}

.qp-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.qp-row--between { 
    justify-content: space-between; 
    padding: 0 4px; 
}

.qp-alert { 
    margin: 0 0 14px; 
    padding: 12px 14px; 
    border-radius: 12px; 
    font-size: 14px; 
}

.qp-alert--success { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.qp-alert--error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.qp-done { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 6px; 
}

.qp-done__icon { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 56px; 
    height: 56px; 
    border-radius: 50%; 
    background: #D8F0E4; 
    color: #1B5E3F; 
    font-size: 28px; 
    font-weight: 700; 
}

.qp-done .qp-title { 
    margin-bottom: 6px; 
}

.qp-done .qp-row { 
    margin-top: 14px; 
}

.qp-steps { 
    margin: 0; 
    padding: 0 0 0 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
}

.qp-steps strong { 
    display: block; 
}

.qp-steps span { 
    display: block; 
    font-size: 14px; 
    color: #3D4E61; 
}

.qp-notice { 
    padding: 18px 22px; 
    border: 1px solid #F6C79A; 
    border-radius: 18px; 
    background: #FFF8F1; 
    font-size: 14px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.qp-notice p { 
    margin: 0; 
}

.qp-notice__title { 
    margin-bottom: 6px !important; 
    font-weight: 600; 
    color: #8A4A08; 
}

.cl-page { 
    background: #FAFBFC; 
    padding: 36px 0 56px; 
}

.cl { 
    display: flex; 
    flex-direction: column; 
    gap: 22px; 
}

.cl-narrow { 
    width: min(760px, calc(100% - 32px)); 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.cl-sr { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
}

.cl-crumb { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
    text-decoration: none; 
}

.cl-crumb a { 
    color: #5B6B7D; 
}

.cl-title { 
    margin: 4px 0 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(28px, 3vw, 40px); 
    font-weight: 500; 
    color: #1E3A5F; 
    letter-spacing: -0.02em; 
}

.cl-h2 { 
    margin: 0 0 12px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 20px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.cl-h2--small { 
    font-size: 17px; 
    color: #3D4E61; 
}

.cl-muted { 
    margin: 2px 0 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.cl-hint { 
    display: block; 
    font-size: 13px; 
    line-height: 1.5; 
    color: #5B6B7D; 
}

.cl-soft { 
    color: #3D4E61; 
}

.cl-nowrap { 
    white-space: nowrap; 
}

.cl-r { 
    text-align: right !important; 
    white-space: nowrap; 
}

.cl-head { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 20px; 
    flex-wrap: wrap; 
}

.cl-head__actions { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.cl-identity { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
}

.cl-identity__name { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    flex-wrap: wrap; 
}

.cl-identity__name .cl-title { 
    margin: 0; 
}

.cl-alert { 
    margin: 0; 
    padding: 12px 16px; 
    border-radius: 12px; 
    font-size: 14px; 
}

.cl-alert ul { 
    margin: 0; 
    padding-left: 18px; 
}

.cl-alert--success { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.cl-alert--error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.cl-alert--info { 
    background: #E1ECF7; 
    color: #1E3A5F; 
}

.cl-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    min-height: 46px; 
    padding: 0 22px; 
    border: 1.5px solid transparent; 
    border-radius: 999px; 
    background: transparent; 
    font: inherit; 
    font-size: 15px; 
    font-weight: 500; 
    color: #1E3A5F; 
    text-decoration: none; 
    white-space: nowrap; 
    cursor: pointer; 
}

.cl-btn--accent { 
    background: #F28C28; 
    color: #1E3A5F; 
    font-weight: 600; 
}

.cl-btn--accent:hover { 
    background: #E07A14; 
    color: #1E3A5F; 
}

.cl-btn--outline { 
    border-color: #D5DCE4; 
    background: #FFFFFF; 
}

.cl-btn--outline:hover { 
    border-color: #1E3A5F; 
}

.cl-btn--ghost:hover { 
    background: #F4F6F8; 
}

.cl-btn--small { 
    min-height: 38px; 
    padding: 0 16px; 
    font-size: 14px; 
}

.cl-link { 
    padding: 0; 
    border: 0; 
    background: none; 
    font: inherit; 
    font-size: 14px; 
    font-weight: 600; 
    color: #1E3A5F; 
    text-decoration: none; 
    cursor: pointer; 
}

.cl-link:hover { 
    text-decoration: underline; 
}

.cl-link--danger { 
    color: #B42318; 
}

.cl-links { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px 18px; 
    margin-top: 10px; 
}

.cl-links form { 
    display: inline; 
}

.cl-kpis { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 16px; 
}

.cl-kpis--4 { 
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 14px; 
}

.cl-kpi { 
    display: flex; 
    flex-direction: column; 
    gap: 3px; 
    padding: 18px 20px; 
    border-radius: 16px; 
    background: #F4F6F8; 
}

.cl-kpi span { 
    font-size: 13px; 
    color: #3D4E61; 
}

.cl-kpi strong { 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 27px; 
    color: #1E3A5F; 
}

.cl-kpi strong.is-warning { 
    color: #B85C0A; 
}

.cl-kpi small { 
    font-size: 12px; 
    color: #5B6B7D; 
}

.cl-card { 
    border: 1px solid #E3E8EE; 
    border-radius: 20px; 
    background: #FFFFFF; 
    overflow: hidden; 
}

.cl-card--pad { 
    padding: 20px 24px; 
    overflow: visible; 
}

.cl-card--muted { 
    background: #FAFBFC; 
}

.cl-card__head { 
    padding: 18px 22px 6px; 
}

.cl-toolbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 14px; 
    flex-wrap: wrap; 
    padding: 14px 18px; 
    border-bottom: 1px solid #E3E8EE; 
}

.cl-tabs { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 4px; 
}

.cl-tab { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    min-height: 42px; 
    padding: 0 16px; 
    border-radius: 999px; 
    font-size: 15px; 
    color: #3D4E61; 
    text-decoration: none; 
}

.cl-tab:hover { 
    background: #F4F6F8; 
    color: #1E3A5F; 
}

.cl-tab__count { 
    padding: 1px 8px; 
    border-radius: 999px; 
    background: #EEF1F4; 
    font-size: 12px; 
    font-weight: 600; 
}

.cl-tab.is-active { 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-weight: 600; 
}

.cl-tab.is-active .cl-tab__count { 
    background: #274A73; 
    color: #FFFFFF; 
}

.cl-filters { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.cl-search { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    width: min(320px, 100%); 
    min-height: 44px; 
    padding: 0 12px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    color: #1E3A5F; 
    background: #FFFFFF; 
}

.cl-search:focus-within { 
    border-color: #1E3A5F; 
    outline: 3px solid #F9D3AE; 
}

.cl-search input { 
    flex: 1 1 auto; 
    min-width: 0; 
    border: 0; 
    outline: 0; 
    font: inherit; 
    font-size: 15px; 
    background: transparent; 
}

.cl-select { 
    min-height: 44px; 
    padding: 0 12px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    font: inherit; 
    font-size: 15px; 
    background: #FFFFFF; 
}

.cl-table-wrap { 
    overflow-x: auto; 
}

.cl-table { 
    width: 100%; 
    min-width: 860px; 
    border-collapse: collapse; 
    font-size: 15px; 
}

.cl-card .cl-table { 
    min-width: 560px; 
}

.cl-table th { 
    padding: 12px 18px; 
    text-align: left; 
    font-size: 13px; 
    font-weight: 500; 
    color: #5B6B7D; 
    background: #FAFBFC; 
    border-bottom: 1px solid #E3E8EE; 
    white-space: nowrap; 
}

.cl-table td { 
    padding: 12px 18px; 
    border-bottom: 1px solid #EEF1F4; 
    vertical-align: middle; 
}

.cl-table tbody tr:last-child td { 
    border-bottom: 0; 
}

.cl-table tbody tr:hover td { 
    background: #FAFBFC; 
}

.cl-table tr.is-archived td { 
    color: #8A97A6; 
}

.cl-person { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    color: inherit; 
    text-decoration: none; 
}

.cl-person strong, .cl-quote strong { 
    display: block; 
    font-weight: 500; 
    color: #1B2A3D; 
}

.cl-person:hover strong, .cl-quote:hover strong { 
    color: #1E3A5F; 
    text-decoration: underline; 
}

.cl-person small, .cl-quote small { 
    display: block; 
    font-size: 13px; 
    color: #5B6B7D; 
}

.cl-quote { 
    color: inherit; 
    text-decoration: none; 
}

.is-missing { 
    color: #B42318 !important; 
    font-weight: 500; 
}

.cl-avatar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 38px; 
    height: 38px; 
    flex-shrink: 0; 
    border-radius: 50%; 
    background: #E1ECF7; 
    color: #1E3A5F; 
    font-size: 13px; 
    font-weight: 600; 
}

.cl-avatar.is-pro { 
    border-radius: 10px; 
    background: #FDEEDC; 
    color: #8A4A08; 
}

.cl-avatar--big { 
    width: 60px; 
    height: 60px; 
    font-size: 20px; 
}

.cl-avatar--big.is-pro { 
    border-radius: 14px; 
}

.cl-type { 
    display: inline-flex; 
    padding: 3px 10px; 
    border-radius: 999px; 
    background: #E1ECF7; 
    color: #1E3A5F; 
    font-size: 12px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.cl-type.is-pro { 
    background: #FDEEDC; 
    color: #8A4A08; 
}

.cl-action { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 36px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 999px; 
    font-size: 14px; 
    font-weight: 500; 
    color: #1E3A5F; 
    text-decoration: none; 
}

.cl-action:hover { 
    border-color: #1E3A5F; 
}

.cl-action--icon { 
    width: 36px; 
    padding: 0; 
    margin-left: 6px; 
}

.cl-badge { 
    display: inline-flex; 
    padding: 4px 11px; 
    border-radius: 999px; 
    font-size: 13px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.cl-badge--draft, .cl-badge--cancelled { 
    background: #EEF1F4; 
    color: #3D4E61; 
}

.cl-badge--sent { 
    background: #E1ECF7; 
    color: #1E3A5F; 
}

.cl-badge--signed { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.cl-badge--refused { 
    background: #FDECEA; 
    color: #B42318; 
}

.cl-badge--expired { 
    background: #FDF1E4; 
    color: #8A4A08; 
}

.cl-foot { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 12px; 
    flex-wrap: wrap; 
    padding: 14px 18px; 
    border-top: 1px solid #E3E8EE; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.cl-pages { 
    display: flex; 
    gap: 4px; 
}

.cl-pagelink { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-width: 36px; 
    height: 36px; 
    border-radius: 9px; 
    color: #3D4E61; 
    text-decoration: none; 
}

.cl-pagelink.is-active { 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-weight: 600; 
}

.cl-empty { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    padding: 48px 24px; 
    text-align: center; 
    color: #3D4E61; 
}

.cl-empty--small { 
    padding: 28px 24px; 
}

.cl-empty__title { 
    margin: 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 21px; 
    color: #1E3A5F; 
}

.cl-grid { 
    display: grid; 
    grid-template-columns: 380px minmax(0, 1fr); 
    gap: 24px; 
    align-items: start; 
}

.cl-col { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    min-width: 0; 
}

.cl-rows { 
    margin: 0; 
}

.cl-rows > div { 
    display: flex; 
    justify-content: space-between; 
    gap: 16px; 
    padding: 10px 0; 
    border-bottom: 1px solid #EEF1F4; 
    font-size: 15px; 
}

.cl-rows > div:last-child { 
    border-bottom: 0; 
}

.cl-rows dt { 
    color: #5B6B7D; 
}

.cl-rows dt.cl-dt-wide { 
    color: #1B2A3D; 
}

.cl-rows dd { 
    margin: 0; 
    text-align: right; 
}

.cl-rows a { 
    color: #1E3A5F; 
    font-weight: 500; 
    text-decoration: none; 
}

.cl-textarea, .cl-field input, .cl-field select, .cl-field textarea { 
    width: 100%; 
    box-sizing: border-box; 
    min-height: 46px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    font: inherit; 
    font-size: 15px; 
    color: #1B2A3D; 
    background: #FFFFFF; 
}

.cl-textarea, .cl-field textarea { 
    padding: 10px 14px; 
    line-height: 1.5; 
    resize: vertical; 
}

.cl-textarea:focus, .cl-field input:focus, .cl-field select:focus, .cl-field textarea:focus { 
    outline: 3px solid #F9D3AE; 
    border-color: #1E3A5F; 
}

.cl-row-between { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 12px; 
    margin-top: 8px; 
}

.cl-form { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.cl-form [data-for] { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.cl-form .cl-grid-3[data-for] { 
    display: grid; 
}

.cl-grid-2 { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 16px; 
}

.cl-grid-3 { 
    display: grid; 
    grid-template-columns: 140px repeat(2, minmax(0, 1fr)); 
    gap: 16px; 
}

.cl-field { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    min-width: 0; 
}

.cl-field label { 
    font-size: 14px; 
    font-weight: 500; 
}

.cl-field.is-error input { 
    border-color: #B42318; 
}

.cl-toggle { 
    display: flex; 
    gap: 6px; 
    padding: 5px; 
    border-radius: 999px; 
    background: #F4F6F8; 
}

.cl-toggle label { 
    flex: 1 1 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    min-height: 44px; 
    border-radius: 999px; 
    font-weight: 500; 
    color: #3D4E61; 
    cursor: pointer; 
}

.cl-toggle label:has(input:checked) { 
    background: #FFFFFF; 
    color: #1E3A5F; 
}

.cl-toggle input { 
    accent-color: #1E3A5F; 
}

.cl-actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: 10px; 
    padding-top: 6px; 
}

.ac-page { 
    background: #FAFBFC; 
    padding: 36px 0 56px; 
}

.ac { 
    display: flex; 
    flex-direction: column; 
    gap: 22px; 
}

.ac-narrow { width: min(640px, calc(100% - 32px)); 
    margin: 0 auto; 
}

.ac-crumb { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.ac-crumb a { 
    color: #5B6B7D; 
}

.ac-title { 
    margin: 4px 0 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(28px, 3vw, 40px); 
    font-weight: 500; 
    color: #1E3A5F; 
    letter-spacing: -0.02em; 
}

.ac-title--small { 
    font-size: 28px; 
    margin-bottom: 8px; 
}

.ac-h2 { 
    margin: 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 21px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.ac-sub { 
    margin: 4px 0 18px; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.ac-hint { 
    display: block; 
    font-size: 13px; 
    line-height: 1.5; 
    color: #5B6B7D; 
}

.ac-error { 
    display: block; 
    margin-top: 4px; 
    font-size: 13px; 
    font-weight: 500; 
    color: #B42318; 
}

.ac-danger { 
    color: #B42318; 
}

.ac-alert { 
    margin: 0; 
    padding: 12px 16px; 
    border-radius: 12px; 
    font-size: 14px; 
}

.ac-section .ac-alert { 
    margin-bottom: 14px; 
}

.ac-alert--success { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.ac-alert--error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.ac-alert--info { 
    background: #E1ECF7; 
    color: #1E3A5F; 
}

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

.ac-layout { 
    display: grid; 
    grid-template-columns: 250px minmax(0, 1fr); 
    gap: 28px; 
    align-items: start; 
}

.ac-card { 
    border: 1px solid #E3E8EE; 
    border-radius: 20px; 
    background: #FFFFFF; 
}

.ac-nav { 
    position: sticky; 
    top: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    padding: 10px; 
}

.ac-nav__item { 
    display: flex; 
    align-items: center; 
    min-height: 44px; 
    padding: 0 14px; 
    border-radius: 12px; 
    font-size: 15px; 
    color: #3D4E61; 
    text-decoration: none; 
}

.ac-nav__item:hover { 
    background: #F4F6F8; 
    color: #1E3A5F; 
}

.ac-nav__note { 
    margin: 10px 4px 0; 
    padding: 12px 10px 4px; 
    border-top: 1px solid #EEF1F4; 
    font-size: 13px; 
    line-height: 1.5; 
    color: #5B6B7D; 
}

.ac-nav__note a { 
    color: #B85C0A; 
    font-weight: 600; 
}

.ac-sections { 
    display: flex; 
    flex-direction: column; 
    gap: 22px; 
    min-width: 0; 
}

.ac-section { 
    padding: 22px 26px; 
    scroll-margin-top: 20px; 
}

.ac-identity { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    margin-bottom: 18px; 
}

.ac-identity strong { 
    display: block; 
    font-size: 17px; 
}

.ac-avatar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 64px; 
    height: 64px; 
    flex-shrink: 0; 
    border-radius: 50%; 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-size: 22px; 
    font-weight: 600; 
}

.ac-grid { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 16px; 
}

.ac-field { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    min-width: 0; 
    position: relative; 
}

.ac-field label, .ac-label { 
    font-size: 14px; 
    font-weight: 500; 
    color: #1B2A3D; 
}

.ac-field input { 
    width: 100%; 
    box-sizing: border-box; 
    min-height: 46px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    font: inherit; 
    font-size: 15px; 
    color: #1B2A3D; 
    background: #FFFFFF; 
}

.ac-field.has-reveal input { 
    padding-right: 84px; 
}

.ac-field input:focus { 
    outline: 3px solid #F9D3AE; 
    border-color: #1E3A5F; 
}

.ac-reveal { 
    position: absolute; 
    right: 8px; 
    top: 29px; 
    height: 34px; 
    padding: 0 10px; 
    border: 0; 
    border-radius: 8px; 
    background: transparent; 
    font: inherit; 
    font-size: 13px; 
    color: #5B6B7D; 
    cursor: pointer; 
}

.ac-reveal:hover { 
    background: #F4F6F8; 
    color: #1E3A5F; 
}

.ac-readonly { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    min-height: 46px; 
    padding: 0 14px; 
    border-radius: 12px; 
    background: #F4F6F8; 
    font-size: 15px; 
    color: #1B2A3D; 
}

.ac-badge { 
    display: inline-flex; 
    margin-left: auto; 
    padding: 3px 10px; 
    border-radius: 999px; 
    font-size: 12px; 
    font-weight: 600; 
}

.ac-badge--ok { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.ac-badge--warn { 
    background: #FDEEDC; 
    color: #8A4A08; 
}

.ac-strength { 
    display: flex; 
    gap: 4px; 
    margin-top: 2px; 
}

.ac-strength i { 
    flex: 1; 
    height: 5px; 
    border-radius: 999px; 
    background: #E3E8EE; 
}

.ac-strength i.is-on { 
    background: #2E9E6A; 
}

.ac-form { 
    margin: 0; 
}

.ac-actions { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    gap: 16px; 
    margin-top: 18px; 
}

.ac-actions--between { 
    justify-content: space-between; 
}

.ac-actions--between .ac-hint { 
    max-width: 520px; 
}

.ac-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 44px; 
    padding: 0 20px; 
    border: 1.5px solid transparent; 
    border-radius: 999px; 
    background: transparent; 
    font: inherit; 
    font-size: 15px; 
    font-weight: 500; 
    color: #1E3A5F; 
    text-decoration: none; 
    white-space: nowrap; 
    cursor: pointer; 
}

.ac-btn--accent { 
    background: #F28C28; 
    font-weight: 600; 
}

.ac-btn--accent:hover { 
    background: #E07A14; 
}

.ac-btn--outline { 
    border-color: #D5DCE4; 
    background: #FFFFFF; 
}

.ac-btn--outline:hover:not(:disabled) { 
    border-color: #1E3A5F; 
}

.ac-btn--outline:disabled { 
    color: #8A97A6; 
    border-color: #E3E8EE; 
    cursor: not-allowed; 
}

.ac-btn--danger { 
    color: #B42318; 
}

.ac-btn--danger:hover { 
    border-color: #B42318 !important; 
    background: #FDECEA; 
}

.ac-link { 
    padding: 0; 
    border: 0; 
    background: none; 
    font: inherit; 
    font-size: 14px; 
    font-weight: 600; 
    color: #1E3A5F; 
    cursor: pointer; 
    white-space: nowrap; 
}

.ac-toggle-row, .ac-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
    padding: 14px 0; 
    border-bottom: 1px solid #EEF1F4; 
}

.ac-toggle-row:last-of-type, .ac-row:last-child { 
    border-bottom: 0; 
}

.ac-toggle-row { 
    cursor: pointer; 
}

.ac-toggle-row.is-disabled { 
    cursor: default; 
    opacity: .6; 
}

.ac-toggle-row strong, .ac-row strong { 
    display: block; 
    font-weight: 500; 
}

.ac-switch-input { 
    position: absolute; 
    opacity: 0; 
    width: 1px; 
    height: 1px; 
}

.ac-switch { 
    position: relative; 
    width: 42px; 
    height: 24px; 
    flex-shrink: 0; 
    border-radius: 999px; 
    background: #C5CFDA; 
    transition: background .15s; 
}

.ac-switch span { 
    position: absolute; 
    top: 3px; 
    left: 3px; 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    background: #FFFFFF; 
    transition: left .15s; 
}

.ac-switch-input:checked + .ac-switch { 
    background: #1E3A5F; 
}

.ac-switch-input:checked + .ac-switch span { 
    left: 21px; 
}

.ac-switch-input:focus-visible + .ac-switch { 
    outline: 3px solid #F9D3AE; 
    outline-offset: 2px; 
}

.ac-row form { 
    flex-shrink: 0; 
}

.ct *, .ct-target * { 
    box-sizing: border-box; 
}

.ct-page { 
    background: #FAFBFC; 
    padding: 32px 0 56px; 
}

.ct { 
    display: flex; 
    flex-direction: column; 
    gap: 22px; 
}

.ct-sr { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
}

.ct-crumb { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.ct-crumb a { 
    color: #5B6B7D; 
}

.ct-title { 
    margin: 4px 0 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(30px, 3.4vw, 42px); 
    font-weight: 500; 
    color: #1E3A5F; 
    letter-spacing: -0.02em; 
}

.ct-head { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    gap: 20px; 
    flex-wrap: wrap; 
}

.ct-head__note { 
    max-width: 380px; 
    text-align: right; 
}

.ct-muted { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.ct-h2 { 
    margin: 0 0 10px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 21px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.ct-h2--small { 
    font-size: 19px; 
}

.ct-text { 
    margin: 0; 
    font-size: 15px; 
    line-height: 1.7; 
    color: #3D4E61; 
}

.ct-alert { 
    margin: 0; 
    padding: 12px 16px; 
    border-radius: 12px; 
    font-size: 14px; 
}

.ct-alert a { 
    margin-left: 8px; 
    font-weight: 600; 
    color: inherit; 
}

.ct-alert--success { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.ct-alert--error { 
    background: #FDECEA; 
    color: #8C1D13; 
}

.ct-target { 
    background: #FFF8F1; 
    border-bottom: 1px solid #F6C79A; 
}

.ct-target__inner { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    flex-wrap: wrap; 
    padding: 12px 0; 
    font-size: 15px; 
    color: #3D4E61; 
}

.ct-target__inner strong { 
    color: #8A4A08; 
}

.ct-target__inner .ct-btn { 
    margin-left: auto; 
    min-height: 38px; 
    font-size: 14px; 
}

.ct-target__close { 
    width: 36px; 
    height: 36px; 
    border: 0; 
    border-radius: 50%; 
    background: transparent; 
    font-size: 16px; 
    color: #8A4A08; 
    cursor: pointer; 
}

.ct-target__close:hover { 
    background: #FDEEDC; 
}


.ct-btn { 
    box-sizing: border-box; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    min-height: 42px; 
    padding: 0 18px; 
    border: 1.5px solid transparent; 
    border-radius: 999px; 
    background: transparent; 
    font: inherit; 
    font-size: 14px; 
    font-weight: 600; 
    color: #1E3A5F; 
    text-decoration: none; 
    cursor: pointer; 
    white-space: nowrap; 
}

.ct-btn--accent { 
    background: #F28C28; 
}

.ct-btn--accent:hover { 
    background: #E07A14; 
    color: #1E3A5F; 
}

.ct-btn--navy { 
    background: #1E3A5F; 
    color: #FFFFFF; 
}

.ct-btn--navy:hover { 
    background: #14283F; 
    color: #FFFFFF; 
}

.ct-btn--outline { 
    border-color: #D5DCE4; 
    background: #FFFFFF; 
    font-weight: 500; 
}

.ct-btn--outline:hover { 
    border-color: #1E3A5F; 
}

.ct-btn--big { 
    min-height: 52px; 
    font-size: 16px; 
    width: 100%; 
}

.ct-btn.is-added { 
    background: #D8F0E4; 
    color: #1B5E3F; 
}

.ct-btn:disabled { 
    opacity: .7; 
    cursor: wait; 
}

.ct-link { 
    align-self: center; 
    font-size: 14px; 
    font-weight: 600; 
    color: #1E3A5F; 
}

.ct-search { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    min-height: 58px; 
    padding: 0 8px 0 18px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 16px; 
    background: #FFFFFF; 
    color: #1E3A5F; 
}

.ct-search:focus-within { 
    border-color: #1E3A5F; 
    outline: 3px solid #F9D3AE; 
}

.ct-search input { 
    flex: 1 1 auto; 
    min-width: 0; 
    border: 0; 
    outline: 0; 
    font: inherit; 
    font-size: 16px; 
    background: transparent; 
}

.ct-layout { 
    display: grid; 
    grid-template-columns: 260px minmax(0, 1fr); 
    gap: 28px; 
    align-items: start; 
}

.ct-side { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.ct-box { 
    border: 1px solid #E3E8EE; 
    border-radius: 18px; 
    background: #FFFFFF; 
    padding: 10px; 
}

.ct-box--pad { 
    padding: 22px 24px; 
}

.ct-box__title { 
    margin: 6px 12px 8px; 
    font-size: 12px; 
    font-weight: 600; 
    letter-spacing: .8px; 
    text-transform: uppercase; 
    color: #8A97A6; 
}

.ct-cat { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    min-height: 40px; 
    padding: 0 12px; 
    border-radius: 10px; 
    font-size: 15px; 
    color: #3D4E61; 
    text-decoration: none; 
}

.ct-cat span { 
    font-size: 12px; 
    color: #8A97A6; 
}

.ct-cat:hover { 
    background: #F4F6F8; 
    color: #1E3A5F; 
}

.ct-cat.is-active { 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-weight: 600; 
}

.ct-cat.is-active span { 
    color: #C9D6E3; 
}

.ct-cat--sub { 
    padding-left: 26px; 
    font-size: 14px; 
}

.ct-check { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    min-height: 36px; 
    padding: 0 12px; 
    font-size: 14px; 
    cursor: pointer; 
}

.ct-check input { 
    width: 18px; 
    height: 18px; 
    accent-color: #1E3A5F; 
}

.ct-check span { 
    margin-left: auto; 
    font-size: 12px; 
    color: #8A97A6; 
}

.ct-results { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    min-width: 0; 
}

.ct-toolbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 12px; 
    flex-wrap: wrap; 
}

.ct-chips { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
}

.ct-chip { 
    display: inline-flex; 
    align-items: center; 
    min-height: 40px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 999px; 
    background: #FFFFFF; 
    font-size: 14px; 
    color: #1E3A5F; 
    text-decoration: none; 
}

.ct-chip.is-active { 
    border-color: #1E3A5F; 
    background: #F4F8FC; 
    font-weight: 600; 
}

.ct-sort { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.ct-sort select { 
    min-height: 40px; 
    padding: 0 12px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 999px; 
    font: inherit; 
    font-size: 14px; 
    color: #1E3A5F; 
    background: #FFFFFF; 
}

.ct-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 16px; 
}

.ct-card { 
    display: flex; 
    flex-direction: column; 
    border: 1px solid #E3E8EE; 
    border-radius: 18px; 
    background: #FFFFFF; 
    overflow: hidden; 
}

.ct-card__img { 
    height: 150px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 34px; 
    font-weight: 700; 
    text-decoration: none; 
}

.ct-card__img img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    background: #FFFFFF; 
}

.ct-card__body { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    flex-grow: 1; 
    padding: 14px 16px 16px; 
}

.ct-brand { 
    font-size: 12px; 
    font-weight: 600; 
    letter-spacing: .6px; 
    text-transform: uppercase; 
    color: #8A97A6; 
}

.ct-name { 
    font-weight: 600; 
    font-size: 15px; 
    line-height: 1.35; 
    color: #1B2A3D; 
    text-decoration: none; 
}

.ct-name:hover { 
    color: #1E3A5F; 
    text-decoration: underline; 
}

.ct-ref { 
    font-size: 12px; 
    color: #8A97A6; 
}

.ct-card__price { 
    margin-top: auto; 
    padding-top: 6px; 
}

.ct-price { 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 22px; 
    font-weight: 700; 
    color: #1E3A5F; 
}

.ct-price--big { 
    font-size: 34px; 
}

.ct-per { 
    font-size: 13px; 
    color: #5B6B7D; 
}

.ct-locked { 
    font-size: 13px; 
    font-weight: 500; 
    color: #8A4A08; 
}

.ct-stock { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    font-size: 13px; 
    font-weight: 500; 
    color: #3D4E61; 
}

.ct-stock i { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
}

.ct-stock--ok i { 
    background: #2E9E6A; 
}

.ct-stock--low i { 
    background: #D98A1B; 
}

.ct-stock--out i { 
    background: #8A97A6; 
}

.ct-stock--out { 
    color: #5B6B7D; 
}

.ct-card .ct-btn, .ct-add { 
    width: 100%; 
    margin-top: 8px; 
}

.ct-add .ct-btn { 
    width: 100%; 
    margin: 0; 
}

.ct-empty { 
    padding: 48px 24px; 
    text-align: center; 
    color: #3D4E61; 
    border: 1px dashed #D5DCE4; 
    border-radius: 18px; 
    background: #FFFFFF; 
}

.ct-empty__title { 
    margin: 0 0 6px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 21px; 
    color: #1E3A5F; 
}

.ct-pages { 
    display: flex; 
    justify-content: center; 
    gap: 4px; 
    margin-top: 8px; 
}

.ct-pagelink { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-width: 38px; 
    height: 38px; 
    border-radius: 9px; 
    color: #3D4E61; 
    text-decoration: none; 
}

.ct-pagelink.is-active { background: #1E3A5F; 
    color: #FFFFFF; 
    font-weight: 600; 
}

.ct-toast { 
    position: fixed; 
    left: 50%; 
    bottom: 24px; 
    z-index: 900; 
    transform: translateX(-50%); 
    max-width: calc(100% - 32px); 
    padding: 12px 20px; 
    border-radius: 999px; 
    font-size: 15px; 
    font-weight: 500; 
    box-shadow: 0 10px 30px rgba(20, 40, 63, .25); 
}

.ct-toast.is-ok { 
    background: #1B5E3F; 
    color: #FFFFFF; 
}

.ct-toast.is-error { 
    background: #8C1D13; 
    color: #FFFFFF; 
}

.ct-product { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 460px; 
    gap: 32px; 
    align-items: start; 
}

.ct-product__main, .ct-product__side { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    min-width: 0; 
}

.ct-product__img { 
    height: 420px; 
    border-radius: 22px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 80px; 
    font-weight: 700; 
}

.ct-product__img img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    background: #FFFFFF; 
}

.ct-product__title { 
    margin: 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 30px; 
    font-weight: 500; 
    line-height: 1.15; 
    color: #1E3A5F; 
}

.ct-specs { 
    margin: 0; 
}

.ct-specs div { 
    display: flex; 
    justify-content: space-between; 
    gap: 16px; 
    padding: 10px 0; 
    border-bottom: 1px solid #EEF1F4; 
    font-size: 15px; 
}

.ct-specs div:last-child { 
    border-bottom: 0; 
}

.ct-specs dt { 
    color: #5B6B7D; 
}

.ct-specs dd { 
    margin: 0; text-align: right; 
}

.ct-buy { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.ct-buy__price { 
    margin-top: 4px; 
}

.ct-locked-box { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    padding: 14px 16px; 
    border-radius: 12px; 
    background: #FFF8F1; 
    color: #8A4A08; 
    font-size: 14px; 
}

.ct-buy__form { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    margin-top: 8px; 
    padding-top: 14px; 
    border-top: 1px solid #EEF1F4; 
}

.ct-buy__row { 
    display: grid; 
    grid-template-columns: 150px minmax(0, 1fr); 
    gap: 12px; 
}

.ct-field { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    min-width: 0; 
}

.ct-field label { 
    font-size: 13px; 
    font-weight: 500; 
}

.ct-field select { 
    min-height: 48px; 
    padding: 0 12px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    font: inherit; 
    font-size: 14px; 
    background: #FFFFFF; 
}

.ct-stepper { 
    display: flex; 
    align-items: center; 
    min-height: 48px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    overflow: hidden; 
}

.ct-stepper button { 
    width: 40px; 
    height: 46px; 
    border: 0; 
    background: transparent; 
    font-size: 20px; 
    color: #5B6B7D; 
    cursor: pointer; 
}

.ct-stepper button:hover { 
    background: #F4F6F8; 
}

.ct-stepper input { 
    flex: 1 1 auto; 
    min-width: 0; 
    width: 100%; 
    border: 0; 
    text-align: center; 
    font: inherit; 
    font-weight: 600; 
    font-size: 15px; 
    outline: 0; 
}

.ct-round { 
    margin: 0; 
    padding: 10px 12px; 
    border-radius: 10px; 
    background: #FFF8F1; 
    font-size: 13px; 
    line-height: 1.5; 
    color: #8A4A08; 
}

.ct-related { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.ct-related__item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 10px; 
    border: 1px solid #E3E8EE; 
    border-radius: 14px; 
    color: inherit; 
    text-decoration: none; 
}

.ct-related__item:hover { 
    border-color: #1E3A5F; 
}

.ct-related__img { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 56px; 
    height: 56px; 
    flex-shrink: 0; 
    border-radius: 10px; 
    overflow: hidden; 
    font-weight: 700; 
}

.ct-related__img img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    background: #FFFFFF; 
}

.ct-related__item strong { 
    display: block; 
    font-size: 14px; 
    font-weight: 600; 
}

.ct-related__item small { 
    display: block; 
    font-size: 13px; 
    color: #5B6B7D; 
}

.qe-col-qty { 
    width: 128px; 
}

.qe-qty { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}

.qe-qty__stepper { 
    display: flex; 
    align-items: center; 
    height: 38px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 10px; 
    overflow: hidden; 
    background: #FFFFFF; 
}

.qe-qty__stepper:focus-within { 
    border-color: #1E3A5F; 
    outline: 3px solid #F9D3AE; 
}

.qe-qty__btn { 
    width: 28px; 
    height: 100%; 
    flex-shrink: 0; 
    border: 0; 
    background: transparent; 
    font: inherit; 
    font-size: 17px; 
    color: #5B6B7D; 
    cursor: pointer; 
}

.qe-qty__btn:hover { 
    background: #F4F6F8; 
    color: #1E3A5F; 
}

.qe-qty__stepper .qe-qty__input { 
    flex: 1 1 auto; 
    min-width: 0; 
    width: 100%; 
    height: 100%; 
    padding: 0 2px; 
    border: 0 !important; 
    border-radius: 0; 
    outline: 0 !important; 
    box-shadow: none !important; 
    text-align: center; 
    -moz-appearance: textfield; 
}

.qe-qty__input::-webkit-outer-spin-button, .qe-qty__input::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

.qe-qty__hint { 
    font-size: 11.5px; 
    line-height: 1.35; 
    color: #5B6B7D; 
}

.qe-qty__hint.is-exact { 
    color: #1B5E3F; 
}

.qe-qty__hint.is-rounded { 
    color: #8A4A08; 
}

.qe-qty__round { 
    align-self: flex-start; 
    padding: 2px 8px; 
    border: 1px solid #F6C79A; 
    border-radius: 999px; 
    background: #FFF8F1; 
    font: inherit; 
    font-size: 11.5px; 
    font-weight: 600; 
    color: #8A4A08; 
    cursor: pointer; 
}

.qe-qty__round:hover { 
    border-color: #8A4A08; 
}

.ctc-page, .ctc-page * { 
    box-sizing: border-box; 
}

.ctc-page { 
    background: #FAFBFC; 
    padding: 40px 0 64px; 
}

.ctc { 
    display: flex; 
    flex-direction: column; 
    gap: 26px; 
}

.ctc-crumb { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.ctc-crumb a { 
    color: #5B6B7D; 
}

.ctc-title { 
    margin: 4px 0 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(30px, 3.6vw, 42px); 
    font-weight: 500; 
    color: #1E3A5F; 
    letter-spacing: -0.02em; 
}

.ctc-title--small { 
    font-size: 32px; 
    margin: 0; 
}

.ctc-lead { 
    margin: 8px 0 0; 
    font-size: 17px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.ctc-h2 { 
    margin: 0 0 8px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 19px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.ctc-hint { 
    margin: 0; 
    font-size: 13px; 
    line-height: 1.5; 
    color: #5B6B7D; 
}

.ctc-hint a { 
    font-weight: 600; 
    color: #B85C0A; 
}

.ctc-todo { 
    padding: 1px 6px; 
    border-radius: 4px; 
    background: #FFF1B8; 
    color: #6B4E00; 
}

.ctc-layout { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 380px; 
    gap: 32px; 
    align-items: start; 
}

.ctc-card { 
    padding: 22px 24px; 
    border: 1px solid #E3E8EE; 
    border-radius: 20px; 
    background: #FFFFFF; 
}

.ctc-card p { 
    margin: 0; 
    font-size: 15px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.ctc-card--info { 
    border-color: #CFE0F2; 
    background: #F4F8FC; 
}

.ctc-side { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.ctc-phone { 
    display: block; 
    margin-bottom: 4px; 
    font-size: 20px; 
    font-weight: 700; 
    color: #1E3A5F; 
    text-decoration: none; 
}

.ctc-suggest { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}

.ctc-suggest li { 
    border-bottom: 1px solid #DCE7F3; 
}

.ctc-suggest li:last-child { 
    border-bottom: 0; 
}

.ctc-suggest a { 
    display: block; 
    padding: 9px 0; 
    font-size: 14px; 
    font-weight: 500; 
    color: #1E3A5F; 
    text-decoration: none; 
}

.ctc-suggest a:hover { 
    text-decoration: underline; 
}

.ctc-form { 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
    padding: 28px 30px; 
}

.ctc-alert { 
    padding: 12px 16px; 
    border-radius: 12px; 
    background: #FDECEA; 
    color: #8C1D13; 
    font-size: 14px; 
}

.ctc-alert ul { 
    margin: 0; 
    padding-left: 18px; 
}

.ctc-field { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    min-width: 0; 
    margin: 0; 
    padding: 0; 
    border: 0; 
}

.ctc-field--short { 
    max-width: 320px; 
}

.ctc-label { 
    padding: 0; 
    font-size: 14px; 
    font-weight: 500; 
    color: #1B2A3D; 
}

.ctc-opt { 
    font-weight: 400; 
    color: #5B6B7D; 
}

.ctc-field input:not([type="radio"]):not([type="file"]), .ctc-field textarea { 
    width: 100%; 
    min-height: 46px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    font: inherit; 
    font-size: 15px; 
    color: #1B2A3D; 
    background: #FFFFFF; 
}

.ctc-field textarea { 
    padding: 12px 14px; 
    line-height: 1.55; 
    resize: vertical; 
}

.ctc-field input:focus, .ctc-field textarea:focus { 
    outline: 3px solid #F9D3AE; 
    border-color: #1E3A5F; 
}

.ctc-field.is-error input, .ctc-field.is-error textarea { 
    border-color: #B42318; 
}

.ctc-count { 
    text-align: right; 
}

.ctc-grid { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 16px; 
}

.ctc-subjects { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 10px; 
    margin-top: 4px; 
}

.ctc-subject { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    min-height: 52px; 
    padding: 0 16px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    background: #FFFFFF; 
    font-size: 15px; 
    cursor: pointer; 
}

.ctc-subject:hover { 
    border-color: #1E3A5F; 
}

.ctc-subject:has(input:checked) { 
    border-color: #1E3A5F; 
    background: #F4F8FC; 
    font-weight: 600; 
}

.ctc-subject input { 
    width: 18px; 
    height: 18px; 
    accent-color: #1E3A5F; 
}

.ctc-file { 
    position: relative; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    flex-wrap: wrap; 
    padding: 12px 14px; 
    border: 1.5px dashed #C5CFDA; 
    border-radius: 12px; 
    font-size: 14px; 
    color: #5B6B7D; 
    cursor: pointer; 
}

.ctc-file:hover { 
    border-color: #1E3A5F; 
}

.ctc-file:focus-within { 
    outline: 3px solid #F9D3AE; 
}

.ctc-file input { 
    position: absolute; 
    inset: 0; 
    opacity: 0; 
    cursor: pointer; 
}

.ctc-file strong { 
    color: #1E3A5F; 
}

.ctc-trap { 
    position: absolute; 
    left: -10000px; 
    top: auto; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
}

.ctc-submit { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 16px; 
    padding-top: 14px; 
    border-top: 1px solid #EEF1F4; 
}

.ctc-submit .ctc-hint { 
    max-width: 460px; 
}

.ctc-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 48px; 
    padding: 0 24px; 
    border: 1.5px solid transparent; 
    border-radius: 999px; 
    background: transparent; 
    font: inherit; 
    font-size: 15px; 
    font-weight: 600; 
    color: #1E3A5F; 
    text-decoration: none; 
    white-space: nowrap; 
    cursor: pointer; 
}

.ctc-btn--accent { 
    background: #F28C28; 
}

.ctc-btn--accent:hover { 
    background: #E07A14; 
    color: #1E3A5F; 
}

.ctc-btn--accent:disabled { 
    background: #F6C79A; 
    cursor: wait; 
}

.ctc-btn--outline { 
    border-color: #D5DCE4; 
    background: #FFFFFF; 
    font-weight: 500; 
}

.ctc-done { 
    width: min(640px, calc(100% - 32px)); 
    margin: 24px auto 0; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 12px; 
    padding: 34px 36px; 
}

.ctc-done__icon { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 56px; 
    height: 56px; 
    border-radius: 50%; 
    background: #D8F0E4; 
    color: #1B5E3F; 
    font-size: 28px; 
    font-weight: 700; 
}

.ctc-actions { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-top: 6px; 
}

.ft, .ft * { 
    box-sizing: border-box; 
}

.ft { 
    color: #1B2A3D; 
}

html { 
    scroll-behavior: smooth; 
}

.ft section[id] { 
    scroll-margin-top: 16px; 
}

.ft-kicker { 
    margin: 0; 
    font-size: 13px; 
    font-weight: 600; 
    letter-spacing: 1.2px; 
    text-transform: uppercase; 
    color: #B85C0A; 
}

.ft-h2 { 
    margin: 6px 0 12px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(28px, 3.2vw, 36px); 
    font-weight: 500; line-height: 1.12; 
    color: #1E3A5F; 
    letter-spacing: -0.02em; 
}

.ft-p { 
    margin: 0 0 14px; 
    font-size: 17px; 
    line-height: 1.65; 
    color: #3D4E61; 
}

.ft-muted { 
    font-size: 12px; 
    color: #5B6B7D; 
}

.ft-hero { 
    padding: 72px 0 60px; 
    background: linear-gradient(#FBF7F1, #FFFFFF); 
}

.ft-hero__inner { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 18px; 
    text-align: center; 
}

.ft-hero__title { 
    margin: 0; 
    max-width: 900px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(34px, 5vw, 56px); 
    font-weight: 500; 
    line-height: 1.06; 
    color: #1E3A5F; 
    letter-spacing: -0.03em; 
}

.ft-hero__lead { 
    margin: 0; 
    max-width: 720px; 
    font-size: 19px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.ft-actions { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    justify-content: center; 
}

.ft-jump { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 10px; 
    margin-top: 14px; 
}

.ft-jump a { 
    display: inline-flex; 
    align-items: center; 
    min-height: 40px; 
    padding: 0 16px; 
    border: 1.5px solid #E3E8EE; 
    border-radius: 999px; 
    background: #FFFFFF; 
    font-size: 14px; 
    color: #3D4E61; 
    text-decoration: none; 
}

.ft-jump a:hover { 
    border-color: #1E3A5F; 
    color: #1E3A5F; 
}

.ft-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 52px; 
    padding: 0 28px; 
    border: 1.5px solid transparent; 
    border-radius: 999px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #1E3A5F; 
    text-decoration: none; 
    white-space: nowrap; 
}

.ft-btn--accent { 
    background: #F28C28; 
}

.ft-btn--accent:hover { 
    background: #E07A14; 
    color: #1E3A5F; 
}

.ft-btn--outline { 
    border-color: #D5DCE4; 
    background: #FFFFFF; 
    font-weight: 500; 
}

.ft-btn--outline:hover { 
    border-color: #1E3A5F; 
}

.ft-btn--ghost-light { 
    border-color: #4A6A8E; 
    color: #FFFFFF; 
    font-weight: 500; 
}

.ft-btn--ghost-light:hover { 
    border-color: #FFFFFF; 
    color: #FFFFFF; 
}

.ft-row { 
    padding: 72px 0; 
}

.ft-row--alt { 
    background: #FAFBFC; 
}

.ft-row__inner { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 
    gap: 72px; 
    align-items: center; 
}

.ft-row__inner--reverse .ft-text { 
    order: 2; 
}

.ft-points { 
    margin: 0 0 16px; 
    padding: 0; 
    list-style: none; 
}

.ft-points li { 
    position: relative; 
    margin: 0 0 10px; 
    padding-left: 28px; 
    font-size: 16px; 
    line-height: 1.5; 
}

.ft-points li::before { content: '✓'; 
    position: absolute; 
    left: 0; 
    top: 0; 
    font-weight: 700; 
    color: #2E9E6A; 
}

.ft-more { 
    font-size: 15px; 
    font-weight: 600; 
    color: #B85C0A; 
    text-decoration: none; 
}

.ft-more:hover { 
    text-decoration: underline; 
}

.ft-shot { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    padding: 22px; 
    border: 1px solid #E3E8EE; 
    border-radius: 22px; 
    background: #FFFFFF; 
    box-shadow: 0 18px 50px rgba(20, 40, 63, .12); 
}

.ft-shot__head { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: #1E3A5F; 
}

.ft-tag { 
    padding: 2px 9px; 
    border-radius: 999px; 
    background: #EEF1F4; 
    font-size: 12px; 
    font-weight: 600; 
    color: #3D4E61; 
}

.ft-fake-input { 
    display: flex; 
    align-items: center; 
    min-height: 42px; 
    padding: 0 14px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 12px; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.ft-line { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 10px; 
    padding: 11px 14px; 
    border: 1px solid #EEF1F4; 
    border-radius: 12px; 
    font-size: 14px; 
}

.ft-line small { 
    color: #5B6B7D; 
}

.ft-line span small { 
    display: block; 
}

.ft-line--ok { 
    border-color: #CFE9DA; 
    background: #F3FBF6; 
    color: #1B5E3F; 
}

.ft-dot { 
    display: inline-block; 
    width: 8px; 
    height: 8px; 
    margin-right: 8px; 
    border-radius: 50%; 
    background: #2E9E6A; 
    vertical-align: middle; 
}

.ft-dot--blue { 
    background: #4A8BD6; 
}

.ft-dot--grey { 
    background: #8A97A6; 
}

.ft-brand { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

.ft-brand small { 
    display: block; 
    font-size: 13px; 
    color: #5B6B7D; 
}

.ft-brand__logo { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px; 
    height: 40px; 
    border-radius: 10px; 
    background: #1E3A5F; 
    color: #F28C28; 
    font-weight: 700; 
}

.ft-check { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
}

.ft-check__box { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 20px; 
    height: 20px; 
    border-radius: 5px; 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-size: 13px; 
    font-weight: 700; 
}

.ft-fake-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 46px; 
    border-radius: 999px; 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-weight: 600; 
}

.ft-price span { 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 28px; 
    font-weight: 700; 
    color: #1E3A5F; 
}

.ft-price small { 
    margin-left: 6px; 
    font-size: 13px; 
    color: #5B6B7D; 
}

.ft-stock { 
    font-size: 13px; 
    color: #1B5E3F; 
}

.ft-stepper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 190px; 
    min-height: 42px; 
    padding: 0 12px; 
    border: 1.5px solid #D5DCE4; 
    border-radius: 10px; 
    color: #5B6B7D; 
}

.ft-stepper strong { 
    color: #1B2A3D; 
}

.ft-more-features { 
    padding: 72px 0; 
}

.ft-center { 
    text-align: center; 
    margin-bottom: 28px; 
}

.ft-grid { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 16px; 
}

.ft-card { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    padding: 22px; 
    border: 1px solid #E3E8EE; 
    border-radius: 18px; 
    background: #FFFFFF; 
}

.ft-card h3 { 
    margin: 0; 
    font-size: 17px; 
    font-weight: 600; 
    color: #1E3A5F; 
}

.ft-card p { 
    margin: 0; 
    font-size: 14px; 
    line-height: 1.55; 
    color: #5B6B7D; 
}

.ft-soon { 
    display: inline-flex; 
    margin-left: 8px; 
    padding: 3px 10px; 
    border-radius: 999px; 
    background: #EEF1F4; 
    font-size: 12px; 
    font-weight: 600; 
    color: #3D4E61; 
    vertical-align: middle; 
}

.ft-cta { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 32px; 
    margin: 0 0 72px; 
    padding: 48px 56px; 
    border-radius: 28px; 
    background: #1E3A5F; 
}

.ft-cta h2 { 
    margin: 0 0 8px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(26px, 3vw, 34px); 
    font-weight: 500; 
    color: #FFFFFF; 
}

.ft-cta p { 
    margin: 0; 
    font-size: 17px; 
    color: #C9D6E3; 
}

.ft-cta .ft-actions { 
    flex-shrink: 0; 
    justify-content: flex-end; 
}

.tf, .tf * { 
    box-sizing: border-box; 
}

.tf-kicker { 
    margin: 0; 
    font-size: 13px; 
    font-weight: 600; 
    letter-spacing: 1.2px; 
    text-transform: uppercase; 
    color: #B85C0A; 
}

.tf-hero { 
    padding: 64px 0 40px; 
    background: linear-gradient(#FBF7F1, #FFFFFF); 
}

.tf-hero__inner { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 14px; 
    text-align: center; 
}

.tf-title { 
    margin: 0; font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(34px, 5vw, 52px); 
    font-weight: 500; 
    line-height: 1.08; 
    color: #1E3A5F; 
    letter-spacing: -0.03em; 
}

.tf-lead { 
    margin: 0; 
    max-width: 680px; 
    font-size: 18px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.tf-h2 { 
    margin: 0 0 18px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(24px, 3vw, 30px); 
    font-weight: 500; 
    color: #1E3A5F; 
}

.tf-h3 { 
    margin: 0 0 4px; 
    font-size: 17px; 
    font-weight: 600; 
    color: #1E3A5F; 
}

.tf-muted { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.tf-link { 
    font-size: 15px; 
    font-weight: 600; 
    color: #B85C0A; 
    text-decoration: none; 
}

.tf-main { 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
    padding-top: 12px; 
    padding-bottom: 56px; 
}

.tf-offer { 
    display: grid; 
    grid-template-columns: 380px minmax(0, 1fr); 
    gap: 40px; 
    align-items: center; 
    max-width: 960px; 
    width: 100%; 
    margin: 0 auto; 
    padding: 34px 38px; 
    border: 2px solid #1E3A5F; 
    border-radius: 26px; 
    background: #FFFFFF; 
    box-shadow: 0 18px 50px rgba(20, 40, 63, .12); 
}

.tf-offer__head { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 10px; 
}

.tf-badge { 
    padding: 4px 12px; 
    border-radius: 999px; 
    background: #F28C28; 
    font-size: 12px; 
    font-weight: 700; 
    color: #1E3A5F; 
}

.tf-offer__title { 
    margin: 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 26px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.tf-price { 
    margin: 0; 
    display: flex; 
    align-items: baseline; 
    gap: 8px; 
    flex-wrap: wrap; 
}

.tf-price strong { 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 52px; 
    color: #1E3A5F; 
}

.tf-price span { 
    font-size: 15px; 
    color: #5B6B7D; 
}

.tf-list { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.tf-list li { 
    position: relative; 
    padding-left: 28px; 
    font-size: 16px; 
    line-height: 1.45; 
}

.tf-list li::before { 
    content: '✓'; 
    position: absolute; 
    left: 0; 
    top: 0; 
    font-weight: 700; 
    color: #2E9E6A; 
}

.tf-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 50px; 
    padding: 0 26px; 
    border: 1.5px solid transparent; 
    border-radius: 999px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #1E3A5F; 
    text-decoration: none; 
    white-space: nowrap; 
}

.tf-btn--accent { 
    background: #F28C28; 
}

.tf-btn--accent:hover { 
    background: #E07A14; 
    color: #1E3A5F; 
}

.tf-btn--ghost-light { 
    border-color: #4A6A8E; 
    color: #FFFFFF; 
    font-weight: 500; 
}

.tf-btn--ghost-light:hover { 
    border-color: #FFFFFF; 
    color: #FFFFFF; 
}

.tf-materials { 
    display: flex; 
    align-items: center; 
    gap: 18px; 
    max-width: 960px; 
    width: 100%; 
    margin: 0 auto; 
    padding: 20px 24px; 
    border: 1px solid #CFE0F2; 
    border-radius: 18px; 
    background: #F4F8FC; 
}

.tf-materials__icon { 
    font-size: 28px; 
}

.tf-materials p { 
    margin: 0; 
    font-size: 15px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.tf-materials a { 
    font-weight: 600; 
    color: #B85C0A; 
}

.tf-promise { 
    max-width: 960px; 
    width: 100%; 
    margin: 0 auto; 
}

.tf-promise__grid { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 16px; 
}

.tf-promise__grid > div { 
    padding: 22px; 
    border: 1px solid #E3E8EE; 
    border-radius: 18px; 
    background: #FFFFFF; 
}

.tf-promise h3 { 
    margin: 0 0 6px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #1E3A5F; 
}

.tf-promise p { 
    margin: 0; 
    font-size: 14px; 
    line-height: 1.55; 
    color: #5B6B7D; 
}

.tf-faq { 
    max-width: 760px; 
    width: 100%; 
    margin: 0 auto; 
}

.tf-q { 
    margin-bottom: 10px; 
    border: 1px solid #E3E8EE; 
    border-radius: 14px; 
    background: #FFFFFF; 
}

.tf-q[open] { 
    border-color: #CFE0F2; 
}

.tf-q summary { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 12px; 
    padding: 16px 20px; 
    font-weight: 600; 
    color: #1B2A3D; 
    cursor: pointer; 
    list-style: none; 
}

.tf-q summary::-webkit-details-marker { 
    display: none; 
}

.tf-q summary::after { 
    content: '+'; 
    font-size: 20px; 
    color: #B85C0A; 
}

.tf-q[open] summary::after { 
    content: '−'; 
}

.tf-q p { 
    margin: 0; 
    padding: 0 20px 18px; 
    font-size: 15px; 
    line-height: 1.65; 
    color: #3D4E61; 
}


.tf-cta { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 28px; 
    margin: 0 0 64px; 
    padding: 40px 48px; 
    border-radius: 26px; 
    background: #1E3A5F; 
}

.tf-cta h2 { 
    margin: 0 0 6px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(24px, 3vw, 30px); 
    font-weight: 500; 
    color: #FFFFFF; 
}

.tf-cta p { 
    margin: 0; 
    font-size: 16px; 
    color: #C9D6E3; 
}

.tf-cta__actions { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    flex-shrink: 0; 
}

.cp, .cp * { 
    box-sizing: border-box; 
}

.cp-todo { 
    padding: 1px 6px; 
    border-radius: 4px; 
    background: #FFF1B8; 
    color: #6B4E00; 
}

.cp-hero { 
    padding: 32px 0 36px; 
    background: linear-gradient(#FBF7F1, #FFFFFF); 
}

.cp-crumb { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.cp-crumb a { 
    color: #5B6B7D; 
}

.cp-title { 
    margin: 10px 0 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(34px, 4.5vw, 50px); 
    font-weight: 500; 
    line-height: 1.06; 
    color: #1E3A5F; 
    letter-spacing: -0.02em; 
}

.cp-intro { 
    margin: 14px 0 0; 
    max-width: 700px; 
    font-size: 18px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.cp-facts { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px 22px; 
    margin: 16px 0 0; 
    padding: 0; 
    list-style: none; 
    font-size: 15px; 
    color: #1B5E3F; 
}

.cp-facts li::before { 
    content: '✓ '; 
    font-weight: 700; 
}

.cp-search { 
    max-width: 640px; 
    margin-top: 22px; 
}

.cp-main { 
    display: flex; 
    flex-direction: column; 
    gap: 44px; 
    padding-top: 12px; 
    padding-bottom: 64px; 
}

.cp-h2 { 
    margin: 0 0 16px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(22px, 2.6vw, 26px); 
    font-weight: 500; 
    color: #1E3A5F; 
}

.cp-head { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    gap: 16px; 
    flex-wrap: wrap; 
}

.cp-link { 
    font-size: 15px; 
    font-weight: 600; 
    color: #B85C0A; 
    text-decoration: none; 
}

.cp-link:hover { 
    text-decoration: underline; 
}

.cp-families { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 14px; 
}

.cp-family { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    padding: 16px 18px; 
    border: 1px solid #E3E8EE; 
    border-radius: 18px; 
    background: #FFFFFF; 
    color: inherit; 
    text-decoration: none; 
}

.cp-family:hover { 
    border-color: #1E3A5F; 
}

.cp-family strong { 
    display: block; 
    font-size: 16px; 
    color: #1E3A5F; 
}

.cp-family small { 
    display: block; 
    font-size: 13px; 
    color: #5B6B7D; 
}

.cp-family__img { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 56px; 
    height: 56px; 
    flex-shrink: 0; 
    border-radius: 12px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 20px; 
    font-weight: 700; 
}

.cp-family__arrow { 
    margin-left: auto; 
    font-weight: 700; 
    color: #B85C0A; 
}

.cp-bottom { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 380px; 
    gap: 28px; 
    align-items: start; 
}

.cp-tips { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    gap: 14px; 
}

.cp-tip { 
    padding: 20px 22px; 
    border: 1px solid #E3E8EE; 
    border-radius: 18px; 
    background: #FFFFFF; 
}

.cp-tip h3 { 
    margin: 0 0 6px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #1E3A5F; 
}

.cp-tip p { 
    margin: 0; 
    font-size: 14px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.cp-tip a { 
    font-weight: 600; 
    color: #B85C0A; 
}

.cp-cta { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 12px; 
    padding: 26px; 
    border-radius: 20px; 
    background: #1E3A5F; 
}

.cp-cta h2 { 
    margin: 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 24px; 
    font-weight: 500; 
    color: #FFFFFF; 
}

.cp-cta p { 
    margin: 0; 
    font-size: 15px; 
    line-height: 1.6; 
    color: #C9D6E3; 
}

.lv, .lv * { 
    box-sizing: border-box; 
}

.lv-todo { 
    padding: 1px 6px; 
    border-radius: 4px; 
    background: #FFF1B8; 
    color: #6B4E00; 
}

.lv-hero { 
    padding: 48px 0 36px; 
    background: linear-gradient(#FBF7F1, #FFFFFF); 
}

.lv-crumb { 
    margin: 0; 
    font-size: 14px; 
    color: #5B6B7D; 
}

.lv-crumb a { 
    color: #5B6B7D; 
}

.lv-title { 
    margin: 10px 0 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(32px, 4.5vw, 50px); 
    font-weight: 500; 
    line-height: 1.06; 
    color: #1E3A5F; 
    letter-spacing: -0.02em; 
}

.lv-lead { 
    margin: 14px 0 0; 
    max-width: 720px; 
    font-size: 18px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.lv-info { 
    display: flex; 
    align-items: flex-start; 
    gap: 14px; 
    max-width: 900px; 
    margin-top: 22px; 
    padding: 16px 20px; 
    border: 1px solid #CFE0F2; 
    border-radius: 16px; 
    background: #F4F8FC; 
    font-size: 15px; 
    line-height: 1.6; 
    color: #1E3A5F; 
}

.lv-info span { 
    font-size: 20px; 
}

.lv-info p { 
    margin: 0; 
}

.lv-info a { 
    font-weight: 600; 
    color: #B85C0A; 
}

.lv-main { 
    display: flex; 
    flex-direction: column; 
    gap: 52px; 
    padding-top: 12px; 
    padding-bottom: 64px; 
}

.lv-h2 { 
    margin: 0 0 16px; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: clamp(22px, 2.6vw, 28px); 
    font-weight: 500; 
    color: #1E3A5F; 
}

.lv-link { 
    font-size: 15px; 
    font-weight: 600; 
    color: #B85C0A; 
    text-decoration: none; 
}

.lv-options { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 22px; 
}

.lv-opt { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
    padding: 28px; 
    border: 1px solid #E3E8EE; 
    border-radius: 24px; 
    background: #FFFFFF; 
}

.lv-opt h2 { 
    margin: 0; 
    font-family: var(--font-display, Georgia, serif); 
    font-size: 26px; 
    font-weight: 500; 
    color: #1E3A5F; 
}

.lv-opt > p { 
    margin: 0; 
    font-size: 15px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.lv-opt__icon { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 52px; 
    height: 52px; 
    border-radius: 14px; 
    background: #FFF1E3; 
    font-size: 26px; 
}

.lv-kv { 
    margin: 0; 
}

.lv-kv div { 
    display: flex; 
    justify-content: space-between; 
    gap: 16px; 
    padding: 11px 0; 
    border-bottom: 1px solid #EEF1F4; 
    font-size: 15px; 
}

.lv-kv div:last-child { 
    border-bottom: 0; 
}

.lv-kv dt { 
    color: #5B6B7D; 
    flex-shrink: 0; 
}

.lv-kv dd { 
    margin: 0; 
    text-align: right; 
}

.lv-steps { 
    display: grid; 
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    counter-reset: step; 
}

.lv-steps li { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    padding: 22px; 
    border: 1px solid #E3E8EE; 
    border-radius: 18px; 
    background: #FFFFFF; 
    counter-increment: step; 
}

.lv-steps li::before { 
    content: counter(step); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    background: #1E3A5F; 
    color: #FFFFFF; 
    font-weight: 700; 
}

.lv-steps h3 { 
    margin: 0; 
    font-size: 17px; 
    font-weight: 600; 
    color: #1E3A5F; 
}

.lv-steps p { 
    margin: 0; 
    font-size: 14px; 
    line-height: 1.6; 
    color: #3D4E61; 
}

.lv-bottom { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 
    gap: 32px; 
    align-items: start; 
}

.lv-card { 
    padding: 24px 28px; 
    border: 1px solid #E3E8EE; 
    border-radius: 20px; 
    background: #FFFFFF; 
}

.lv-card .lv-h2 { 
    margin-bottom: 6px; 
}

.lv-check { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}

.lv-check li { 
    position: relative; 
    padding: 14px 0 14px 28px; 
    border-bottom: 1px solid #EEF1F4; 
    font-size: 15px; 
    line-height: 1.55; 
}

.lv-check li:last-child { 
    border-bottom: 0; 
}

.lv-check li::before { 
    content: '✓'; 
    position: absolute; 
    left: 0; 
    top: 14px; 
    font-weight: 700; 
    color: #2E9E6A; 
}

.lv-q { 
    margin-bottom: 8px; 
    border: 1px solid #E3E8EE; 
    border-radius: 14px; 
    background: #FFFFFF; 
}

.lv-q[open] { 
    border-color: #CFE0F2; 
}

.lv-q summary { 
    display: flex; 
    justify-content: space-between; 
    gap: 12px; 
    padding: 16px 20px; 
    font-weight: 600; 
    color: #1B2A3D; 
    cursor: pointer; 
    list-style: none; 
}

.lv-q summary::-webkit-details-marker { 
    display: none; 
}

.lv-q summary::after { 
    content: '+'; 
    font-size: 20px; 
    color: #B85C0A; 
}

.lv-q[open] summary::after { 
    content: '−'; 
}

.lv-q p { 
    margin: 0; 
    padding: 0 20px 18px; 
    font-size: 15px; 
    line-height: 1.65; 
    color: #3D4E61; 
}

.dm-page { background: linear-gradient(#FBF7F1 0, #FAFBFC 420px); }
.dm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 56px; align-items: start; padding-top: 16px; }
.dm-kicker { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #B85C0A; }
.dm-title { margin: 8px 0 14px; font-family: var(--font-display, Georgia, serif); font-size: clamp(32px, 4vw, 48px); font-weight: 500; line-height: 1.06; color: #1E3A5F; letter-spacing: -0.02em; }
.dm-steps { margin: 24px 0 0; padding: 8px 24px; list-style: none; counter-reset: step; border: 1px solid #E3E8EE; border-radius: 20px; background: #FFFFFF; }
.dm-steps li { position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid #EEF1F4; counter-increment: step; }
.dm-steps li:last-child { border-bottom: 0; }
.dm-steps li::before { content: counter(step); position: absolute; left: 0; top: 14px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #FFF1E3; color: #B85C0A; font-weight: 700; }
.dm-steps h2 { margin: 0 0 3px; font-size: 16px; font-weight: 600; color: #1E3A5F; }
.dm-steps p { margin: 0; font-size: 14px; line-height: 1.55; color: #3D4E61; }
.dm-alt { margin: 22px 0 0; padding: 16px 20px; border: 1px solid #CFE0F2; border-radius: 16px; background: #F4F8FC; font-size: 15px; line-height: 1.6; color: #1E3A5F; }
.dm-alt a { font-weight: 600; color: #B85C0A; white-space: nowrap; }

.dm-form { box-shadow: 0 18px 50px rgba(20, 40, 63, .10); }
.dm-form__title { margin: 0; font-family: var(--font-display, Georgia, serif); font-size: 24px; font-weight: 500; color: #1E3A5F; }
.dm-form select { width: 100%; min-height: 46px; padding: 0 12px; border: 1.5px solid #D5DCE4; border-radius: 12px; font: inherit; font-size: 15px; color: #1B2A3D; background: #FFFFFF; }
.dm-form select:focus { outline: 3px solid #F9D3AE; border-color: #1E3A5F; }
.ctc-field.is-error select { border-color: #B42318; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.dm-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1.5px solid #D5DCE4; border-radius: 12px; background: #FFFFFF; font-size: 15px; cursor: pointer; }
.dm-chip:hover { border-color: #1E3A5F; }
.dm-chip:has(input:checked) { border-color: #1E3A5F; background: #F4F8FC; font-weight: 600; }
.dm-chip:has(input:focus-visible) { outline: 3px solid #F9D3AE; }
.dm-chip input { width: 18px; height: 18px; margin: 0; accent-color: #1E3A5F; }
/* Les cases à cocher ne doivent pas prendre le style des champs texte de contact.css */
.ctc-field .dm-chip input[type="checkbox"] { flex: 0 0 auto; width: 18px; min-height: 0; height: 18px; padding: 0; border: 0; border-radius: 4px; outline: none; }
.dm-submit { width: 100%; min-height: 52px; }
.dm-center { text-align: center; }

.fe, .fe * { box-sizing: border-box; }
.fe-todo { padding: 1px 6px; border-radius: 4px; background: #FFF1B8; color: #6B4E00; }
.fe-hero { padding: 52px 0 36px; background: linear-gradient(#FBF7F1, #FFFFFF); }
.fe-kicker { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #B85C0A; }
.fe-title { margin: 8px 0 14px; max-width: 900px; font-family: var(--font-display, Georgia, serif); font-size: clamp(32px, 4.4vw, 48px); font-weight: 500; line-height: 1.08; color: #1E3A5F; letter-spacing: -0.02em; }
.fe-lead { margin: 0; max-width: 760px; font-size: 18px; line-height: 1.6; color: #3D4E61; }
.fe-meta { margin: 12px 0 0; font-size: 13px; color: #5B6B7D; }
.fe-meta a, .fe-disclaimer a { color: #5B6B7D; }

.fe-main { display: flex; flex-direction: column; gap: 52px; padding-top: 12px; padding-bottom: 64px; }
.fe-h2 { margin: 0 0 16px; font-family: var(--font-display, Georgia, serif); font-size: clamp(22px, 2.6vw, 28px); font-weight: 500; color: #1E3A5F; }

.fe-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fe-step { padding: 24px 26px; border: 1px solid #E3E8EE; border-radius: 20px; background: #FFFFFF; }
.fe-step.is-current { border: 2px solid #1E3A5F; }
.fe-badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.fe-badge.is-now { background: #D8F0E4; color: #1B5E3F; }
.fe-badge.is-soon { background: #FFF1E3; color: #8A4A08; }
.fe-date { margin: 10px 0 0; font-family: var(--font-display, Georgia, serif); font-size: 26px; font-weight: 600; color: #1E3A5F; }
.fe-step h3 { margin: 10px 0 6px; font-size: 17px; font-weight: 600; color: #1B2A3D; }
.fe-step p { margin: 0; font-size: 15px; line-height: 1.6; color: #3D4E61; }

.fe-two { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 32px; align-items: start; }
.fe-card { padding: 22px 28px 10px; border: 1px solid #E3E8EE; border-radius: 20px; background: #FFFFFF; }
.fe-card .fe-h2 { margin-bottom: 4px; font-size: 24px; }
.fe-actions { margin: 0; padding: 0; list-style: none; counter-reset: act; }
.fe-actions li { position: relative; padding: 18px 0 18px 50px; border-bottom: 1px solid #EEF1F4; counter-increment: act; }
.fe-actions li:last-child { border-bottom: 0; }
.fe-actions li::before { content: counter(act); position: absolute; left: 0; top: 18px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #1E3A5F; color: #FFFFFF; font-weight: 700; }
.fe-actions h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: #1E3A5F; }
.fe-actions p { margin: 0; font-size: 15px; line-height: 1.6; color: #3D4E61; }
.fe-actions a { font-weight: 600; color: #B85C0A; }

.fe-us { padding: 24px 26px; border-radius: 20px; background: #1E3A5F; }
.fe-us h2 { margin: 0 0 6px; font-family: var(--font-display, Georgia, serif); font-size: 24px; font-weight: 500; color: #FFFFFF; }
.fe-us__item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #2C4A6E; }
.fe-us__item:last-child { border-bottom: 0; }
.fe-us__item > span { font-size: 20px; }
.fe-us h3 { margin: 0 0 2px; font-size: 16px; font-weight: 600; color: #FFFFFF; }
.fe-us p { margin: 0; font-size: 14px; line-height: 1.55; color: #C9D6E3; }

.fe-disclaimer { margin: 0; padding: 16px 20px; border-radius: 16px; background: #F4F6F8; font-size: 14px; line-height: 1.6; color: #3D4E61; }

@media (max-width: 480px) {
    .qe-row-2 { 
        grid-template-columns: 1fr; 
    }
}

@media (max-width: 560px) {
    .form__row { 
        grid-template-columns: 1fr; 
    }

    .ct-grid { 
        grid-template-columns: 1fr 1fr; 
        gap: 10px; 
    }

    .ct-card__img { 
        height: 110px; 
    }

    .ct-buy__row { 
        grid-template-columns: 1fr; 
    }

    .tf-btn { 
        width: 100%; 
    }

    .tf-cta__actions { 
        width: 100%; 
    }

    .lv-steps { 
        grid-template-columns: 1fr; 
    }

    .lv-kv div { 
        flex-direction: column; 
        gap: 2px; 
    }

    .lv-kv dd { 
        text-align: left; 
    }
}

@media (max-width: 600px) {
    .ft-hero { 
        padding: 48px 0 40px; 
    }

    .ft-row, .ft-more-features { 
        padding: 48px 0; 
    }

    .ft-grid { 
        grid-template-columns: 1fr; 
    }

    .ft-btn { 
        width: 100%; 
    }

    .ft-actions { 
        width: 100%; 
    }
}

@media (max-width: 640px) {
    .site-header__inner { 
        padding-block: 18px; 
    }

    .logo { 
        font-size: 26px; 
    }

    .btn--lg { 
        width: 100%; 
    }

    .devis-card { 
        padding: 20px; 
    }

    .testimonial { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 8px; 
    }

    .testimonial__mark { 
        font-size: 80px; 
    }

    .difference__label { 
        font-size: 18px; 
    }

    .difference__grid { 
        grid-template-columns: 1fr; 
        gap: 24px; 
    }

    .site-footer__grid { 
        grid-template-columns: 1fr 1fr; 
        gap: 36px 24px; 
    }

    .site-footer__bottom { 
        flex-direction: column; 
        align-items: flex-start; 
    }

    .dashboard { 
        padding-block: 32px 56px; 
        gap: 24px; 
    }

    .dashboard__actions { 
        width: 100%; 
    }

    .dashboard__actions .btn { 
        flex: 1 1 100%; 
    }

    .stats { 
        gap: 12px; 
    }

    .stat { 
        padding: 18px; 
    }

    .stat__value { 
        font-size: 30px; 
    }

    .card__head, .todo, .order { 
        padding-inline: 18px; 
    }

    .ql { 
        padding-block: 28px 56px; 
        gap: 22px; 
    }

    .ql-head .btn { 
        width: 100%; 
    }

    .ql-kpis { 
        gap: 12px; 
    }

    .ql-kpi { 
        padding: 16px; 
    }

    .ql-kpi__value { 
        font-size: 24px; 
    }

    .ql-tabs { 
        flex-wrap: nowrap; 
        overflow-x: auto; 
        padding-bottom: 4px; 
    }

    .ql-tab { 
        flex-shrink: 0; 
    }

    .ql-search, .ql-select { 
        width: 100%; 
    }

    .co { 
        padding-block: 28px 32px; 
    }

    .co-grid, .co-grid--3 { 
        grid-template-columns: 1fr; 
    }

    .co-span-2 { 
        grid-column: auto; 
    }

    .card__head { 
        flex-direction: column; 
    }

    .co-progress { 
        flex-direction: column; 
        align-items: stretch; 
    }

    .co-savebar__state { 
        display: none; 
    }

    .co-savebar__actions { 
        width: 100%; 
    }

    .co-savebar__actions .btn { 
        flex: 1 1 auto; 
    }

    .inv-card { 
        padding: 24px; 
    }

    .inv-row { 
        grid-template-columns: 1fr; 
    }

    .co-user { 
        flex-wrap: wrap; 
    }

    .inv-actions { 
        width: 100%; 
        justify-content: flex-start; 
        min-width: 0; 
    }

    .qf-form fieldset, .qf-card__head, .qf-checks, .qf-actions { 
        padding-left: 18px; 
        padding-right: 18px; 
    }

    .qf-actions .qf-btn { 
        flex: 1 1 auto; 
    }

    .qp-doc { 
        padding: 18px 16px; 
    }

    .qp-doc__parties, .qp-reasons { 
        grid-template-columns: 1fr; 
    }

    .cl-kpis, .cl-grid-2, .cl-grid-3 { 
        grid-template-columns: 1fr; 
    }

    .cl-head__actions .cl-btn { 
        flex: 1 1 auto; 
    }

    .ac-grid { 
        grid-template-columns: 1fr; 
    }

    .ac-grid > div:empty { 
        display: none; 
    }

    .ac-actions--between, .ac-row, .ac-pending { 
        flex-direction: column; 
        align-items: stretch; 
    }

    .ctc-form { 
        padding: 22px 18px; 
    }

    .ctc-grid, .ctc-subjects { 
        grid-template-columns: 1fr; 
    }

    .ctc-submit { 
        flex-direction: column; 
        align-items: stretch; 
    }
}

@media (max-width: 760px) {
    .qe-topbar { 
        position: static; 
    }

    .qe-two, .qe-row-3 { 
        grid-template-columns: 1fr; 
    }

    .qe-topbar__actions { 
        width: 100%; 
    }

    .qe-topbar__actions .btn { 
        flex: 1 1 auto; 
    }
    
    .qe-coef { 
        width: 100%; 
        justify-content: space-between; 
    }

    .card__head { 
        flex-wrap: wrap; 
    }

    .qe-result { 
        flex-direction: column; 
        align-items: stretch; 
    }

    .qe-result__right { 
        justify-content: space-between; 
    }
}

@media (max-width: 900px) {
    .nav-toggle { 
        display: flex; 
    }

    .main-nav {
        display: none;
        position: absolute; 
        top: 100%; 
        left: 0; 
        right: 0;
        flex-direction: column; 
        align-items: stretch; 
        gap: 0;
        padding: 8px var(--gutter) 24px; 
        background: var(--navy);
        border-top: 1px solid var(--navy-line);
    }

    .main-nav.is-open { 
        display: flex; 
    }

    .main-nav__link { 
        padding: 14px 0; 
        border-bottom: 1px solid #2E4C72; 
    }

    .main-nav .btn { 
        margin-top: 16px; 
    }

    .steps { 
        grid-template-columns: 1fr; 
        gap: 20px; 
    }

    .step { 
        padding: 28px; 
    }

    .user-menu { 
        margin-top: 16px; 
    }

    .user-menu__toggle { 
        justify-content: flex-start; 
    }

    .user-menu__company { 
        max-width: none; 
        flex: 1 1 auto; 
    }

    .user-menu__panel {
        position: static; 
        width: auto; 
        margin-top: 10px;
        box-shadow: none;
    }

    .ac-layout { 
        grid-template-columns: 1fr; 
    }

    .ac-nav { 
        position: static; 
        flex-direction: row; 
        flex-wrap: wrap; 
    }

    .ac-nav__note { 
        display: none; 
    }

    .tf-offer { 
        grid-template-columns: 1fr; 
        gap: 24px; 
        padding: 26px 22px; 
    }

    .tf-promise__grid { 
        grid-template-columns: 1fr; 
    }

    .tf-cta { 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 32px 26px; 
    }
}

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

    .auth__aside {
        position: static; 
        height: auto; 
        max-width: none; 
        flex-basis: auto;
        padding-block: 28px 32px; 
        gap: 24px;
    }

    .auth__lead, .auth__benefits, .auth__help { 
        display: none; 
    }

    .auth__title { 
        font-size: 30px; 
    }

    .auth__main { 
        align-items: flex-start; 
        padding-block: 32px 56px; 
    }

    .ft-row__inner { 
        grid-template-columns: 1fr; 
        gap: 32px; 
    }

    .ft-row__inner--reverse .ft-text { 
        order: 0; 
    }

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

    .ft-cta { 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 36px 28px; 
    }

    .ft-cta .ft-actions { 
        justify-content: flex-start; 
    }

    .cp-bottom { 
        grid-template-columns: 1fr; 
    }

    .cp-tips { 
        grid-template-columns: 1fr; 
    }

    .lv-options, .lv-bottom { 
        grid-template-columns: 1fr; 
    }

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

    .fe-timeline, .fe-two { 
        grid-template-columns: 1fr; 
    }
}

@media (max-width: 1000px) { 
    .ql-table-wrap { 
        overflow: visible; 
    }

    .co-layout { 
        grid-template-columns: 1fr; 
    }

    .co-nav { 
        position: static; 
        flex-direction: row; 
        overflow-x: auto; 
    }

    .co-nav__item { 
        flex-shrink: 0; 
    }

    .co-logo { 
        grid-template-columns: 1fr; 
    }

    .qf-grid { 
        grid-template-columns: 1fr; 
    }

    .qp-layout { 
        grid-template-columns: 1fr; 
    }

    .qp-side { 
        position: static; 
    }

    .cl-grid { 
        grid-template-columns: 1fr; 
    }

    .cl-kpis--4 { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }

    .ct-layout, .ct-product { 
        grid-template-columns: 1fr; 
    }

    .ct-side { 
        order: 2; 
    }

    .ct-product__img { 
        height: 280px; 
    }

    .ct-head__note { 
        text-align: left; 
    }

    .ctc-layout { 
        grid-template-columns: 1fr; 
    }

    .dm-layout { 
        grid-template-columns: 1fr; 
        gap: 32px; 
    }
}

@media (max-width: 1100px) {
    .stats { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }

    .dashboard__grid { 
        grid-template-columns: 1fr; 
    }

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

@media (max-width: 1180px) {
    .hero__inner { flex-direction: column; 
        align-items: stretch; 
        gap: 56px; 
    }

    .devis-card { 
        flex-basis: auto; 
        width: 100%; 
        max-width: 620px; 
        align-self: center; 
    }

    .difference__body { 
        flex-direction: column; 
        gap: 40px; 
    }

    .difference__grid { 
        flex-basis: auto; 
        width: 100%; 
    }

    .site-footer__grid { 
        grid-template-columns: repeat(3, minmax(0, 1fr)); 
    }

    .site-footer__brand { 
        grid-column: 1 / -1; 
    }

    .qe-layout { 
        grid-template-columns: 1fr; 
    }

    .qe-side { 
        position: static; 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    }
}

@media (min-width: 1181px) {
    .difference__title { 
        white-space: nowrap; 
    }
}