/* =====================================================================================================
   Support area pages: page styles on top of fk-theme.css (fk-* components are defined there and are
   not redefined here). Every rule is scoped to a page root class (or to one of the area's modal
   templates) so nothing leaks into other pages.

     1. Shared bits of the area (page head main column, field errors, OTP inputs)
     2. Auth pages: login, password reset            (.fk-auth, .fk-page-login, .fk-page-pwreset)
     3. API reference + Swagger UI harmonisation     (.fk-page-api, #api-docs-ui)
     4. Tickets list, new ticket, ticket modal       (.fk-page-tickets, .fk-page-ticket, .fk-ticket-modal)
     5. Account security (2FA) + its modals          (.fk-page-security)
     6. Home                                         (.fk-page-home)
     7. Language modal                               (.fk-lang-modal)
     8. Responsive
   ===================================================================================================== */


/* -----------------------------------------------------------------------------------------------------
   1. Shared bits of the area
   ----------------------------------------------------------------------------------------------------- */

/* Title + subtitle column of a page head with actions on the right: it takes the free width, so a long
   subtitle wraps under the title instead of pushing the actions to a new line */
body.fk .fk-sup-head-main {
    flex: 1 1 420px;
    min-width: 0;
}

body.fk .fk-sup-head-main > .fk-page-sub {
    max-width: 760px;
    margin-bottom: 0;
}

/* Inline validation message under a field */
body.fk .fk-sup-field-error {
    display: block;
    margin-top: 4px;
    color: var(--fk-bad-ink);
    font-size: .78rem;
    font-weight: 500;
}

/* One-time codes (login MFA step, 2FA setup / regenerate modals) */
body.fk .fk-sup-otp {
    height: 52px;
    padding-left: calc(12px + .4em);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: .4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.fk .fk-sup-otp.is-backup {
    padding-left: calc(12px + .2em);
    font-size: 1.2rem;
    letter-spacing: .2em;
}

body.fk .fk-sup-otp::placeholder {
    color: #b6bcc8;
}


/* -----------------------------------------------------------------------------------------------------
   2. Auth pages: a centred card on the soft background (logo, title, fields, primary button, links)
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    /* visible area under the top bar, above the footer (main keeps its own 48px bottom padding) */
    min-height: calc(100vh - var(--fk-topbar-h) - 110px);
    padding: 40px 16px 8px;
}

body.fk .fk-auth .fk-auth-card {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 32px 32px 24px;
    text-align: center;
    box-shadow: var(--fk-shadow-1), 0 12px 32px rgba(20, 30, 60, .06);
}

body.fk .fk-auth-logo {
    margin-bottom: 22px;
}

body.fk .fk-auth-logo img {
    height: 34px;
    width: auto;
}

body.fk .fk-auth-logo img.is-ipos {
    height: 44px;
}

body.fk .fk-auth-title {
    margin: 0 0 22px;
    color: var(--fk-ink);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* a short instruction right under the title */
body.fk .fk-auth-title + .fk-auth-text,
body.fk .fk-page-pwreset .fk-auth-text {
    margin-top: -16px;
}

body.fk .fk-auth-text {
    margin: 0 0 20px;
    color: var(--fk-muted);
    font-size: .9rem;
    line-height: 1.5;
}

body.fk .fk-auth-text .fa-spinner {
    margin-right: 4px;
}

/* password reset, "checking" state: the only visible block of the card, no gap under it */
body.fk .fk-page-pwreset .fk-auth-card > .fk-auth-text {
    margin-bottom: 4px;
}

body.fk .fk-auth-field {
    height: 42px;
    margin-bottom: 12px;
}

body.fk .fk-auth-field.fk-sup-otp {
    height: 54px;
}

body.fk .fk-auth-hint {
    margin: -4px 0 14px;
    text-align: left;
}

body.fk .fk-auth-alert {
    margin: 4px 0 12px;
    font-size: .85rem;
    text-align: left;
}

body.fk .fk-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

body.fk .fk-auth-actions .btn {
    width: 100%;
    padding-top: 9px;
    padding-bottom: 9px;
}

body.fk .fk-auth-link {
    margin: 18px 0 0;
    font-size: .875rem;
}

/* the switch link right under an OTP field (MFA step) */
body.fk .fk-auth-field + .fk-auth-link {
    margin: 0 0 14px;
}

body.fk .fk-auth-meta {
    color: var(--fk-muted);
    font-variant-numeric: tabular-nums;
}

body.fk .fk-auth-foot {
    margin: 20px -32px -24px;
    padding: 14px 32px;
    background: var(--fk-soft);
    border-top: 1px solid var(--fk-line);
    border-radius: 0 0 var(--fk-r) var(--fk-r);
    color: var(--fk-muted);
    font-size: .8rem;
}


/* -----------------------------------------------------------------------------------------------------
   3. API reference: Swagger UI (local copy, content/swagger-ui.css) inside a theme card.
      Only colours, radii, type and spacing are harmonised; the HTTP method colours stay.
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-api-loading {
    padding: 14px 16px;
    color: var(--fk-muted);
    font-size: .9rem;
}

body.fk .fk-api-loading .fa {
    margin-right: 6px;
}

body.fk #api-docs-ui.fk-api-docs {
    padding: 8px 24px 16px;
}

body.fk #api-docs-ui.fk-api-docs:empty {
    display: none;
}

body.fk #api-docs-ui .swagger-ui .wrapper {
    max-width: none;
    padding: 0;
}

/* Swagger UI uses its own .col-12 blocks: the Bootstrap gutter of the same class is not wanted here */
body.fk #api-docs-ui .swagger-ui .col-12 {
    padding-left: 0;
    padding-right: 0;
}

body.fk #api-docs-ui .swagger-ui .information-container,
body.fk #api-docs-ui .swagger-ui .information-container .info {
    margin: 0;
    padding: 0;
}

body.fk #api-docs-ui .swagger-ui .info {
    margin: 16px 0 8px;
}

/* Theme font for the prose parts (Swagger UI sets "sans-serif" on each of them); code stays monospace */
body.fk #api-docs-ui .swagger-ui .info .title,
body.fk #api-docs-ui .swagger-ui .info p,
body.fk #api-docs-ui .swagger-ui .info li,
body.fk #api-docs-ui .swagger-ui .info table,
body.fk #api-docs-ui .swagger-ui .info a,
body.fk #api-docs-ui .swagger-ui .renderedMarkdown p,
body.fk #api-docs-ui .swagger-ui .markdown p,
body.fk #api-docs-ui .swagger-ui .opblock-tag,
body.fk #api-docs-ui .swagger-ui .opblock-tag small,
body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-method,
body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-description,
body.fk #api-docs-ui .swagger-ui .opblock .opblock-section-header h4,
body.fk #api-docs-ui .swagger-ui .opblock .opblock-section-header > label,
body.fk #api-docs-ui .swagger-ui .opblock-description-wrapper p,
body.fk #api-docs-ui .swagger-ui .opblock-external-docs-wrapper p,
body.fk #api-docs-ui .swagger-ui .opblock-title_normal p,
body.fk #api-docs-ui .swagger-ui .tab li,
body.fk #api-docs-ui .swagger-ui table thead tr th,
body.fk #api-docs-ui .swagger-ui table thead tr td,
body.fk #api-docs-ui .swagger-ui .parameter__name,
body.fk #api-docs-ui .swagger-ui .parameter__in,
body.fk #api-docs-ui .swagger-ui .response-col_status,
body.fk #api-docs-ui .swagger-ui .response-col_links,
body.fk #api-docs-ui .swagger-ui .responses-inner h4,
body.fk #api-docs-ui .swagger-ui .responses-inner h5,
body.fk #api-docs-ui .swagger-ui section.models h4,
body.fk #api-docs-ui .swagger-ui .model-title,
body.fk #api-docs-ui .swagger-ui .btn,
body.fk #api-docs-ui .swagger-ui label,
body.fk #api-docs-ui .swagger-ui select {
    font-family: var(--fk-font);
}

body.fk #api-docs-ui .swagger-ui .info .title {
    color: var(--fk-ink);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* version pills next to the title (the theme gives <pre> a light background: kept transparent) */
body.fk #api-docs-ui .swagger-ui .info .title small {
    top: -2px;
    padding: 2px 8px;
    border-radius: var(--fk-r-pill);
    background: var(--fk-neutral);
    vertical-align: middle;
}

body.fk #api-docs-ui .swagger-ui .info .title small.version-stamp {
    background: var(--fk-ok);
}

/* the two pills wrap together (on phones "OAS3" went to a line of its own) */
body.fk #api-docs-ui .swagger-ui .info .title > span {
    display: inline-block;
    white-space: nowrap;
}

body.fk #api-docs-ui .info .title small pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-family: var(--fk-font);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
}

body.fk #api-docs-ui .swagger-ui .info p,
body.fk #api-docs-ui .swagger-ui .info li,
body.fk #api-docs-ui .swagger-ui .info table {
    color: var(--fk-ink-2);
    font-size: .875rem;
    line-height: 1.6;
}

body.fk #api-docs-ui .swagger-ui .info .description {
    max-width: 920px;
}

body.fk #api-docs-ui .swagger-ui .markdown code,
body.fk #api-docs-ui .swagger-ui .renderedMarkdown code {
    padding: 1px 6px;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: 6px;
    color: var(--fk-accent);
    font-family: var(--fk-mono);
    font-size: .78rem;
    font-weight: 500;
}

/* tag groups (AuditLog, External, ...) */
body.fk #api-docs-ui .swagger-ui .opblock-tag-section {
    margin-top: 8px;
}

body.fk #api-docs-ui .swagger-ui .opblock-tag {
    margin: 0 0 8px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--fk-line);
    color: var(--fk-ink);
    font-size: 1.05rem;
    font-weight: 600;
}

body.fk #api-docs-ui .swagger-ui .opblock-tag:hover {
    background: var(--fk-soft);
}

body.fk #api-docs-ui .swagger-ui .opblock-tag svg,
body.fk #api-docs-ui .swagger-ui .expand-operation svg {
    width: 16px;
    height: 16px;
    fill: var(--fk-muted);
}

/* operations */
body.fk #api-docs-ui .swagger-ui .opblock {
    margin: 0 0 8px;
    border-radius: var(--fk-r-sm);
    box-shadow: none;
}

body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary {
    padding: 6px 10px 6px 6px;
}

body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-method {
    min-width: 64px;
    padding: 4px 0;
    border-radius: 6px;
    font-size: .72rem;
    letter-spacing: .04em;
    text-shadow: none;
}

body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-path,
body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-path__deprecated {
    color: var(--fk-ink);
    font-family: var(--fk-mono);
    font-size: .85rem;
}

body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-description {
    color: var(--fk-ink-2);
    font-size: .82rem;
}

/* deprecated aliases: Swagger UI paints the method pill #ebebeb with white text at opacity .6 (the
   label was unreadable); a neutral pill keeps them subdued but legible */
body.fk #api-docs-ui .swagger-ui .opblock.opblock-deprecated {
    opacity: .85;
}

body.fk #api-docs-ui .swagger-ui .opblock.opblock-deprecated .opblock-summary-method {
    background: var(--fk-neutral-bg);
    color: var(--fk-neutral-ink);
}

body.fk #api-docs-ui .swagger-ui .opblock.opblock-deprecated .opblock-summary-path__deprecated,
body.fk #api-docs-ui .swagger-ui .opblock.opblock-deprecated .opblock-summary-description {
    color: var(--fk-muted);
}

body.fk #api-docs-ui .swagger-ui .opblock .opblock-section-header {
    box-shadow: none;
    border-top: 1px solid var(--fk-line);
}

body.fk #api-docs-ui .swagger-ui .opblock .opblock-section-header h4 {
    font-size: .875rem;
    font-weight: 600;
}

/* schemas */
body.fk #api-docs-ui .swagger-ui section.models {
    margin: 24px 0 8px;
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
}

body.fk #api-docs-ui .swagger-ui section.models h4 {
    color: var(--fk-ink);
    font-size: .95rem;
    font-weight: 600;
}

body.fk #api-docs-ui .swagger-ui section.models .model-container {
    border-radius: 6px;
}

/* selects (media type, response content type): theme border and radius, Swagger UI arrow kept */
body.fk #api-docs-ui .swagger-ui select {
    border: 1px solid var(--fk-line-2);
    border-radius: var(--fk-r-sm);
    background-color: var(--fk-surface);
    box-shadow: none;
    color: var(--fk-ink);
    font-size: .85rem;
    font-weight: 500;
}

body.fk #api-docs-ui .swagger-ui select:focus {
    border-color: var(--fk-accent);
    box-shadow: var(--fk-ring);
    outline: none;
}


/* -----------------------------------------------------------------------------------------------------
   4. Tickets: list (a card with a header row and one row per ticket), new ticket form, ticket modal
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-tickets {
    overflow: hidden;
}

body.fk .fk-tickets-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 160px 56px;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
}

body.fk .fk-tickets-head {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--fk-soft);
    border-bottom: 1px solid var(--fk-line);
    color: var(--fk-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

body.fk .fk-tickets-head a {
    color: inherit;
    text-decoration: none;
}

body.fk .fk-tickets-head a:hover,
body.fk .fk-tickets-head a:focus {
    color: var(--fk-ink);
}

body.fk .fk-tickets-head b {
    font-weight: 600;
}

body.fk .fk-tickets-item + .fk-tickets-item {
    border-top: 1px solid var(--fk-line);
}

body.fk .fk-tickets-item:hover {
    background: var(--fk-soft);
}

body.fk .fk-tickets-item .fk-tickets-date {
    color: var(--fk-ink-2);
    font-size: .875rem;
}

body.fk .fk-tickets-item .fk-tickets-title {
    color: var(--fk-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.fk .fk-tickets-status .fk-badge {
    margin: 0;
}

body.fk .fk-tickets-act {
    text-align: right;
}

body.fk .fk-tickets-act .btn {
    color: var(--fk-ink-2);
}

/* New ticket: a form card of reading width */
body.fk .fk-page-ticket .fk-ticket-form {
    max-width: 820px;
}

body.fk .fk-page-ticket .fk-ticket-form textarea {
    min-height: 200px;
    resize: vertical;
}

/* a required field left empty (the red message under it is shown in the same case) */
body.fk .fk-page-ticket .fk-ticket-form .form-control.ng-dirty.ng-invalid-required:not(:focus) {
    border-color: var(--fk-bad);
}

/* Ticket details modal (read-only fields) */
body.fk .modal-dialog:has(.fk-ticket-modal) {
    max-width: 640px;
}

body.fk .fk-ticket-modal textarea {
    resize: vertical;
}


/* -----------------------------------------------------------------------------------------------------
   5. Account security (2FA)
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-sec-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

body.fk .fk-sec-grid > .fk-card {
    margin-bottom: 0;
}

body.fk .fk-sec-head-icon {
    margin-right: 4px;
    color: var(--fk-muted);
}

body.fk .fk-sec-state {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

body.fk .fk-sec-icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--fk-r);
    background: var(--fk-neutral-bg);
    color: var(--fk-neutral-ink);
    font-size: 1.15rem;
}

body.fk .fk-sec-icon.is-ok {
    background: var(--fk-ok-bg);
    color: var(--fk-ok);
}

body.fk .fk-sec-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.fk .fk-sec-title {
    margin: 0 0 4px;
    color: var(--fk-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

body.fk .fk-sec-title.is-ok {
    color: var(--fk-ok-ink);
}

body.fk .fk-sec-text {
    margin: 0 0 16px;
    color: var(--fk-ink-2);
    font-size: .9rem;
}

body.fk .fk-sec-kv {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
}

body.fk .fk-sec-kv .fk-kv-v {
    margin: 0;
}

body.fk .fk-sec-info-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--fk-ink);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
}

body.fk .fk-sec-info-title .fa {
    color: var(--fk-info);
}

body.fk .fk-sec-info p {
    color: var(--fk-ink-2);
    font-size: .875rem;
    line-height: 1.55;
}

/* Bootstrap modals of the page (setup, disable, regenerate, new codes) */
body.fk .fk-page-security .modal-header .close {
    margin: -8px -8px -8px auto;
    padding: 8px;
    color: var(--fk-muted);
    font-weight: 400;
    text-shadow: none;
}

body.fk .fk-page-security .modal-body > p,
body.fk .fk-sec-step p {
    color: var(--fk-ink-2);
    font-size: .9rem;
}

body.fk .fk-sec-step + .fk-sec-step {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--fk-line);
}

body.fk .fk-sec-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: var(--fk-ink);
    font-size: .95rem;
    font-weight: 600;
}

body.fk .fk-sec-step-title .fa {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: var(--fk-r-sm);
    background: var(--fk-accent-soft);
    color: var(--fk-accent);
    font-size: .8rem;
}

body.fk .fk-sec-step-title.is-sub {
    margin-top: 16px;
}

body.fk .fk-sec-step-title.is-sub .fa {
    background: var(--fk-neutral-bg);
    color: var(--fk-neutral-ink);
}

body.fk .fk-sec-qr {
    display: flex;
    justify-content: center;
    margin: 4px 0 8px;
}

body.fk .fk-sec-qr img {
    max-width: 232px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r);
}

body.fk .fk-sec-secret .form-control {
    font-family: var(--fk-mono);
    font-size: .875rem;
    letter-spacing: .04em;
}

body.fk .fk-sec-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--fk-soft);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
}

/* no codes yet: no empty panel (:empty never matches, ng-repeat leaves comments and whitespace) */
body.fk .fk-sec-codes:not(:has(.fk-code)) {
    display: none;
}

body.fk .fk-sec-codes .fk-code {
    display: block;
    background: var(--fk-surface);
    color: var(--fk-ink);
    font-size: .9rem;
    letter-spacing: .06em;
    text-align: center;
}

body.fk .fk-page-security .fk-sup-otp {
    max-width: 280px;
}

body.fk .fk-sec-switch {
    font-size: .85rem;
    text-decoration: underline;
    text-decoration-color: rgba(31, 56, 100, .35);
    text-underline-offset: 2px;
}


/* -----------------------------------------------------------------------------------------------------
   6. Home: dark hero (same colour as the top bar) with the animated illustration, ridge separator
      into the page background, partner line
   ----------------------------------------------------------------------------------------------------- */
body.fk .fk-home-hero {
    padding: 40px 0 0;
    background: var(--fk-header);
    color: #fff;
}

body.fk .fk-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

body.fk .fk-home-art svg {
    display: block;
    width: 100%;
    max-width: 470px;
    height: auto;
    margin: 0 auto;
}

body.fk .fk-home-title {
    max-width: 540px;
    margin: 0 0 20px;
    color: #fff;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.02em;
}

body.fk .fk-home-lead {
    max-width: 540px;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .74);
    font-size: 1.15rem;
    line-height: 1.5;
}

body.fk .fk-home-sep {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -1px;
    background: var(--fk-header);
}

body.fk .fk-home-sep-ground {
    fill: var(--fk-bg);
}

body.fk .fk-home-sep-ridge {
    fill: var(--fk-accent-light);
    opacity: .5;
}

body.fk .fk-home-sep-ridge.is-deep {
    fill: var(--fk-accent-2);
    opacity: 1;
}

body.fk .fk-home-partners {
    padding: 8px 0 16px;
    text-align: center;
}

body.fk .fk-home-partners-title {
    margin: 0 0 6px;
    color: var(--fk-ink);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

body.fk .fk-home-partners-text {
    margin: 0;
    color: var(--fk-muted);
    font-size: 1.05rem;
}


/* -----------------------------------------------------------------------------------------------------
   7. Language modal (footer flag): two selectable rows
   ----------------------------------------------------------------------------------------------------- */
body.fk .modal-dialog:has(.fk-lang-modal) {
    max-width: 360px;
}

body.fk .fk-lang-modal {
    padding: 12px;
}

body.fk .fk-lang-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.fk .fk-lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--fk-surface);
    border: 1px solid var(--fk-line);
    border-radius: var(--fk-r-sm);
    color: var(--fk-ink);
    text-decoration: none;
}

body.fk .fk-lang-option:hover,
body.fk .fk-lang-option:focus {
    background: var(--fk-soft);
    border-color: var(--fk-line-2);
    color: var(--fk-ink);
    text-decoration: none;
}

body.fk .fk-lang-option:focus {
    outline: none;
}

body.fk .fk-lang-option:focus-visible {
    box-shadow: var(--fk-ring);
    border-color: var(--fk-accent);
}

body.fk .fk-lang-option strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .03em;
}

body.fk .fk-lang-option img {
    height: 22px;
    width: auto;
    border-radius: 50%;
}

body.fk .fk-lang-go {
    color: var(--fk-muted);
    font-size: .75rem;
}


/* -----------------------------------------------------------------------------------------------------
   8. Responsive
   ----------------------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.fk .fk-sec-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.fk .fk-home-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    body.fk .fk-home-copy {
        order: -1;
        text-align: center;
    }

    body.fk .fk-home-title,
    body.fk .fk-home-lead {
        margin-left: auto;
        margin-right: auto;
    }

    body.fk .fk-home-art svg {
        max-width: 380px;
    }
}

@media (max-width: 767.98px) {
    /* Swagger UI operation rows: method + path on one line, the description under them */
    body.fk #api-docs-ui.fk-api-docs {
        padding: 0 12px 12px;
    }

    body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-control {
        position: relative;
        flex-wrap: wrap;
        row-gap: 4px;
        padding-right: 26px;
    }

    /* the expand arrow stays top right instead of wrapping to a line of its own */
    body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-control > svg {
        position: absolute;
        top: 4px;
        right: 0;
    }

    body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-path,
    body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-path__deprecated {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        padding: 0 0 0 10px;
        font-size: .78rem;
    }

    body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-description {
        flex: 1 0 100%;
        padding: 0 2px;
        font-size: .78rem;
    }

    body.fk #api-docs-ui .swagger-ui .opblock .opblock-summary-method {
        min-width: 54px;
    }

    body.fk #api-docs-ui .swagger-ui .info .title {
        font-size: 1.15rem;
    }

    body.fk #api-docs-ui .swagger-ui .opblock-tag {
        padding: 8px 2px;
    }

    /* expanded operation: tighter inner padding on phones */
    body.fk #api-docs-ui .swagger-ui .opblock-description-wrapper,
    body.fk #api-docs-ui .swagger-ui .opblock-external-docs-wrapper,
    body.fk #api-docs-ui .swagger-ui .opblock-title_normal,
    body.fk #api-docs-ui .swagger-ui .opblock .opblock-section-header,
    body.fk #api-docs-ui .swagger-ui .responses-inner,
    body.fk #api-docs-ui .swagger-ui .table-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 575.98px) {
    body.fk .fk-auth {
        align-items: flex-start;
        min-height: 0;
        padding: 24px 16px 0;
    }

    body.fk .fk-auth .fk-auth-card {
        padding: 24px 20px 20px;
    }

    body.fk .fk-auth-foot {
        margin: 20px -20px -20px;
        padding: 12px 20px;
    }

    /* tickets: title on top, date + status under it, open button on the right */
    body.fk .fk-tickets-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "title title act"
            "date status act";
        gap: 6px 10px;
    }

    body.fk .fk-tickets-item .fk-tickets-title  { grid-area: title; }
    body.fk .fk-tickets-item .fk-tickets-date   { grid-area: date; font-size: .82rem; }
    body.fk .fk-tickets-item .fk-tickets-status { grid-area: status; }
    body.fk .fk-tickets-item .fk-tickets-act    { grid-area: act; }

    /* the header row becomes a compact sort bar */
    body.fk .fk-tickets-head {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
    }

    body.fk .fk-tickets-head .fk-tickets-act {
        display: none;
    }

    body.fk .fk-sec-state {
        flex-direction: column;
        gap: 12px;
    }

    body.fk .fk-home-hero {
        padding-top: 28px;
    }

    body.fk .fk-home-title {
        font-size: 1.95rem;
    }

    body.fk .fk-home-lead {
        font-size: 1.02rem;
    }

    body.fk .fk-home-art svg {
        max-width: 300px;
    }

    body.fk .fk-home-partners-title {
        font-size: 1.25rem;
    }

    body.fk .fk-home-partners-text {
        font-size: .95rem;
    }
}