body {
    font-family: titillium, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /*user-select: none;*/
    -webkit-tap-highlight-color: transparent;
    overflow-y: scroll;
    margin: 0;
    color: var(--c1);
    background-color: var(--page-bg);
    --green: #7cb270;
    --white: #ffffff;
    --badge-bg: #f44336;
    --badge-c: #ffffff;
    --transparent-bg2: rgba(0,0,0,0.4);
    --mainitem-flex: 1 1 auto;
    --mainitem-width: 150px;
    --mainitem-height: 50px;
    --mainitem-margin: 5px;
    --mainitem-subtitle: none;
    --client-bg1: #e5e5e5;
    --client-bg2: #ffffff;
    --forms: #ededed;
    --bg1: #e3e3e3;
    --bg2: #f5f7f8;
    --bg3: #ffffff;
    --c1: #1d2327;
    --c2: #5f6b73;
    --button-bg: #cccccc;
    --red: #d6334b;
    --yellow: #f59b10;
    --watermark-c: #dbdbdb;
    --input_bg: #FFFFFF;
    --input_border: #cdd3d8;
    --accent: #008066;
    --accent-soft: rgba(0,128,102,.15);
    --accent-tint: rgba(0,128,102,.05);
    --on-accent: #ffffff;
    --page-bg: #eef1f3;
    --card-bg: #ffffff;
    --card-border: #e1e6ea;
    --card-shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 32px rgba(16,24,40,.07);
    --label-width: 200px;
}
html[data-theme="dark"] {
    color-scheme: dark;
}
html[data-theme="dark"] body {
    --client-bg1: #232323;
    --client-bg2: #161616;
    --forms: #1E1E1E;
    --bg1: #282828;
    --bg2: #333333;
    --bg3: #474747;
    --c1: #ffffff;
    --c2: #939393;
    --button-bg: #3D3D3D;
    --red: #ef4d64;
    --yellow: #f59b10;
    --watermark-c: #202020;
    --input_bg: #1E1E1E;
    --input_border: #5B5B5B;
    --accent: #4ae5c5;
    --accent-soft: rgba(74,229,197,.18);
    --accent-tint: rgba(74,229,197,.07);
    --on-accent: #0f1f1b;
    --page-bg: #161616;
    --card-bg: #242424;
    --card-border: #333333;
    --card-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
}

/* page: centered column with header, form card and footer */
.page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 24px 24px 24px;
}
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 22px 4px;
}
/* light/dark switch in the header, shows the icon of the mode it switches to */
.theme-toggle {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    background-color: var(--card-bg);
    color: var(--c2);
    cursor: pointer;
    box-shadow: none;
}
.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.theme-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.theme-toggle .icon-sun, html[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}
html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}
/* upload page (../upload/): language switch next to the theme switch */
.header-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.language-switch {
    height: 36px;
    padding: 0 30px 0 14px;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background-color: var(--card-bg);
    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 1.5l5 5 5-5' fill='none' stroke='%235f6b73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--c2);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
html[data-theme="dark"] .language-switch {
    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 1.5l5 5 5-5' fill='none' stroke='%23939393' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.language-switch:hover, .language-switch:focus {
    outline: none;
    color: var(--accent);
    border-color: var(--accent);
}
.page-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--c1);
}
.page-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background-color: var(--accent);
}

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    color: var(--c1);
}
input[type="checkbox"] {
    margin-left: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* text fields */
.content input[type="text"], .content input[type="email"], .content select, .content textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    line-height: 1.4;
    border: 1px solid var(--input_border);
    border-radius: 8px;
    background-color: var(--input_bg);
    transition: border-color .15s, box-shadow .15s;
}
.content input[type="text"]:hover, .content input[type="email"]:hover, .content select:hover:not(:disabled), .content textarea:hover {
    border-color: var(--c2);
}
.content input[type="text"]:focus, .content input[type="email"]:focus, .content select:focus, .content textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.content select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    cursor: pointer;
    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 1.5l5 5 5-5' fill='none' stroke='%235f6b73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
html[data-theme="dark"] .content select {
    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 1.5l5 5 5-5' fill='none' stroke='%23939393' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.content select:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.content textarea {
    resize: vertical;
    height: 260px;
    min-height: 120px;
}

/* buttons: primary (submit, start analysis) and secondary */
.content input[type="button"] {
    padding: 8px 18px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background-color: transparent;
    color: var(--accent);
    font-weight: bold;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s, filter .15s;
}
.content input[type="button"]:hover {
    background-color: var(--accent-tint);
}
.content input[type="button"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.content #submit, .content #startAnalysis {
    background-color: var(--accent);
    color: var(--on-accent);
}
.content #submit:hover, .content #startAnalysis:hover {
    background-color: var(--accent);
    filter: brightness(1.08);
}
.content #submit {
    padding: 10px 28px;
    font-size: 16px;
}
.content input[type="button"]:disabled, .content input[type="button"]:disabled:hover {
    opacity: .4;
    filter: none;
    cursor: not-allowed;
}
/* box above the submit button: why the ticket cannot be submitted yet */
.content .submit-hint {
    display: none;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--yellow);
    border-left-width: 4px;
    border-radius: 10px;
    background-color: var(--bg2);
    cursor: pointer;
}
.content .submit-hint.show {
    display: block;
}
.content .submit-hint::before {
    content: "\26A0";
    color: var(--yellow);
    margin-right: 8px;
}

a:active, a:visited {
    color: unset;
}
.content a {
    color: var(--accent);
}

span.link {
    cursor: pointer;
    text-decoration: underline;
}

/* form card */
.content {
    padding: 32px 36px;
    color: var(--c1);
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
}
/* grid: label | field | help, the error goes below the field */
.content > div.view {
    display: grid;
    grid-template-columns: var(--label-width) minmax(0, 1fr) 22px;
    gap: 18px 20px;
    align-items: start;
}
.content > div.view > label {
    grid-column: 1;
    padding-top: 8px;
    font-weight: bold;
    color: var(--c1);
}
.content > div.view > .help {
    padding-top: 9px;
}
/* upload page: read-only values (ticket, holder) */
.content > div.view > .value {
    padding-top: 8px;
    overflow-wrap: anywhere;
}
/* read-only row directly below another one, closer than the rows of the fields */
.content > div.view > .compact {
    margin-top: -14px;
}
.content textarea#message {
    height: 140px;
}
.content > div.view > .error {
    grid-column: 2 / 4;
    margin-top: -12px;
    font-size: 14px;
}
/* field with a submit error */
.content > div.view > :is(input, select, textarea):has(+ .help + .error.submit-error:not(:empty)) {
    border-color: var(--red);
}
.content > div.view > .error:empty {
    display: none !important;
}
.content > div.view hr {
    grid-column: 1 / -1;
    border: none;
    border-top: 1px solid var(--card-border);
    margin: 8px 0;
}

.content .step2 {
    display: none;
}
.content .step3 {
    display: none;
}
.content .error {
    color: var(--red);
}
/* aligned with the fields: label column + gap on the left, help column + gap on the right */
.content .submit-wrapper {
    margin: 28px calc(22px + 20px) 0 calc(var(--label-width) + 20px);
}
.content .submit-message:not(:empty) {
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--red);
    border-left-width: 4px;
    border-radius: 10px;
    background-color: var(--bg2);
}
.content .submit-message.info {
    color: var(--c2);
    border-color: var(--input_border);
}
.content .submit-success {
    display: none;
    padding: 20px 24px;
    border: 1px solid var(--green);
    border-left-width: 4px;
    border-radius: 10px;
    background-color: var(--bg2);
}
.content .submit-success .title {
    font-size: 20px;
    font-weight: bold;
    color: var(--green);
}

/* optional fields as chips */
.content .optionalLink {
    display: inline-block;
    margin: 2px 8px 6px 0;
    padding: 4px 12px;
    border: 1px dashed var(--input_border);
    border-radius: 999px;
    font-size: 14px;
    color: var(--c2);
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.content .optionalLink:hover {
    border-color: var(--accent);
    color: var(--accent);
    background-color: var(--accent-tint);
}
.content .optionalLink::before {
    content: "+ ";
}
/* input of an optional field with its remove button (shown when the field is added) */
.content div.optional-input:not(.hide) {
    display: flex;
}
.content div.optional-input {
    align-items: center;
    gap: 8px;
}
/* remove button of an optional field, same height as the input */
.content .optionalRemove {
    flex: none;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    line-height: 34px;
    text-align: center;
    border: 1px solid var(--input_border);
    border-radius: 8px;
    font-size: 22px;
    color: var(--c2);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, color .15s, background-color .15s;
}
.content .optionalRemove:hover {
    border-color: var(--red);
    color: var(--red);
    background-color: var(--bg2);
}

/* privacy consent (shown inline by jQuery) */
.content .privacy {
    padding-top: 8px;
}
.content .privacy input {
    vertical-align: -3px;
    margin-right: 6px;
}
.content .privacy label {
    cursor: pointer;
}

/* file upload */
.content #dropzone {
    min-height: 120px;
    border: 2px dashed var(--input_border);
    border-radius: 10px;
    background-color: var(--bg2);
    background-image: none;
    transition: border-color .15s, background-color .15s;
}
.content #dropzone .dz-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 18px 0;
    color: var(--c2);
}
.content #dropzone .dz-message svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.content #dropzone.dz-started .dz-message {
    display: none;
}
.content #dropzone:hover, .content #dropzone.dz-drag-hover {
    border-color: var(--accent);
    background-color: var(--accent-tint);
}

.instant-tooltip {
    position: absolute;
    max-width: 320px;
    background: #1d2327;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    pointer-events: none;
    z-index: 1000;
}
.content .help svg {
    width: 20px;
    height: 20px;
    cursor: help;
    border-radius: 10px;
    fill: var(--accent);
    opacity: .45;
    transition: opacity .15s;
}
.content .help:hover svg, .content .help:focus-visible svg {
    opacity: 1;
}
.content .help:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 50%;
}

.content .AI-Feedback-Wrapper .result, .content .AI-Feedback .result {
    width: 20px;
    background: grey;
    height: 20px;
    border-radius: 10px;
    float: left;
    margin-right: 15px;
    margin-top: 3px;
}
.content .AI-Feedback-Wrapper .result.ok, .content .AI-Feedback .result.ok {
    background: var(--green);
}
.content .AI-Feedback-Wrapper .result.nok, .content .AI-Feedback .result.nok {
    background: var(--red);
}
.content .AI-Feedback-Wrapper .result.warning, .content .AI-Feedback .result.warning {
    background: var(--yellow);
}
/* AI analysis steps */
.content #startAnalysis {
    margin-top: 10px;
}
/* no status dot before the analysis has run */
.content .AI-Feedback-Wrapper > .result.none {
    display: none;
}
.content .analysis-steps {
    display: none;
    clear: both;
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0;
}
.content .analysis-steps > li {
    display: grid;
    grid-template-columns: 16px auto;
    column-gap: 10px;
    margin-bottom: 6px;
}
.content .analysis-steps > li[data-state="pending"] {
    opacity: 0.5;
}
.content .AI-Feedback-Wrapper .analysis-steps .result {
    grid-row: 1 / span 3;
    width: 16px;
    height: 16px;
    margin: 2px 0 0 0;
    float: none;
}
.content .analysis-steps .result .spinner {
    width: 16px;
    height: 16px;
}
.content .analysis-steps .title {
    font-weight: bold;
}
.content .analysis-steps .text {
    grid-column: 2;
}
.content .analysis-steps .text:empty, .content .analysis-steps .links:empty {
    display: none;
}
.content .analysis-steps .links {
    grid-column: 2;
    margin: 4px 0 0 0;
    padding-left: 18px;
}
/* open criteria of the AI feedback, colored dot like the result */
.content .analysis-steps .links li.nok::marker {
    color: var(--red);
}
.content .analysis-steps .links li.warning::marker {
    color: var(--yellow);
}
/* step for the external AI only: lock instead of the status dot, button to the consent box */
.content .AI-Feedback-Wrapper .analysis-steps .result.locked {
    border-radius: 0;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.content .analysis-steps > li[data-state="locked"] .text {
    color: var(--accent);
}
.content .analysis-steps .step-unlock {
    display: none;
}
.content .analysis-steps > li[data-state="locked"] .step-unlock {
    display: block;
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
    padding: 2px 10px;
    cursor: pointer;
}
.ai-external .content .analysis-steps > li[data-state="locked"] .step-unlock {
    display: none;
}
/* config check: file name if several configs are uploaded */
.content .analysis-steps .links .file {
    font-weight: bold;
}
.content .AI-Feedback.highlight {
    box-shadow: 0 0 0 3px var(--accent);
}
.content .firmware-check .firmware-hint {
    margin-top: 5px;
}
/* upload page: findings of the config check, colored marker like the status dot */
.content .config-findings {
    margin: 4px 0 0 0;
    padding-left: 18px;
}
.content .config-findings:empty {
    display: none;
}
.content .config-findings li.nok::marker {
    color: var(--red);
}
.content .config-findings li.warning::marker {
    color: var(--yellow);
}
.content .config-findings .file {
    font-weight: bold;
}
.content .AI-Feedback-Wrapper .result.none {
    background: unset;
}

.content .hide, .content .AI-Feedback {
    display: none;
    grid-template-columns: max-content auto;
}
/* note below the AI solution: suggestion without guarantee */
.content .AI-Feedback .ai-disclaimer {
    grid-column: 2;
    margin-top: 6px;
    font-size: 13px;
    color: var(--c2);
}

#footer {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--c2);
}
#footer a {
    color: var(--c2);
    text-decoration: none;
}
#footer a:hover {
    color: var(--accent);
    text-decoration: underline;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spinner {
    display: inline-block;
    animation: spin 2s linear infinite;
    width:  20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(data:image/webp;base64,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);
    background-size: cover;
}
/* external AI promo */
.content .ai-promo {
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 14px 18px;
    background-color: var(--accent-tint);
    transition: box-shadow .3s;
}
.content .ai-promo.highlight {
    box-shadow: 0 0 0 3px var(--accent);
}
.content .ai-promo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.content .ai-promo-title {
    font-size: 17px;
    font-weight: bold;
    color: var(--accent);
}
.content .ai-promo-badge {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--white);
    background-color: var(--green);
}
.content .ai-promo-benefits {
    margin: 8px 0 10px 0;
    padding-left: 20px;
}
.content .ai-promo-benefits li {
    margin-bottom: 3px;
}
.content .ai-promo-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background-color: var(--card-bg);
    font-weight: bold;
    cursor: pointer;
}
.content .ai-promo-consent input {
    margin-top: 4px;
    flex: none;
}
.content .ai-promo-active {
    display: none;
    color: var(--green);
    font-weight: bold;
    margin-bottom: 8px;
}
.ai-external .content .ai-promo {
    border-left-color: var(--green);
}
.ai-external .content .ai-promo-active {
    display: block;
}
.content .ai-promo-nudge {
    display: none;
    clear: both;
    margin-top: 18px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px dashed var(--accent);
    white-space: nowrap;
}
.content .ai-promo-nudge.show {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-external .content .ai-promo-nudge.show {
    display: none;
}
.content .ai-promo-nudge input {
    margin-left: auto;
    padding: 2px 10px;
    cursor: pointer;
}

/* small screens: label above the field */
@media (max-width: 720px) {
    .page {
        padding: 20px 12px;
    }
    .page-title {
        font-size: 22px;
    }
    .content {
        padding: 20px 16px;
        border-radius: 10px;
    }
    .content > div.view {
        grid-template-columns: minmax(0, 1fr) 22px;
        gap: 14px 12px;
    }
    .content > div.view > label {
        grid-column: 1 / -1;
        padding-top: 0;
        margin-bottom: -8px;
    }
    .content > div.view > .error {
        grid-column: 1 / -1;
        margin-top: -8px;
    }
    /* upload page: label directly above the read-only value, the normal row gap between the rows */
    .content > div.view > .value {
        padding-top: 0;
    }
    .content > div.view > .compact {
        margin-top: 0;
    }
    .content .submit-wrapper {
        margin-left: 0;
        margin-right: calc(22px + 12px);
    }
    .content .ai-promo-nudge {
        white-space: normal;
    }
}