* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    background: #eef2f7;

    color: #1e293b;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 30px;

}



/* HEADER */


.header {

    height: 80px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 22px;

    font-weight: 800;

    letter-spacing: 1px;

}



nav a {

    color: #64748b;

    text-decoration: none;

    font-size: 15px;

}



nav a:hover {

    color: #2563eb;

}

.service-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.service-nav [data-readme-open] {
    color: #2563eb;
    font-weight: 700;
}

.readme-dialog {
    width: min(620px, calc(100% - 32px));
    max-height: min(720px, calc(100vh - 48px));
    padding: 0;
    border: 1px solid #dbe3ef;
    border-radius: 20px;
    color: #1e293b;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.readme-dialog::backdrop {
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(3px);
}

.readme-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 17px;
    border-bottom: 1px solid #e2e8f0;
}

.readme-dialog-header h2 {
    margin: 2px 0 0;
    font-size: 23px;
}

.readme-kicker {
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.readme-close {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #64748b;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.readme-close:hover,
.readme-close:focus-visible {
    color: #1d4ed8;
    background: #dbeafe;
}

.readme-content {
    overflow-y: auto;
    padding: 20px 24px 24px;
}

.readme-content h3 {
    margin: 18px 0 5px;
    color: #334155;
    font-size: 15px;
}

.readme-content h3:first-child {
    margin-top: 0;
}

.readme-content p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.readme-content ul,
.readme-content ol {
    margin: 6px 0 0;
    padding-left: 22px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.readme-content pre {
    overflow-x: auto;
    margin: 8px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f1f5f9;
}

.readme-content pre code {
    padding: 0;
    background: transparent;
    white-space: pre;
}

.readme-content code {
    padding: 1px 4px;
    border-radius: 5px;
    color: #334155;
    background: #f1f5f9;
}


.logout-form {

    margin: 0;

}

.dashboard-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.signed-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #334155;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 700;
}

.admin-indicator {
    padding: 2px 6px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 2px 7px rgba(37, 99, 235, 0.25);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.08em;
}

.login-message {
    margin: 0 0 14px;
    padding: 9px 11px;
    border-radius: 9px;
    color: #166534;
    background: #f0fdf4;
    font-size: 13px;
}

.account-page {
    max-width: 900px;
    margin: 36px auto 60px;
}

.account-card,
.user-list-section {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
}

.account-card h1,
.account-card h2,
.admin-heading h1 {
    margin: 0 0 7px;
    color: #172554;
}

.account-card > p,
.admin-heading p {
    margin: 0 0 18px;
    color: #64748b;
}

.account-card form,
.user-create-form {
    display: grid;
    gap: 12px;
}

.account-card label,
.user-create-form label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.account-card input,
.account-card select,
.user-row input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    color: #1e293b;
    background: #f8fafc;
    font: inherit;
}

.user-create-form {
    grid-template-columns: 1fr 1fr 180px auto;
    align-items: end;
}

.user-list-section {
    display: grid;
    gap: 9px;
}

.user-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(250px, 1.2fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.user-row.is-disabled {
    opacity: .62;
}

.user-main strong,
.user-main span {
    display: block;
}

.user-main span {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
}

.user-password-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
}

.current-user-badge {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}


.logout-form button {

    padding: 0;

    border: 0;

    color: #64748b;

    background: transparent;

    font: inherit;

    font-size: 15px;

    cursor: pointer;

}


.logout-form button:hover {

    color: #2563eb;

}



/* SERVICES TITLE */


.services-header {

    margin-top: 35px;

    margin-bottom: 35px;

}



.services-header h1 {

    margin: 0 0 10px;

    font-size: 34px;

}



.services-header p {

    margin: 0;

    color: #64748b;

    font-size: 16px;

}



/* SERVICE CARDS */


.cards {

    display: grid;

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

    gap: 20px;

}



.card-link {

    text-decoration: none;

    color: inherit;

    display: block;

}



.card {

    background:

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


    border-radius: 20px;


    padding: 22px 24px;


    height: 250px;


    display: flex;


    flex-direction: column;



    border: 1px solid #cbd9f5;



    box-shadow:

        0 12px 30px rgba(30,64,175,0.15);



    transition:

        transform .25s ease,

        box-shadow .25s ease;

}



.card-link:hover .card {


    transform: translateY(-7px);


    box-shadow:

        0 20px 45px rgba(30,64,175,0.22);

}



.icon {

    width: 30px;

    height: 30px;

    color: #2563eb;

    margin-bottom: 12px;

}



.icon svg {

    display: block;

    width: 100%;

    height: 100%;

}



.card h2 {

    position: relative;

    margin: 0 0 10px;

    padding-bottom: 8px;

    color: #172554;

    font-size: 22px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -0.025em;

}


.card h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 34px;

    height: 3px;

    border-radius: 999px;

    background: linear-gradient(90deg, #2563eb, #7c3aed);

    transition: width .25s ease;

}


.card-link:hover .card h2::after {

    width: 58px;

}



.card p {

    color: #475569;

    font-size: 14px;

    line-height: 1.4;

    margin: 0;

    flex-grow: 1;

}



.card span {

    color: #2563eb;

    font-weight: 700;

    margin-top: auto;

}



/* SERVICE PAGES */


.service-page {

    margin-top: 40px;

}



.service-page h1 {

    font-size: 36px;

}



.service-page p {

    color: #64748b;

}


.logo-link,
.back-link {

    color: inherit;

    text-decoration: none;

}


.plusator-page {

    max-width: 820px;

    margin-left: auto;

    margin-right: auto;

}


.back-link {

    display: inline-block;

    margin-bottom: 28px;

    color: #64748b;

    font-size: 14px;

}


.back-link:hover {

    color: #2563eb;

}


.service-heading {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 30px;

}


.service-heading h1,
.service-heading p {

    margin: 0;

}


.service-heading h1 {

    margin-bottom: 7px;

}


.service-heading-icon {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border: 1px solid #bfdbfe;

    border-radius: 14px;

    color: #2563eb;

    background: #eff6ff;

    font-size: 30px;

    font-weight: 300;

}


.service-heading-icon svg {

    width: 28px;

    height: 28px;

}


.format-note {

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding: 15px 16px;

    border-radius: 12px;

    color: #64748b;

    background: #f8fafc;

    font-size: 13px;

    line-height: 1.5;

}


.format-note strong {

    color: #334155;

    font-size: 14px;

}


.format-note code {

    color: #1d4ed8;

    font-weight: 700;

    font-size: 14px;

}


.tool-card {

    padding: 32px;

    border: 1px solid #dbe3ef;

    border-radius: 20px;

    background: #ffffff;

    box-shadow: 0 12px 30px rgba(30, 64, 175, 0.08);

}


.tool-field label,
.file-field label {

    display: block;

    margin-bottom: 9px;

    color: #334155;

    font-size: 14px;

    font-weight: 700;

}


.tool-field textarea {

    width: 100%;

    min-height: 230px;

    resize: vertical;

    padding: 16px;

    border: 1px solid #cbd5e1;

    border-radius: 12px;

    outline: none;

    color: #1e293b;

    background: #f8fafc;

    font: inherit;

    line-height: 1.5;

}


.tool-field textarea:focus {

    border-color: #60a5fa;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);

}


.field-hint {

    display: block;

    margin-top: 8px;

    color: #94a3b8;

    font-size: 13px;

}


.file-field {

    margin: 24px 0;

}


.file-field input {

    width: 100%;

    padding: 11px;

    border: 1px dashed #94a3b8;

    border-radius: 12px;

    color: #475569;

    background: #f8fafc;

}


.primary-button {

    width: 100%;

    padding: 14px 20px;

    border: 0;

    border-radius: 12px;

    color: #ffffff;

    background: #2563eb;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

}


.primary-button:hover {

    background: #1d4ed8;

}


.tool-result {

    margin-top: 28px;

    padding-top: 26px;

    border-top: 1px solid #e2e8f0;

}


.tool-result-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 12px;

}


.tool-result h2 {

    margin: 0 0 4px;

    color: #1e293b;

    font-size: 18px;

}


.tool-result p,
.copy-status {

    margin: 0;

    color: #64748b;

    font-size: 13px;

}


.tool-result textarea {

    width: 100%;

    min-height: 230px;

    resize: vertical;

    padding: 16px;

    border: 1px solid #cbd5e1;

    border-radius: 12px;

    color: #1e293b;

    background: #f8fafc;

    font: inherit;

    line-height: 1.5;

}


.result-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 14px;

}


.secondary-button {

    padding: 14px 20px;

    border: 1px solid #cbd5e1;

    border-radius: 12px;

    color: #1e40af;

    background: #ffffff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

}


.secondary-button:hover {

    border-color: #93c5fd;

    background: #eff6ff;

}


.result-download {

    width: auto;

}


/* COMPACT PLUSATOR */


.plusator-page {

    margin-top: 22px;

}


.plusator-page .back-link {

    margin-bottom: 16px;

}


.plusator-page .service-heading {

    gap: 14px;

    margin-bottom: 18px;

}


.plusator-page .service-heading-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    font-size: 26px;

}


.plusator-page .service-heading h1 {

    margin-bottom: 3px;

    font-size: 30px;

}


.plusator-page .tool-card {

    padding: 22px 24px;

}


.plusator-page .tool-field label,
.plusator-page .file-field label {

    margin-bottom: 6px;

}


.plusator-page .tool-field textarea,
.plusator-page .tool-result textarea {

    min-height: 145px;

    padding: 12px 14px;

}


.plusator-page .field-hint {

    margin-top: 5px;

}


.plusator-page .file-field {

    margin: 15px 0;

}


.plusator-page .file-field input {

    padding: 8px 10px;

}


.plusator-page .primary-button,
.plusator-page .secondary-button {

    padding: 11px 18px;

}


.plusator-page .tool-result {

    margin-top: 19px;

    padding-top: 17px;

}


.plusator-page .tool-result-header {

    margin-bottom: 8px;

}


.plusator-page .result-actions {

    margin-top: 10px;

}


.plusator-page + footer {

    padding: 28px 0 20px;

}


.filterator-source {

    margin-top: 15px;

}


.basekeys-source {

    margin-top: 15px;

}


/* WORDSTAT */


.wordstat-warning {

    margin-bottom: 16px;

    padding: 12px 14px;

    border: 1px solid #fde68a;

    border-radius: 12px;

    color: #92400e;

    background: #fffbeb;

    font-size: 13px;

    line-height: 1.45;

}

.wordstat-message {
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    color: #1e40af;
    background: #eff6ff;
    font-size: 13px;
}

.wordstat-message-error {
    border-color: #fecaca;
    color: #b91c1c;
    background: #fef2f2;
}

.wordstat-message-success {
    border-color: #bbf7d0;
    color: #166534;
    background: #f0fdf4;
}

.wordstat-token-panel {
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
}

.wordstat-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.wordstat-section-heading h2 {
    margin: 0 0 3px;
    font-size: 18px;
}

.wordstat-section-heading p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.active-token-summary,
.active-token-badge,
.legacy-token-badge {
    color: #166534;
    font-size: 12px;
    white-space: nowrap;
}

.active-token-badge {
    padding: 5px 9px;
    border-radius: 999px;
    background: #dcfce7;
    font-weight: 700;
}

.legacy-token-badge {
    padding: 5px 9px;
    border-radius: 999px;
    color: #92400e !important;
    background: #fef3c7;
    font-weight: 700;
}

.token-list {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.token-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
}

.token-list-item.is-active {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.token-list-item strong,
.token-list-item span {
    display: block;
}

.token-list-item span {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
}

.token-add-form {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(200px, 1.2fr) minmax(170px, .8fr) auto;
    align-items: end;
    gap: 10px;
}

.wordstat-cloud-hint,
.wordstat-billing-note {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.wordstat-mode-fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.wordstat-mode-fieldset legend {
    grid-column: 1 / -1;
    margin-bottom: 5px;
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.wordstat-mode-option {
    position: relative;
    display: block;
    min-height: 126px;
    padding: 15px 48px 14px 16px;
    overflow: hidden;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 3px 12px rgba(35, 55, 85, 0.045);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wordstat-mode-option:hover {
    border-color: #a9bfe0;
    box-shadow: 0 7px 18px rgba(35, 74, 130, 0.09);
    transform: translateY(-1px);
}

.wordstat-mode-option:has(> input:checked),
.wordstat-mode-option:has(.wordstat-mode-radio:checked) {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgb(37 99 235 / 10%), 0 8px 22px rgba(37, 99, 235, 0.11);
    background: linear-gradient(145deg, #ffffff 0%, #edf5ff 100%);
}

.wordstat-mode-option > input,
.wordstat-mode-main > input {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 22px;
    height: 22px;
    margin: 0;
    appearance: none;
    border: 2px solid #b8c5d8;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
}

.wordstat-mode-option > input:checked,
.wordstat-mode-main > input:checked {
    border: 6px solid #2563eb;
}

.wordstat-mode-option > input:focus-visible,
.wordstat-mode-main > input:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

.wordstat-mode-option span,
.wordstat-mode-option em,
.wordstat-mode-option strong,
.wordstat-mode-option small {
    display: block;
}

.wordstat-mode-option em {
    margin-bottom: 7px;
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.wordstat-mode-option strong {
    color: #172033;
    font-size: 15px;
    line-height: 1.2;
}

.wordstat-mode-option small {
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.wordstat-mode-legacy {
    background: linear-gradient(145deg, #ffffff 0%, #faf8ff 100%);
}

.wordstat-mode-legacy:has(> input:checked) {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgb(124 58 237 / 9%), 0 8px 22px rgba(124, 58, 237, 0.1);
    background: linear-gradient(145deg, #ffffff 0%, #f5f0ff 100%);
}

.wordstat-mode-legacy input:checked {
    border-color: #7c3aed;
}

.wordstat-mode-main {
    display: block;
    cursor: pointer;
}

.wordstat-breadth-option {
    display: flex;
    flex-direction: column;
    padding-bottom: 14px;
}

.wordstat-level-choice {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 10px;
}

.wordstat-level-choice > span {
    margin-right: 3px;
    color: #718096;
    font-size: 10px;
    font-weight: 700;
}

.wordstat-level-choice label {
    display: block;
    cursor: pointer;
}

.wordstat-level-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.wordstat-level-choice b {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid #cbd7e6;
    border-radius: 7px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    transition: all .16s ease;
}

.wordstat-level-choice label:hover b {
    border-color: #7ca5e3;
    color: #1d4ed8;
}

.wordstat-level-choice input:checked + b {
    border-color: #2563eb;
    color: #ffffff;
    background: #2563eb;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.22);
}

.wordstat-level-choice input:focus-visible + b {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 2px;
}

.wordstat-collection-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.wordstat-negative-settings {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid #d7e1ef;
    border-radius: 14px;
    background: #f8fbff;
}

.wordstat-negative-settings summary {
    cursor: pointer;
    font-weight: 700;
}

.wordstat-negative-settings[open] summary {
    margin-bottom: 14px;
}

.wordstat-cloud-hint code {
    padding: 1px 4px;
    border-radius: 5px;
    color: #334155;
    background: #f1f5f9;
}

.wordstat-billing-note {
    margin: 0 0 12px;
    padding: 9px 11px;
    border-left: 3px solid #f59e0b;
    color: #92400e;
    background: #fffbeb;
}

.card-note {
    display: block;
    margin-top: 5px;
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.token-add-form .tool-field {
    margin: 0;
}

.token-add-form input,
.wordstat-region-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    outline: none;
    color: #1e293b;
    background: #f8fafc;
    font: inherit;
}

.ai-connection-form {
    grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.2fr) minmax(260px, 1.1fr) auto;
}

.ai-connections-panel {
    padding: 16px 18px;
}

.ai-connections-panel .wordstat-section-heading {
    align-items: center;
    margin-bottom: 12px;
}

.status-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13);
}

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

.ai-provider-card {
    display: flex;
    min-width: 0;
    padding: 14px;
    border: 1px solid #dbe3ef;
    border-radius: 15px;
    flex-direction: column;
    background: #f8fafc;
}

.ai-provider-local {
    order: 2;
    border-color: #bfdbfe;
    background: linear-gradient(145deg, #f8fbff, #eff6ff);
}

.ai-provider-cloud {
    order: 1;
    border-color: #ddd6fe;
    background: linear-gradient(145deg, #fbfaff, #f5f3ff);
}

.ai-provider-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin-bottom: 12px;
}

.ai-provider-heading h3 {
    margin: 0 0 2px;
    color: #172554;
    font-size: 15px;
}

.ai-provider-heading p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
}

.ai-provider-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.ai-provider-cloud .ai-provider-mark {
    color: #6d28d9;
    background: #ede9fe;
}

.ai-provider-connections {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.ai-provider-connection {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.82);
}

.ai-provider-connection.is-active {
    border-color: #86efac;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.06);
    background: #f0fdf4;
}

.ai-provider-connection-name {
    min-width: 0;
}

.ai-provider-connection-name strong,
.ai-provider-connection-name span {
    display: block;
}

.ai-provider-connection-name strong {
    overflow: hidden;
    color: #1e293b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.ai-provider-connection-name span {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
}

.ai-provider-connection .active-token-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
}

.ai-connection-statuses {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

.vpn-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #475569;
    background: #e2e8f0;
    font-size: 10px;
    font-weight: 700;
}

.vpn-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
}

.vpn-status.is-checking .vpn-status-dot { background: #f59e0b; }
.vpn-status.is-online { color: #166534; background: #dcfce7; }
.vpn-status.is-online .vpn-status-dot { background: #22c55e; }
.vpn-status.is-offline { color: #991b1b; background: #fee2e2; }
.vpn-status.is-offline .vpn-status-dot { background: #ef4444; }

.ai-provider-connection .connection-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.ai-provider-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 11px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-size: 12px;
}

.ai-provider-add {
    margin: auto 0 0;
    padding: 9px 12px;
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.7);
}

.ai-provider-add h4 {
    margin: 0 0 9px;
    color: #334155;
    font-size: 12px;
}

.ai-local-connection-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-direction: column;
}

.ai-local-connection-form select {
    flex: 1;
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #1e293b;
    background: #fff;
    font: inherit;
}

.ai-provider-card .ai-connection-form {
    grid-template-columns: 1fr;
}

.ai-provider-card .ai-connection-form .secondary-button {
    width: 100%;
}

.local-ai-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: 14px;
    background: rgba(99, 102, 241, 0.06);
}

.local-ai-card > div,
.local-ai-card form {
    display: flex;
    gap: 8px;
}

.local-ai-card > div {
    flex-direction: column;
}

.local-ai-card > div span {
    color: #64748b;
    font-size: 0.88rem;
}

.local-ai-card form {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.local-ai-card select {
    min-width: 220px;
}

.ai-cloud-settings {
    margin-top: 14px;
}

.ai-connection-form select,
.ai-thresholds input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    outline: none;
    color: #1e293b;
    background: #f8fafc;
    font: inherit;
}

.ai-connection-form select:focus,
.ai-thresholds input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);
}

.connection-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.connection-actions form {
    margin: 0;
}

.connection-actions .active-token-badge {
    margin: 0;
}

.danger-button {
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.ai-source-file {
    margin-bottom: 16px;
}

.ai-source-file .field-hint {
    display: block;
    margin-top: 6px;
}

.ai-thresholds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

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

.semantic-connection-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d7deeb;
    border-radius: 16px;
    background: #f8fafc;
}

.semantic-connection-card.is-ready {
    border-color: #a7e3bf;
    background: #f2fcf6;
}

.semantic-connection-card h2,
.semantic-connection-card p {
    margin: 0;
}

.semantic-connection-card h2 {
    font-size: 1rem;
}

.semantic-connection-card strong {
    display: block;
    margin-top: 3px;
}

.semantic-connection-card p {
    margin-top: 2px;
    font-size: .82rem;
    color: #64748b;
}

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

.semantic-core-form > .tool-field,
.semantic-core-form > .semantic-form-grid,
.semantic-core-form > details {
    margin-bottom: 16px;
}

.semantic-limits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.semantic-limits-grid .tool-field {
    margin: 0;
}

.service-processing {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #93c5fd;
    border-radius: 14px;
    background: #eff6ff;
    color: #172554;
}

.service-processing[hidden] {
    display: none;
}

.service-processing strong,
.service-processing p {
    display: block;
    margin: 0;
}

.service-processing p {
    margin-top: 3px;
    font-size: .88rem;
    color: #475569;
}

.service-processing-spinner {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 3px solid #bfdbfe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: service-processing-spin .9s linear infinite;
}

form.is-processing button[type="submit"] {
    pointer-events: none;
    opacity: .7;
}

@keyframes service-processing-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
    .semantic-connections,
    .semantic-form-grid,
    .semantic-limits-grid {
        grid-template-columns: 1fr;
    }

    .semantic-connection-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .semantic-connection-card > a {
        grid-column: 1 / -1;
    }
}

.ai-thresholds .tool-field {
    margin: 0;
}

.ai-prompt-details {
    margin-bottom: 15px;
    padding: 11px 13px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #f8fafc;
}

.ai-prompt-details summary {
    color: #334155;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.ai-prompt-details[open] summary {
    margin-bottom: 10px;
}

.ai-prompt-details .tool-field {
    margin: 0;
}

.saved-user-prompt {
    margin: 0;
    color: #475569;
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.5;
}

.compact-button {
    padding: 7px 10px !important;
    font-size: 12px !important;
}


.wordstat-options {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    align-items: end;

}


.wordstat-options .file-field {

    margin: 15px 0;

}


.wordstat-region-field {

    margin: 15px 0;

}


.wordstat-region-field input {

    width: 100%;

    padding: 11px 13px;

    border: 1px solid #cbd5e1;

    border-radius: 12px;

    outline: none;

    color: #1e293b;

    background: #f8fafc;

    font: inherit;

}


.wordstat-region-field input:focus {

    border-color: #60a5fa;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);

}

.wordstat-region-field select {
    min-height: 132px;
    margin-top: 7px;
}

.wordstat-region-field select:focus,
.token-add-form input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);
}

.region-quick-actions {
    display: flex;
    gap: 7px;
    margin-top: 7px;
}

.region-quick-actions button {
    padding: 5px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #475569;
    background: #ffffff;
    cursor: pointer;
    font-size: 11px;
}

.region-quick-actions button:first-child {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.primary-button:disabled {
    cursor: not-allowed;
    opacity: .5;
}


.device-fieldset {

    display: flex;

    flex-wrap: wrap;

    gap: 9px 18px;

    margin: 0 0 16px;

    padding: 12px 14px;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

}


.device-fieldset legend {

    padding: 0 6px;

    color: #334155;

    font-size: 13px;

    font-weight: 700;

}


.device-fieldset label {

    color: #475569;

    font-size: 13px;

}


.wordstat-history,
.wordstat-preview {

    margin-top: 20px;

    padding: 20px 22px;

    border: 1px solid #dbe3ef;

    border-radius: 18px;

    background: #ffffff;

}

.wordstat-live-log {
    margin: 14px 0 18px;
    padding: 13px 15px;
    overflow: hidden;
    border: 1px solid #d9e4f2;
    border-radius: 15px;
    background: linear-gradient(145deg, #f8fbff 0%, #f3f7fc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.wordstat-live-log-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.wordstat-live-log-heading > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wordstat-live-log-heading strong {
    color: #172033;
    font-size: 14px;
}

.wordstat-live-log-heading div span {
    color: #78879b;
    font-size: 11px;
}

.wordstat-live-indicator {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #94a3b8;
}

.wordstat-live-log.is-active .wordstat-live-indicator {
    background: #2563eb;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.1);
    animation: wordstat-live-pulse 2.4s ease-in-out infinite;
}

@keyframes wordstat-live-pulse {
    0%, 100% { opacity: 0.65; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

.wordstat-live-lines {
    display: grid;
    gap: 5px;
    max-height: 148px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wordstat-live-line {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 9px;
    padding: 6px 9px;
    border-left: 3px solid #94a3b8;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: #334155;
    font-size: 12px;
    line-height: 1.35;
}

.wordstat-live-line time {
    color: #8794a7;
    font-variant-numeric: tabular-nums;
}

.wordstat-live-line-connection,
.wordstat-live-line-sending,
.wordstat-live-line-received {
    border-left-color: #3b82f6;
}

.wordstat-live-line-negative {
    border-left-color: #f59e0b;
}

.wordstat-live-line-result,
.wordstat-live-line-completed {
    border-left-color: #22c55e;
}

.wordstat-live-line-error {
    border-left-color: #ef4444;
}

.wordstat-preview-compact {
    padding: 14px 16px;
}

.wordstat-preview-compact .tool-result-header {
    margin-bottom: 8px;
}

.wordstat-preview-compact .tool-result-header h2 {
    margin-bottom: 3px;
}

.wordstat-preview-compact .table-scroll {
    max-height: 300px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}

.wordstat-preview-compact table {
    font-size: 12px;
}

.wordstat-preview-compact th,
.wordstat-preview-compact td {
    padding: 7px 9px;
}

.wordstat-preview-compact th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.wordstat-negative-marker {
    display: inline-flex;
    padding: 3px 7px;
    border: 1px solid #f4c76a;
    border-radius: 999px;
    color: #9a5b00;
    background: #fff8e7;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.wordstat-cost-widget {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 13px 0;
}

.wordstat-cost-widget > div {
    padding: 10px 12px;
    border: 1px solid #dce6f2;
    border-radius: 12px;
    background: #f8fbff;
}

.wordstat-cost-widget span,
.wordstat-cost-widget strong {
    display: block;
}

.wordstat-cost-widget span {
    margin-bottom: 3px;
    color: #718096;
    font-size: 10px;
}

.wordstat-cost-widget strong {
    color: #172033;
    font-size: 15px;
}

.wordstat-forecast {
    margin: 13px 0;
    padding: 13px 14px;
    border: 1px solid #cfe0f7;
    border-radius: 15px;
    background: linear-gradient(135deg, #f7fbff 0%, #f3f7ff 100%);
}

.wordstat-forecast-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wordstat-forecast-heading > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    color: #2563eb;
    background: #e6efff;
    font-size: 17px;
}

.wordstat-forecast-heading strong,
.wordstat-forecast-heading small {
    display: block;
}

.wordstat-forecast-heading strong {
    color: #172033;
    font-size: 13px;
}

.wordstat-forecast-heading small {
    margin-top: 2px;
    color: #718096;
    font-size: 10px;
}

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

.wordstat-forecast-grid > div {
    padding: 8px 10px;
    border: 1px solid rgba(207, 224, 247, 0.8);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.82);
}

.wordstat-forecast-grid span,
.wordstat-forecast-grid strong {
    display: block;
}

.wordstat-forecast-grid span {
    margin-bottom: 3px;
    color: #718096;
    font-size: 10px;
}

.wordstat-forecast-grid strong {
    color: #172033;
    font-size: 14px;
}

.wordstat-stop-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
}

.wordstat-stop-form .field-hint {
    margin: 0;
}

.wordstat-stop-button {
    display: inline-flex;
    width: auto;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 11px;
    background: #fffafa;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.06);
}

.wordstat-stop-button:hover {
    border-color: #fca5a5 !important;
    background: #fff1f2;
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .wordstat-forecast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wordstat-stop-form {
        align-items: flex-start;
        flex-direction: column;
    }
}

.wordstat-request-map {
    margin-top: 20px;
    padding: 17px 19px;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #fff;
}

.wordstat-map-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(100px, 1fr));
    gap: 8px;
    margin: 13px 0;
}

.wordstat-map-summary span {
    padding: 9px 11px;
    border: 1px solid #dfe7f1;
    border-radius: 11px;
    background: #f8fbff;
}

.wordstat-map-summary small,
.wordstat-map-summary strong {
    display: block;
}

.wordstat-map-summary small {
    color: #6f7f94;
    font-size: 9px;
}

.wordstat-map-summary strong {
    margin-top: 2px;
    color: #172033;
    font-size: 16px;
}

.wordstat-map-summary .is-clean {
    border-color: #b7e4ca;
    background: #f2fff7;
}

.wordstat-map-summary .is-raw {
    border-color: #f2d19e;
    background: #fffaf1;
}

.wordstat-map-summary .is-breadth {
    border-color: #d9c9f6;
    background: #faf7ff;
}

.wordstat-map-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) auto;
    gap: 9px;
    align-items: end;
    margin-bottom: 10px;
}

.wordstat-map-toolbar label span {
    display: block;
    margin-bottom: 4px;
    color: #52647b;
    font-size: 10px;
    font-weight: 800;
}

.wordstat-map-toolbar input,
.wordstat-map-toolbar select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #cfdbe9;
    border-radius: 10px;
    color: #172033;
    background: #fff;
}

.wordstat-map-workspace {
    display: grid;
    grid-template-columns: minmax(250px, 34%) minmax(0, 1fr);
    min-height: 490px;
    max-height: 680px;
    overflow: hidden;
    border: 1px solid #dce6f2;
    border-radius: 15px;
    background: #f8fbff;
}

.wordstat-map-sidebar {
    min-width: 0;
    padding: 8px;
    overflow: auto;
    border-right: 1px solid #dce6f2;
    background: #fff;
}

.wordstat-map-list {
    display: grid;
    gap: 3px;
}

.wordstat-map-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 3px;
    margin-left: calc(min(var(--map-level), 7) * 13px);
    border-radius: 9px;
}

.wordstat-map-row.is-selected {
    background: #eaf2ff;
    box-shadow: inset 3px 0 #2563eb;
}

.wordstat-map-toggle,
.wordstat-map-select {
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.wordstat-map-toggle {
    width: 24px;
    padding: 0;
    color: #66788e;
    font-size: 15px;
    font-weight: 800;
}

.wordstat-map-toggle:disabled {
    cursor: default;
    opacity: 0.45;
}

.wordstat-map-select {
    min-width: 0;
    padding: 7px 7px 7px 4px;
    text-align: left;
}

.wordstat-map-select span,
.wordstat-map-select strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wordstat-map-select span {
    color: #718096;
    font-size: 9px;
}

.wordstat-map-select strong {
    margin-top: 2px;
    color: #243247;
    font-size: 11px;
}

.wordstat-map-row-clean .wordstat-map-select {
    border-left: 2px solid #16a34a;
}

.wordstat-map-row-raw .wordstat-map-select {
    border-left: 2px solid #f59e0b;
}

.wordstat-map-row-breadth .wordstat-map-select {
    border-left: 2px solid #7c3aed;
}

.wordstat-map-limit {
    margin: 8px;
    color: #8b5e13;
    font-size: 10px;
}

.wordstat-map-inspector {
    min-width: 0;
    padding: 14px;
    overflow: auto;
}

.wordstat-map-path {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 11px;
    overflow-x: auto;
    white-space: nowrap;
}

.wordstat-map-path button {
    padding: 4px 7px;
    border: 1px solid #d6e1ee;
    border-radius: 999px;
    color: #52647b;
    background: #fff;
    font-size: 9px;
    cursor: pointer;
}

.wordstat-map-path button + button::before {
    margin-right: 7px;
    color: #9aabbd;
    content: "›";
}

.wordstat-map-path button[aria-current="page"] {
    color: #174eb6;
    border-color: #9abcf8;
    background: #eef5ff;
}

.wordstat-map-card {
    padding: 16px;
    border: 1px solid #d9e3ef;
    border-top: 4px solid #16a34a;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29, 48, 76, 0.07);
}

.wordstat-map-card-raw {
    border-top-color: #f59e0b;
}

.wordstat-map-card-breadth {
    border-top-color: #7c3aed;
}

.wordstat-map-card header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #64758a;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.wordstat-map-card header b {
    padding: 3px 7px;
    border-radius: 999px;
    color: #315172;
    background: #edf4fb;
}

.wordstat-map-card h3 {
    margin: 10px 0 12px;
    overflow-wrap: anywhere;
    color: #172033;
    font-size: 19px;
}

.wordstat-map-card dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 7px;
    margin: 0;
}

.wordstat-map-card dl div {
    padding: 8px 9px;
    border-radius: 9px;
    background: #f5f8fc;
}

.wordstat-map-card dt {
    color: #718096;
    font-size: 9px;
}

.wordstat-map-card dd {
    margin: 3px 0 0;
    color: #25364c;
    font-size: 11px;
    font-weight: 800;
}

.wordstat-map-card section {
    margin-top: 12px;
    padding: 10px 11px;
    border-radius: 10px;
    background: #f8fbff;
}

.wordstat-map-card h4,
.wordstat-map-card section p {
    margin: 0;
}

.wordstat-map-card h4 {
    margin-bottom: 4px;
    color: #52647b;
    font-size: 10px;
}

.wordstat-map-card section p {
    color: #33465f;
    font-size: 11px;
    line-height: 1.45;
}

.wordstat-map-card details {
    margin-top: 10px;
}

.wordstat-map-card summary {
    color: #315172;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.wordstat-map-card code {
    display: block;
    max-height: 110px;
    margin-top: 7px;
    padding: 9px;
    overflow: auto;
    border-radius: 8px;
    color: #263950;
    background: #f2f5f9;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wordstat-map-children {
    margin-top: 12px;
}

.wordstat-map-children > h3 {
    margin: 0 0 7px;
    color: #33465f;
    font-size: 12px;
}

.wordstat-map-children > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.wordstat-map-child {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #dce6f2;
    border-left: 3px solid #16a34a;
    border-radius: 9px;
    text-align: left;
    background: #fff;
    cursor: pointer;
}

.wordstat-map-child-raw {
    border-left-color: #f59e0b;
}

.wordstat-map-child-breadth {
    border-left-color: #7c3aed;
}

.wordstat-map-child span,
.wordstat-map-child strong,
.wordstat-map-child small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wordstat-map-child span,
.wordstat-map-child small {
    color: #718096;
    font-size: 8px;
}

.wordstat-map-child strong {
    margin: 2px 0;
    color: #25364c;
    font-size: 10px;
}

@media (max-width: 820px) {
    .wordstat-map-summary {
        grid-template-columns: repeat(3, minmax(90px, 1fr));
    }

    .wordstat-map-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .wordstat-map-toolbar .secondary-button {
        grid-column: 1 / -1;
    }

    .wordstat-map-workspace {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .wordstat-map-sidebar {
        max-height: 330px;
        border-right: 0;
        border-bottom: 1px solid #dce6f2;
    }

    .wordstat-map-card dl {
        grid-template-columns: repeat(2, minmax(90px, 1fr));
    }
}

@media (max-width: 520px) {
    .wordstat-map-summary,
    .wordstat-map-toolbar,
    .wordstat-map-children > div {
        grid-template-columns: 1fr;
    }
}

.wordstat-graph {
    max-height: 620px;
    padding: 16px 14px 20px;
    overflow: auto;
    border: 1px solid #dce6f2;
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 8%, rgba(37, 99, 235, 0.08), transparent 25%),
        linear-gradient(180deg, #fbfdff, #f6f9fd);
}

.wordstat-graph ul {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: max-content;
    margin: 0;
    padding: 26px 0 0;
    list-style: none;
}

.wordstat-graph > ul {
    padding-top: 0;
}

.wordstat-graph li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wordstat-graph li::before,
.wordstat-graph li::after {
    position: absolute;
    top: -13px;
    width: 50%;
    height: 13px;
    border-top: 2px solid #cbd8e8;
    content: "";
}

.wordstat-graph li::before {
    right: 50%;
}

.wordstat-graph li::after {
    left: 50%;
    border-left: 2px solid #cbd8e8;
}

.wordstat-graph li:only-child::before,
.wordstat-graph li:only-child::after,
.wordstat-graph li:first-child::before,
.wordstat-graph li:last-child::after {
    border-top-color: transparent;
}

.wordstat-graph li:last-child::before {
    border-right: 2px solid #cbd8e8;
    border-radius: 0 10px 0 0;
}

.wordstat-graph li:first-child::after {
    border-radius: 10px 0 0;
}

.wordstat-graph > ul > li::before,
.wordstat-graph > ul > li::after {
    display: none;
}

.wordstat-graph-node {
    width: 220px;
    min-height: 112px;
    padding: 12px 13px;
    border: 1px solid #ced9e7;
    border-top: 4px solid #2563eb;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 9px 24px rgba(26, 48, 78, 0.08);
}

.wordstat-graph-node-positive {
    border-top-color: #16a34a;
}

.wordstat-graph-node-residual {
    border-top-color: #f59e0b;
}

.wordstat-graph-node-breadth {
    border-top-color: #7c3aed;
}

.wordstat-graph-node-raw {
    border-top-color: #f59e0b;
    background: #fffaf2;
}

.wordstat-graph-node-raw_discovery {
    border-top-color: #16a34a;
    background: #f4fff9;
}

.wordstat-clean-marker {
    color: #08783e;
    font-weight: 700;
}

.wordstat-graph-node-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.wordstat-graph-node-head span,
.wordstat-graph-node-head b {
    font-size: 9px;
    line-height: 1.2;
}

.wordstat-graph-node-head span {
    color: #52647b;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wordstat-graph-node-head b {
    padding: 3px 6px;
    border-radius: 999px;
    color: #315172;
    background: #edf4fb;
}

.wordstat-graph-node strong,
.wordstat-graph-node small {
    display: block;
}

.wordstat-graph-node strong {
    overflow-wrap: anywhere;
    color: #172033;
    font-size: 13px;
}

.wordstat-graph-node small {
    margin-top: 4px;
    color: #718096;
    font-size: 10px;
}

.wordstat-graph-node p {
    margin: 7px 0 0;
    color: #3d4e63;
    font-size: 10px;
    line-height: 1.35;
}

.wordstat-request-log {
    margin-top: 12px;
    border-top: 1px solid #e3eaf3;
}

.wordstat-request-log summary {
    padding: 12px 2px 8px;
    color: #315172;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.wordstat-request-tree {
    display: grid;
    gap: 7px;
    max-height: 460px;
    overflow: auto;
}

.wordstat-request-node {
    position: relative;
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 9px;
    margin-left: calc(min(var(--tree-level), 3) * 22px);
    padding: 9px 11px;
    border: 1px solid #e1e8f2;
    border-radius: 11px;
    background: #f9fbfe;
}

.wordstat-request-dot {
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 2px #bfdbfe;
}

.wordstat-request-node strong,
.wordstat-request-node small {
    display: block;
}

.wordstat-request-node small {
    margin-top: 2px;
    color: #718096;
    font-size: 10px;
}

.wordstat-request-node p {
    margin: 4px 0 0;
    color: #334155;
    font-size: 11px;
}


.wordstat-history h2,
.wordstat-preview h2 {

    margin: 0 0 12px;

    font-size: 18px;

}


.job-list {

    display: grid;

    gap: 8px;

}

.job-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.job-list-row .job-list-item {
    flex: 1;
}

.job-list-row form {
    flex: 0 0 auto;
}


.job-list-item {

    display: grid;

    grid-template-columns: 1fr auto auto;

    gap: 14px;

    align-items: center;

    padding: 11px 12px;

    border-radius: 10px;

    color: #64748b;

    background: #f8fafc;

    font-size: 13px;

    text-decoration: none;

}


.job-list-item:hover {

    background: #eff6ff;

}


.job-list-item strong {

    color: #334155;

}

.job-list-summary {
    display: grid;
    gap: 2px;
}

.job-list-summary small {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}


.job-list-item em,
.job-status {

    padding: 5px 9px;

    border-radius: 999px;

    color: #1d4ed8;

    background: #dbeafe;

    font-size: 12px;

    font-style: normal;

    font-weight: 700;

}


.job-status-completed {

    color: #047857;

    background: #d1fae5;

}


.job-status-failed,
.job-status-network_error,
.job-status-auth_error,
.job-status-quota_exceeded {

    color: #b91c1c;

    background: #fee2e2;

}

.job-status-waiting_quota {
    color: #8a4b08;
    background: #fff0c2;
}

.wordstat-quota-wait {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 11px;
    align-items: center;
    margin: 13px 0;
    padding: 11px 13px;
    border: 1px solid #efc66d;
    border-radius: 12px;
    color: #633b0d;
    background: linear-gradient(135deg, #fff8df, #fff2c4);
}

.wordstat-quota-wait[hidden] {
    display: none;
}

.wordstat-quota-wait-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #d68a12;
    font-size: 20px;
    animation: wordstat-quota-pulse 2.8s ease-in-out infinite;
}

.wordstat-quota-wait strong,
.wordstat-quota-wait p {
    margin: 0;
}

.wordstat-quota-wait strong {
    font-size: 12px;
}

.wordstat-quota-wait p {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.4;
}

.wordstat-live-log.is-waiting-quota .wordstat-live-indicator {
    background: #d68a12;
    box-shadow: 0 0 0 5px rgba(214, 138, 18, 0.13);
    animation-duration: 2.8s;
}

@keyframes wordstat-quota-pulse {
    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.72;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

.job-status-waiting_for_pages {
    color: #92400e;
    background: #fef3c7;
}

.job-status-cancel_requested,
.job-status-cancelled {
    color: #475569;
    background: #e2e8f0;
}

.job-cancel-form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.missing-pages-card h2 {
    margin-top: 0;
}

.missing-page-field {
    margin: 18px 0;
}

.missing-page-field label {
    overflow-wrap: anywhere;
}

.missing-page-field > a {
    display: inline-block;
    margin: 5px 0 8px;
    font-size: 0.86rem;
}


.job-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 18px;

}


.job-heading h1 {

    margin: 3px 0 0;

    font-size: 28px;

}


.job-kicker {

    color: #94a3b8;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .06em;

}


.progress-track {

    height: 10px;

    overflow: hidden;

    border-radius: 999px;

    background: #e2e8f0;

}


.progress-track span {

    display: block;

    height: 100%;

    border-radius: inherit;

    background: #2563eb;

    transition: width .25s ease;

}


.job-progress-text {

    margin: 8px 0 18px;

    font-size: 13px;

}

.ai-stage-widget {
    margin: 16px 0 20px;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff 0%, #f8fafc 55%, #f5f3ff 100%);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.07);
}

.ai-stage-widget-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ai-stage-widget-heading div {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.ai-stage-widget-heading div > span {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ai-stage-widget-heading strong {
    color: #1e3a8a;
    font-size: 14px;
}

.ai-stage-live {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, .12);
}

.ai-stage-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #94a3b8;
    text-align: center;
}

.ai-stage::before {
    position: absolute;
    top: 14px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: #dbe4f0;
    content: "";
}

.ai-stage:first-child::before {
    display: none;
}

.ai-stage-marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid #dbe4f0;
    border-radius: 50%;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
}

.ai-stage-name {
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
}

.ai-stage-completed {
    color: #047857;
}

.ai-stage-completed::before {
    background: #6ee7b7;
}

.ai-stage-completed .ai-stage-marker {
    border-color: #10b981;
    color: transparent;
    background: #ecfdf5;
}

.ai-stage-completed .ai-stage-marker::after {
    position: absolute;
    color: #059669;
    content: "✓";
    font-size: 15px;
}

.ai-stage-active,
.ai-stage-stopping {
    color: #1d4ed8;
}

.ai-stage-active .ai-stage-marker,
.ai-stage-stopping .ai-stage-marker {
    border-color: #3b82f6;
    color: #1d4ed8;
    background: #eff6ff;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, .28);
    animation: ai-stage-pulse 3.2s ease-in-out infinite;
}

.ai-stage-stopping,
.ai-stage-cancelled {
    color: #64748b;
}

.ai-stage-stopping .ai-stage-marker,
.ai-stage-cancelled .ai-stage-marker {
    border-color: #94a3b8;
    color: #475569;
    background: #f1f5f9;
}

.ai-stage-error {
    color: #b91c1c;
}

.ai-stage-error .ai-stage-marker {
    border-color: #ef4444;
    color: #b91c1c;
    background: #fef2f2;
}

.ai-stage-detail {
    margin: 14px 0 0;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

@keyframes ai-stage-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, .24);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
        transform: scale(1.06);
    }
}

@media (max-width: 640px) {
    .ai-stage-widget {
        padding: 14px 12px;
    }

    .ai-stage-widget-heading div {
        display: block;
    }

    .ai-stage-widget-heading div > span {
        display: block;
        margin-bottom: 3px;
    }

    .ai-stage-name {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-stage-active .ai-stage-marker,
    .ai-stage-stopping .ai-stage-marker {
        animation: none;
    }
}


.job-meta {

    display: grid;

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

    gap: 10px;

    margin: 0 0 18px;

}


.job-meta div {

    padding: 10px;

    border-radius: 10px;

    background: #f8fafc;

}


.job-meta dt {

    color: #94a3b8;

    font-size: 11px;

}


.job-meta dd {

    margin: 4px 0 0;

    color: #334155;

    font-size: 13px;

    font-weight: 700;

}


.button-link {

    display: block;

    text-align: center;

    text-decoration: none;

}


.table-scroll {

    overflow-x: auto;

}


.wordstat-preview table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

}


.wordstat-preview th,
.wordstat-preview td {

    padding: 9px 10px;

    border-bottom: 1px solid #e2e8f0;

    text-align: left;

}


.wordstat-preview th {

    color: #64748b;

    background: #f8fafc;

}


.filter-results-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

}


.filter-result-panel {

    min-width: 0;

    padding: 14px;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    background: #f8fafc;

}


.filter-result-title {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;

}


.filter-result-title h3 {

    margin: 0 0 3px;

    color: #334155;

    font-size: 15px;

}


.filter-result-title span {

    color: #64748b;

    font-size: 12px;

}


.filter-result-panel textarea {

    min-height: 135px !important;

    background: #ffffff !important;

}


.filter-result-panel .secondary-button {

    width: 100%;

    margin-top: 9px;

}


.workflow-result-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
    margin-top: 9px;
}


.workflow-result-actions .secondary-button {
    margin-top: 0;
}


.workflow-transfer-button {
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: #2563eb;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}


.workflow-transfer-button:hover {
    background: #1d4ed8;
}


.workflow-transfer-button:disabled {
    color: #94a3b8;
    background: #e2e8f0;
    cursor: not-allowed;
}


.workflow-banner {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
}


.workflow-steps {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}


.workflow-step {
    padding: 5px 9px;
    border-radius: 999px;
    color: #475569;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
}


.workflow-step.is-complete {
    color: #166534;
    background: #dcfce7;
}


.workflow-step.is-current {
    color: #1d4ed8;
    background: #dbeafe;
}


.workflow-step.is-finished {
    color: #ffffff;
    background: #16a34a;
    box-shadow: 0 3px 9px rgba(22, 163, 74, 0.2);
}


.workflow-arrow {
    color: #64748b;
    font-weight: 700;
}


.workflow-banner-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}


.workflow-banner-message div {
    display: grid;
    gap: 3px;
}


.workflow-banner-message strong {
    color: #1e3a8a;
    font-size: 14px;
}


.workflow-banner-message span {
    color: #475569;
    font-size: 13px;
}


.workflow-banner-message a {
    flex: 0 0 auto;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}


.workflow-banner-message a:hover {
    color: #1d4ed8;
}


.filter-download {

    margin-top: 14px;

}


.tool-error {

    margin: 0 0 18px;

    padding: 11px 13px;

    border-radius: 10px;

    color: #b91c1c !important;

    background: #fef2f2;

    font-size: 14px;

}



/* LOGIN PAGE */


.login-page {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;


    background:

        linear-gradient(
            135deg,
            #f8fafc,
            #eef2ff
        );

}



.login-container {

    width: 100%;

    max-width: 420px;

    padding: 20px;

}



.login-card {

    background: white;


    padding: 40px;


    border-radius: 24px;



    box-shadow:

        0 15px 40px rgba(0,0,0,0.08);

}



.login-logo {

    font-size: 24px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #2563eb;

    margin-bottom: 25px;

}



.login-card h1 {

    margin: 0 0 10px;

    font-size: 28px;

}



.login-subtitle {

    color: #64748b;

    margin-bottom: 30px;

}


.input-group {

    margin-bottom: 20px;

}



.input-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    color: #475569;

}



.input-group input {

    width: 100%;

    padding: 13px 15px;


    border: 1px solid #dbe3ef;


    border-radius: 12px;


    font-size: 15px;


    outline: none;

}



.input-group input:focus {

    border-color: #2563eb;

}


.password-field {

    position: relative;

}


.password-field input {

    padding-right: 48px;

}


.password-toggle {

    position: absolute;

    top: 50%;

    right: 12px;

    width: 32px !important;

    height: 32px;

    padding: 6px !important;

    border: 0;

    border-radius: 8px !important;

    color: #64748b !important;

    background: transparent !important;

    transform: translateY(-50%);

}


.password-toggle:hover,
.password-toggle:focus-visible {

    color: #2563eb !important;

    background: #eff6ff !important;

    opacity: 1 !important;

}


.password-toggle svg {

    display: block;

    width: 20px;

    height: 20px;

}


.password-toggle .eye-closed {

    display: none;

}


.password-toggle[aria-pressed="true"] .eye-open {

    display: none;

}


.password-toggle[aria-pressed="true"] .eye-closed {

    display: block;

}



.login-card button {

    width: 100%;


    padding: 14px;


    border: none;


    border-radius: 12px;


    background:

        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );


    color: white;


    font-size: 16px;


    font-weight: 700;


    cursor: pointer;

}



.login-card button:hover {

    opacity: 0.9;

}



.error {

    margin-top: 20px;


    color: #dc2626;


    text-align: center;

}



/* FOOTER */


footer {

    text-align: center;


    padding: 50px 0 30px;


    color: #94a3b8;

}



/* MOBILE */


@media(max-width:700px) {


    .container {

        padding: 0 20px;

    }


    .header {

        height: 70px;

    }


    .services-header h1 {

        font-size: 28px;

    }


    .card {

        height: 250px;

        padding: 22px;

    }


    .login-card {

        padding: 30px;

    }

    .dashboard-nav {
        gap: 9px;
    }

    .signed-user {
        display: none;
    }

    .user-create-form,
    .user-row {
        grid-template-columns: 1fr;
    }


    .tool-card {

        padding: 22px;

    }


    .service-heading {

        align-items: flex-start;

    }


    .tool-result-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 6px;

    }


    .result-actions {

        grid-template-columns: 1fr;

    }


    .filter-results-grid {

        grid-template-columns: 1fr;

    }

    .workflow-result-actions {
        grid-template-columns: 1fr;
    }

    .workflow-banner-message {
        align-items: flex-start;
        flex-direction: column;
    }


    .wordstat-options,
    .wordstat-mode-fieldset,
    .wordstat-collection-settings,
    .job-meta {

        grid-template-columns: 1fr;

    }

    .token-add-form {
        grid-template-columns: 1fr;
    }

    .ai-thresholds {
        grid-template-columns: 1fr;
    }

    .connection-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .ai-provider-grid {
        grid-template-columns: 1fr;
    }

    .ai-local-connection-form {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-local-connection-form select {
        min-width: 0;
        width: 100%;
    }

    .wordstat-section-heading,
    .token-list-item,
    .local-ai-card {
        align-items: stretch;
        flex-direction: column;
    }

    .local-ai-card form {
        align-items: stretch;
        justify-content: flex-start;
    }

    .local-ai-card select {
        min-width: 0;
        width: 100%;
    }


    .job-list-item {

        grid-template-columns: 1fr auto;

    }

    .job-list-row,
    .job-cancel-form {
        align-items: stretch;
        flex-direction: column;
    }

    .job-list-row form button {
        width: 100%;
    }


    .job-list-item span {

        grid-column: 1 / -1;

    }

}


.security-return {

    display: inline-block;

    color: #2563eb;

    font-weight: 700;

    text-decoration: none;

}

/* Подбор сегментов */
.direct-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr); gap: 18px; margin-bottom: 18px; }
.direct-analysis-column { display: grid; align-content: start; gap: 10px; }
.parameter-settings-launch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px !important; }
.parameter-settings-launch > div { display: grid; gap: 1px; }.parameter-settings-launch strong { color: #33435b; font-size: .86rem; }.parameter-settings-launch small { color: #758299; font-size: .74rem; }
.parameter-settings-launch .parameter-settings-button { width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: .82rem; }
.direct-grid .tool-card, .direct-segments-page > .tool-card { margin: 0; }
.direct-grid h2, .recommendations h2 { margin-top: 0; }
.compact-form, .direct-start-card form { display: grid; gap: 12px; }
.compact-form label, .direct-start-card label, .safety-card label { display: grid; gap: 6px; color: #40506a; font-weight: 650; }
.compact-form input, .direct-start-card input, .direct-start-card select, .direct-start-card textarea, .safety-card input, .decision-form input { width: 100%; box-sizing: border-box; border: 1px solid #cbd7e8; border-radius: 10px; background: #fff; padding: 10px 12px; font: inherit; }
.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.connection-active { display: grid; gap: 3px; padding: 12px; margin: 8px 0 14px; border: 1px solid #b9e7cc; border-radius: 12px; background: #effbf4; }
.connection-active span, .connection-row small { color: #61718a; font-size: .82rem; }
.connection-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e5ebf4; }
.connection-row > span { display: grid; margin-right: auto; }
.text-button { border: 0; background: none; padding: 5px; color: #2563eb; font: inherit; font-weight: 700; cursor: pointer; }
.danger { color: #c24145 !important; }
.campaign-picker { max-height: 230px; overflow: auto; display: grid; gap: 5px; padding: 10px; border: 1px solid #d7e0ee; border-radius: 10px; }
.campaign-picker[hidden] { display: none; }
.campaign-picker label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: .88rem; }
.campaign-picker input { width: auto; }
.job-list { display: grid; gap: 8px; }
.job-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 12px; border: 1px solid #dce4f0; border-radius: 11px; color: inherit; text-decoration: none; }
.job-row > span:first-child { display: grid; gap: 2px; }
.job-row small { color: #69778d; }
.direct-job-archive-list { max-height: 560px; padding-right: 5px; overflow-y: auto; scrollbar-width: thin; }
.direct-job-summary { min-width: 0; }
.direct-job-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill, .risk-pill { display: inline-flex; align-items: center; width: fit-content; white-space: nowrap; border-radius: 999px; background: #eaf0f8; color: #40506a; padding: 5px 10px; font-size: .78rem; font-weight: 750; }
.status-review_ready, .status-preview_ready, .status-applied { background: #e8f8ef; color: #177346; }
.status-failed, .status-cancelled { background: #fff0f0; color: #b4232b; }
.job-title-row, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.job-title-row h1, .section-heading h2 { margin-bottom: 4px; }
.job-title-row p, .section-heading p { margin: 0; color: #65738a; }
.stage-widget { margin-bottom: 18px !important; }
.stage-widget-head { display: flex; align-items: center; justify-content: space-between; }
.stage-widget-head small { color: #68778e; }
.stage-widget-head h2 { margin: 2px 0 10px; }
.progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: #e8eef7; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f6ff0, #60a5fa); transition: width .45s ease; }
.stage-widget[data-stage-widget] .progress-track span { animation: direct-stage-pulse 2.4s ease-in-out infinite; }
@keyframes direct-stage-pulse { 50% { filter: brightness(1.18); box-shadow: 0 0 12px #4b8cff66; } }
.stage-dots { display: flex; gap: 5px; margin: 12px 0; }
.job-stage-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 14px; }.job-stage-actions form { margin: 0; }.restart-hint { flex-basis: 100%; margin: 0 !important; color: #6b788c !important; font-size: .78rem; }
.stage-dot { flex: 1; height: 4px; border-radius: 4px; background: #dce4ef; }
.stage-dot.completed { background: #49ad78; }.stage-dot.active { background: #3978ee; }
.review-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.review-summary div { display: grid; padding: 13px; border: 1px solid #dce4ef; border-radius: 12px; background: #fff; }
.review-summary strong { font-size: 1.35rem; }.review-summary span { color: #67758a; font-size: .82rem; }
.recommendations { margin: 24px 0; }
.recommendation-card { padding: 17px; margin-bottom: 12px; border: 1px solid #dce4ef; border-left: 4px solid #aab8cd; border-radius: 13px; background: #fff; }
.recommendation-card.decision-approved { border-left-color: #32a769; }.recommendation-card.decision-rejected { opacity: .7; border-left-color: #d9676c; }.recommendation-card.decision-hold { border-left-color: #d49b36; }
.recommendation-head { display: flex; justify-content: space-between; }.recommendation-card h3 { margin: 10px 0 6px; }.recommendation-card > p { color: #53627a; }
.recommendation-keyword, .recommendation-negative { width: fit-content; margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; color: #24456b !important; background: #eaf3ff; overflow-wrap: anywhere; }
.recommendation-negative { margin-top: -5px; }.recommendation-scope { margin: 0 0 12px; color: #5a687c !important; font-size: .86rem; line-height: 1.5; }
.recommendation-evidence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }.recommendation-evidence > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 7px; min-height: 0; padding: 7px 9px; border: 1px solid #e0e7f1; border-radius: 9px; background: #fafbfd; }.recommendation-evidence span { color: #6b788c; font-size: .68rem; }.recommendation-evidence strong { grid-row: 1 / span 2; grid-column: 2; color: #263750; font-size: .9rem; overflow-wrap: anywhere; }.recommendation-evidence small { color: #8490a2; font-size: .64rem; line-height: 1.2; }
.recommendation-risk { margin: 12px 0; padding: 12px 14px; border-radius: 10px; border-left: 3px solid #d89b34; background: #fff9eb; }.recommendation-risk p { margin: 4px 0 0; color: #655739; font-size: .84rem; line-height: 1.45; }
.recommendation-disclosure { margin: 9px 0; padding: 10px 12px; border: 1px solid #e0e7f1; border-radius: 10px; background: #f8fafc; }.recommendation-disclosure summary { cursor: pointer; color: #35465e; font-size: .84rem; font-weight: 700; }.recommendation-disclosure[open] summary { margin-bottom: 8px; }.recommendation-checks ul { margin: 0; padding-left: 20px; color: #4f5e74; font-size: .84rem; line-height: 1.5; }
.recommendation-bases > div { display: grid; gap: 7px; }.recommendation-bases article { padding: 10px 12px; border: 1px solid #e0e7f1; border-radius: 9px; background: #fff; }.recommendation-bases article span { color: #33455f; font-size: .8rem; font-weight: 700; }.recommendation-bases article p { margin: 4px 0 0; color: #68768b; font-size: .78rem; line-height: 1.45; }
.recommendation-covered { margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; color: #59677b !important; background: #eef2f7; font-size: .84rem; }
.technical-recommendation { margin-top: 12px; color: #53647c; font-size: .82rem; }.technical-recommendation summary { cursor: pointer; font-weight: 700; }
.risk-high { background: #fff0f0; color: #af3036; }.risk-medium { background: #fff6df; color: #8a5b00; }.risk-low { background: #eaf8f0; color: #167145; }
.metric-row { display: flex; flex-wrap: wrap; gap: 15px; margin: 12px 0; color: #68758a; font-size: .85rem; }
.technical-details { display: grid; grid-template-columns: 120px 1fr; gap: 5px 12px; font-size: .84rem; }.technical-details dt { color: #6a788d; }.technical-details dd { margin: 0; overflow-wrap: anywhere; }
.decision-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px; margin-top: 14px; }.decision-form > div { display: flex; gap: 6px; }
.decision-button { border: 1px solid #cad6e7; border-radius: 9px; background: #fff; padding: 9px 11px; font-weight: 700; cursor: pointer; }.decision-button.approve { color: #167145; }.decision-button.reject { color: #b22e36; }.decision-button.hold { color: #87600f; }
.safety-card { margin: 20px 0 !important; border-color: #b9caec; }.log-details pre { max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: .76rem; }
.result-files-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px !important; }.result-files-card h2 { margin: 0 0 4px; }.result-files-card p { margin: 0; color: #65738a; }
.parameter-settings-button { width: 100%; }
.parameter-settings-dialog { width: min(860px, calc(100% - 28px)); max-height: calc(100vh - 32px); }
.parameter-settings-dialog .readme-dialog-header p { margin: 5px 0 0; color: #68778e; font-size: .84rem; }
.parameter-settings-content { max-height: calc(100vh - 220px); overflow-y: auto; padding: 15px 20px; background: #f7f9fc; }
.parameter-group { margin-bottom: 9px; border: 1px solid #dce4ef; border-radius: 12px; background: #fff; }
.parameter-group > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; color: #26354d; font-weight: 750; cursor: pointer; }
.parameter-group > summary span { border-radius: 999px; background: #edf2f8; padding: 2px 8px; color: #718097; font-size: .72rem; }
.parameter-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 14px; padding: 0 14px 13px; }
.parameter-field { display: grid !important; grid-template-columns: minmax(0, 1fr) 130px; align-items: center; gap: 12px !important; min-height: 57px; padding: 7px 0; border-top: 1px solid #edf1f6; }
.parameter-field > span { display: grid; gap: 2px; min-width: 0; }.parameter-field strong { color: #33435b; font-size: .84rem; }.parameter-field em { color: #2768d7; font: 600 .68rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }.parameter-field small { color: #768398; font-size: .74rem; font-weight: 400; line-height: 1.25; }
.parameter-field input, .parameter-field select { min-width: 0; padding: 8px 9px; font-size: .82rem; }
.parameter-field-toggle { grid-template-columns: minmax(0, 1fr) auto; }.parameter-field-toggle input { width: 20px !important; height: 20px; accent-color: #296deb; }
.parameter-settings-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px; border-top: 1px solid #dfe6f0; background: #fff; }
@media (max-width: 760px) { .direct-grid { grid-template-columns: 1fr; }.review-summary { grid-template-columns: 1fr 1fr; }.job-title-row, .section-heading, .result-files-card { flex-direction: column; align-items: stretch; }.decision-form { grid-template-columns: 1fr; }.decision-form > div { flex-wrap: wrap; }.date-row { grid-template-columns: 1fr; }.recommendation-evidence { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .parameter-fields { grid-template-columns: 1fr; }.parameter-settings-content { padding: 10px; }.parameter-field { grid-template-columns: minmax(0, 1fr) 105px; }.parameter-settings-launch { align-items: stretch; flex-direction: column; }.parameter-settings-launch .parameter-settings-button { width: 100%; } }

/* Подробный учебник Direct Segment Selector */
.service-help-nav { display: grid; justify-items: center; gap: 1px; line-height: 1.05; }
.service-help-nav .wtf-link { color: #7c3aed; font-size: .72rem; font-weight: 850; letter-spacing: .08em; }
.tutorial-dialog { width: min(1080px, calc(100% - 28px)); max-height: calc(100vh - 28px); }
.tutorial-dialog .readme-dialog-header { position: sticky; top: 0; z-index: 4; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); }
.tutorial-dialog .readme-content { padding: 0; scroll-behavior: smooth; }
.dss-tutorial { color: #42516a; background: #f7f9fc; }
.dss-tutorial p, .dss-tutorial li, .dss-tutorial dd { font-size: .88rem; line-height: 1.65; }
.tutorial-lead { padding: 30px 34px; color: #e5edff; background: radial-gradient(circle at 85% 15%, #3156b8 0, transparent 34%), linear-gradient(135deg, #111d38, #172d62); }
.tutorial-lead h3 { max-width: 760px; margin: 5px 0 12px; color: #fff; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.15; }
.tutorial-lead p { max-width: 850px; color: #cbd9f7; font-size: .96rem; }
.tutorial-eyebrow { margin: 0 !important; color: #8db4ff !important; font-size: .72rem !important; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.dss-tutorial aside { margin-top: 18px; padding: 14px 16px; border: 1px solid #91aff15c; border-radius: 12px; color: #40506a; background: #edf3ff; font-size: .86rem; line-height: 1.55; }
.tutorial-lead aside { max-width: 850px; color: #e9efff; background: #ffffff13; }
.tutorial-toc { padding: 22px 34px; border-bottom: 1px solid #dce4ef; background: #fff; }
.tutorial-toc > strong { display: block; margin-bottom: 10px; color: #22334e; }
.tutorial-toc ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; margin: 0; padding-left: 22px; }
.tutorial-toc li { color: #718096; font-size: .79rem; }.tutorial-toc a { color: #2764c9; text-decoration: none; }.tutorial-toc a:hover { text-decoration: underline; }
.tutorial-chapter { position: relative; padding: 30px 34px; border-bottom: 1px solid #dce4ef; scroll-margin-top: 90px; }
.tutorial-chapter:nth-of-type(even) { background: #fff; }
.tutorial-number { display: inline-flex; margin-bottom: 5px; color: #326ee0; font: 800 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.dss-tutorial .tutorial-chapter > h3 { margin: 0 0 12px; color: #1f304b; font-size: 1.35rem; }
.dss-tutorial h4 { margin: 18px 0 5px; color: #2c3e59; font-size: .96rem; }
.dss-tutorial p { margin: 6px 0; color: #53627a; }
.dss-tutorial ul, .dss-tutorial ol { color: #53627a; }
.tutorial-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tutorial-columns article, .tutorial-action-list article { padding: 15px 17px; border: 1px solid #d9e2ef; border-radius: 12px; background: #fff; }
.tutorial-columns h4, .tutorial-action-list h4 { margin-top: 0; }
.tutorial-columns ul { margin-bottom: 0; padding-left: 20px; }
.tutorial-glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.tutorial-glossary > div { padding: 11px 13px; border: 1px solid #dde5f0; border-radius: 10px; background: #fff; }
.tutorial-glossary dt { color: #263a59; font-weight: 800; }.tutorial-glossary dd { margin: 3px 0 0; color: #607087; font-size: .8rem; }
.tutorial-steps { display: grid; gap: 9px; padding-left: 23px; }.tutorial-steps li { padding-left: 5px; }
.tutorial-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; }
.tutorial-flow article { position: relative; min-height: 108px; padding: 14px 16px 14px 54px; border: 1px solid #dce4ef; border-radius: 12px; background: #fff; }
.tutorial-flow article > b { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: #3474e6; font-size: .78rem; }
.tutorial-flow h4 { margin: 0 0 4px; }.tutorial-flow p { margin: 0; font-size: .79rem; }
.tutorial-table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid #dce4ef; border-radius: 12px; background: #fff; }
.tutorial-table { width: 100%; border-collapse: collapse; font-size: .79rem; }.tutorial-table th, .tutorial-table td { padding: 10px 12px; border-bottom: 1px solid #e6ebf3; text-align: left; vertical-align: top; line-height: 1.45; }.tutorial-table th { color: #31445f; background: #f0f4fa; }.tutorial-table tr:last-child td { border-bottom: 0; }
.tutorial-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.tutorial-metric-grid article { padding: 14px; border: 1px solid #dce4ef; border-radius: 12px; background: #fff; }.tutorial-metric-grid h4 { margin-top: 0; }.tutorial-metric-grid code { display: inline-block; color: #285daa; background: #eaf2ff; }.tutorial-metric-grid p { font-size: .78rem; }
.tutorial-statuses { display: grid; gap: 7px; margin-top: 12px; }.tutorial-statuses div { display: grid; grid-template-columns: 135px 1fr; gap: 10px; padding: 9px 12px; border-left: 3px solid #6c91d6; border-radius: 6px; background: #fff; }.tutorial-statuses strong { color: #2f4669; }.tutorial-statuses span { font-size: .82rem; }
.tutorial-action-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }.tutorial-action-list p { font-size: .8rem; }
.tutorial-module-groups, .tutorial-faq { display: grid; gap: 9px; margin-top: 14px; }
.tutorial-module-groups details, .tutorial-faq details, .tutorial-setting-group { overflow: hidden; border: 1px solid #d9e2ee; border-radius: 11px; background: #fff; }
.tutorial-module-groups summary, .tutorial-faq summary, .tutorial-setting-group > summary { padding: 12px 14px; color: #2c405e; font-weight: 800; cursor: pointer; }
.tutorial-module-groups ul { margin: 0; padding: 0 34px 15px; }.tutorial-faq p { margin: 0; padding: 0 14px 14px; }
.tutorial-setting-group { margin-top: 9px; }.tutorial-setting-group > summary { display: flex; justify-content: space-between; gap: 15px; }.tutorial-setting-group > summary small { color: #718198; font-weight: 600; }
.tutorial-group-guide { margin: 0 !important; padding: 0 14px 13px; color: #5e6e84 !important; font-size: .8rem !important; }
.tutorial-setting-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; padding: 0 14px 14px; }
.tutorial-setting-list article { padding: 12px 0; border-top: 1px solid #e7ecf3; }.tutorial-setting-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.tutorial-setting-title strong { color: #31435f; font-size: .84rem; }.tutorial-setting-title code { flex: 0 1 auto; overflow-wrap: anywhere; color: #2666cc; font-size: .67rem; text-align: right; }.tutorial-setting-list article > p { font-size: .77rem; line-height: 1.5; }
.tutorial-setting-list dl { display: flex; flex-wrap: wrap; gap: 3px 7px; margin: 7px 0 0; font-size: .7rem; }.tutorial-setting-list dt { color: #8792a3; }.tutorial-setting-list dd { margin: 0 10px 0 0; color: #475972; font-size: .7rem; font-weight: 700; }.tutorial-options span { display: block; }
.tutorial-top-link { display: inline-flex; margin-top: 18px; color: #2868d5; font-weight: 750; text-decoration: none; }
@media (max-width: 780px) { .tutorial-toc ol, .tutorial-metric-grid, .tutorial-action-list { grid-template-columns: 1fr 1fr; }.tutorial-columns, .tutorial-flow, .tutorial-glossary, .tutorial-setting-list { grid-template-columns: 1fr; }.tutorial-lead, .tutorial-toc, .tutorial-chapter { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 520px) { .service-nav { gap: 10px; }.tutorial-toc ol, .tutorial-metric-grid, .tutorial-action-list { grid-template-columns: 1fr; }.tutorial-statuses div { grid-template-columns: 1fr; gap: 2px; }.tutorial-dialog { width: calc(100% - 12px); }.tutorial-dialog .readme-dialog-header { padding: 14px 16px; }.tutorial-dialog .readme-dialog-header h2 { font-size: 1.05rem; } }

/* Shared Yandex Direct account controls used by every Direct-powered service. */
.direct-settings-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit !important;
}
.direct-settings-button:hover { color: #55407f !important; }
.direct-settings-icon {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 5px;
    background: #fc3f3f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}
.direct-account-panel {
    position: relative;
    overflow: hidden;
    border-color: #ded6f6;
    background: linear-gradient(145deg, #fff 55%, #faf7ff);
}
.direct-account-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #6f4cc7, #b986e8, #ffcc55);
}
.direct-account-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.direct-account-panel__header h2 { margin: 2px 0 0 !important; }
.direct-account-panel__eyebrow {
    color: #8062c8;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.direct-account-settings-link { color: #6a4cb3; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.direct-account-current, .direct-account-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid #bce4cb;
    border-radius: 12px;
    background: #f0faf4;
}
.direct-account-current > span:last-child, .direct-account-empty { display: grid; }
.direct-account-current small, .direct-account-empty span { color: #64748b; font-size: .82rem; }
.direct-account-current__status {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #25a55f;
    box-shadow: 0 0 0 4px #d8f2e2;
}
.direct-account-empty { border-color: #ead9a6; background: #fffaf0; }
.direct-account-select-form { display: grid; gap: 7px; margin-bottom: 14px; }
.direct-account-select-form > label { color: #40506a; font-size: .84rem; font-weight: 700; }
.direct-account-select-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.direct-account-select-row select {
    min-width: 0;
    width: 100%;
    border: 1px solid #cbd7e8;
    border-radius: 10px;
    background: #fff;
    padding: 10px 34px 10px 12px;
    color: #25324a;
    font: inherit;
}
.direct-account-add { border-top: 1px solid #e8e3f3; padding-top: 12px; }
.direct-account-add summary { color: #6649ad; cursor: pointer; font-weight: 750; }
.direct-account-add[open] summary { margin-bottom: 14px; }
.direct-account-add .primary-button { justify-self: start; }
@media (max-width: 620px) {
    .direct-account-panel__header { display: grid; }
    .direct-account-select-row { grid-template-columns: 1fr; }
    .direct-account-select-row .secondary-button { width: 100%; }
}