:root {
    font-family:
        Inter,
        Arial,
        sans-serif;

    color: #202124;
    background: #f4f5f7;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #f4f5f7;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-card {
    width: min(420px, 100%);
    padding: 40px;
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(31, 38, 49, 0.08);
}

.brand-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 16px;
    background: #171a21;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
}

.brand-mark-small {
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 12px;
    font-size: 19px;
}

.auth-card h1 {
    margin: 0 0 8px;
    font-size: 32px;
}

.auth-subtitle {
    margin: 0 0 30px;
    color: #6a7280;
    line-height: 1.5;
}

.auth-card form {
    display: grid;
    gap: 10px;
}

.auth-card label {
    margin-top: 8px;
    font-weight: 700;
    font-size: 14px;
}

.auth-card input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #ccd2da;
    border-radius: 10px;
    outline: none;
}

.auth-card input:focus {
    border-color: #536de6;
    box-shadow: 0 0 0 3px rgba(83, 109, 230, 0.12);
}

.auth-card button {
    margin-top: 14px;
    padding: 13px 16px;
    border: 0;
    border-radius: 10px;
    background: #536de6;
    color: #ffffff;
    font-weight: 700;
}

.auth-note {
    margin: 24px 0 0;
    color: #838a96;
    font-size: 13px;
    text-align: center;
}

.alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    line-height: 1.45;
}

.alert-error {
    background: #fff0f0;
    color: #a42828;
    border: 1px solid #ffd0d0;
}

.app-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    background: #171a21;
    color: #ffffff;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 26px;
}

.sidebar-brand strong,
.sidebar-brand span {
    display: block;
}

.sidebar-brand span {
    margin-top: 3px;
    color: #979eaa;
    font-size: 12px;
}

.sidebar-nav {
    display: grid;
    gap: 7px;
}

.sidebar-nav a,
.sidebar-nav span {
    padding: 12px 14px;
    border-radius: 10px;
    color: #c9ced6;
    text-decoration: none;
}

.sidebar-nav a.active {
    background: #2b303b;
    color: #ffffff;
    font-weight: 700;
}

.sidebar-nav .disabled {
    opacity: 0.52;
}

.logout-form {
    margin-top: auto;
}

.button-secondary {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #3c424f;
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
}

.main-content {
    min-width: 0;
    padding: 38px;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.eyebrow {
    margin: 0 0 7px;
    color: #536de6;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page-header h1 {
    margin: 0;
    font-size: 34px;
}

.page-description {
    margin: 9px 0 0;
    color: #68717f;
}

.user-card {
    min-width: 220px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e0e4e9;
    border-radius: 12px;
}

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

.user-card span {
    margin-top: 4px;
    color: #737b87;
    font-size: 13px;
}

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

.stat-card {
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e0e4e9;
    border-radius: 15px;
}

.stat-card span,
.stat-card strong {
    display: block;
}

.stat-card span {
    color: #727a87;
    font-size: 14px;
}

.stat-card strong {
    margin-top: 12px;
    font-size: 28px;
}

.stat-card .status-ok {
    color: #25864b;
    font-size: 21px;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 22px;
}

.panel {
    min-width: 0;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e0e4e9;
    border-radius: 15px;
}

.panel-header h2 {
    margin: 0;
    font-size: 20px;
}

.panel-header p {
    margin: 7px 0 0;
    color: #737b87;
    line-height: 1.5;
}

.workspace-box,
.empty-state {
    margin-top: 24px;
    padding: 18px;
    border-radius: 12px;
    background: #f6f7f9;
}

.workspace-box strong,
.workspace-box span {
    display: block;
}

.workspace-box span {
    margin-top: 5px;
    color: #747c88;
    font-size: 13px;
}

.empty-state {
    color: #727a87;
    line-height: 1.5;
}

.job-list {
    margin-top: 18px;
}

.job-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f3;
}

.job-row:last-child {
    border-bottom: 0;
}

.job-row strong,
.job-row span {
    display: block;
}

.job-row div span {
    margin-top: 4px;
    color: #747c88;
    font-size: 13px;
}

.job-status {
    padding: 6px 9px;
    background: #eef1ff;
    color: #4059cd;
    border-radius: 8px;
    font-size: 12px;
}

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

    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .app-layout {
        display: block;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .sidebar-nav {
        display: none;
    }

    .logout-form {
        margin-top: 18px;
    }

    .main-content {
        padding: 24px 18px;
    }

    .page-header {
        display: block;
    }

    .user-card {
        margin-top: 18px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}


/* Stage 4: projects */

.sidebar-nav a {
    display: block;
}

.button-primary,
.button-secondary-light,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.button-primary {
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    background: #536de6;
    color: #ffffff;
    font-weight: 700;
}

.button-primary:hover {
    background: #435cd0;
}

.button-secondary-light {
    padding: 11px 16px;
    border: 1px solid #d5dae1;
    border-radius: 10px;
    background: #ffffff;
    color: #262b33;
    font-weight: 700;
}

.button-link {
    padding: 11px 4px;
    color: #5c6572;
}

.button-danger {
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    background: #c43c3c;
    color: #ffffff;
    font-weight: 700;
}

.alert-success {
    background: #ebf8ef;
    color: #247142;
    border: 1px solid #c9ead4;
}

.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.filter-tabs a {
    padding: 9px 14px;
    border-radius: 9px;
    color: #69717e;
    text-decoration: none;
}

.filter-tabs a.active {
    background: #ffffff;
    color: #22262d;
    box-shadow: 0 0 0 1px #dfe3e8;
    font-weight: 700;
}

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

.project-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e0e4e9;
    border-radius: 15px;
    background: #ffffff;
    color: #202124;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(31, 38, 49, 0.08);
}

.project-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.project-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eef1ff;
    color: #4862d5;
    font-size: 19px;
    font-weight: 800;
}

.project-status {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eaf7ee;
    color: #2c7c47;
    font-size: 12px;
    font-weight: 700;
}

.project-status.archived {
    background: #eff1f4;
    color: #68717e;
}

.project-card h2 {
    margin: 20px 0 9px;
    font-size: 20px;
}

.project-card p {
    min-height: 48px;
    margin: 0;
    color: #6d7581;
    line-height: 1.5;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #edf0f3;
    color: #858c97;
    font-size: 12px;
}

.empty-projects {
    padding: 55px 24px;
    text-align: center;
}

.empty-project-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: #eef1ff;
    color: #536de6;
    font-size: 30px;
}

.empty-projects h2 {
    margin: 0 0 8px;
}

.empty-projects p {
    max-width: 520px;
    margin: 0 auto 22px;
    color: #717986;
    line-height: 1.55;
}

.form-card {
    max-width: 820px;
    padding: 28px;
    border: 1px solid #e0e4e9;
    border-radius: 15px;
    background: #ffffff;
}

.form-field {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
}

.form-field label {
    font-weight: 700;
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #ccd2da;
    border-radius: 10px;
    background: #ffffff;
    outline: none;
}

.form-field textarea {
    resize: vertical;
    line-height: 1.55;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: #536de6;
    box-shadow: 0 0 0 3px rgba(83, 109, 230, 0.12);
}

.form-field small {
    color: #7c8490;
}

.readonly-box {
    margin-bottom: 24px;
    padding: 15px 16px;
    border-radius: 10px;
    background: #f5f6f8;
}

.readonly-box span,
.readonly-box strong {
    display: block;
}

.readonly-box span {
    margin-bottom: 5px;
    color: #747c88;
    font-size: 13px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.breadcrumb {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    color: #808895;
    font-size: 13px;
}

.breadcrumb a {
    color: #536de6;
    text-decoration: none;
}

.project-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
}

.details-list {
    margin: 22px 0 0;
}

.details-list div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f3;
}

.details-list div:last-child {
    border-bottom: 0;
}

.details-list dt {
    color: #777f8b;
}

.details-list dd {
    min-width: 0;
    margin: 0;
    font-weight: 700;
}

.path-value {
    overflow-wrap: anywhere;
    font-family: monospace;
    font-size: 13px;
}

.project-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.project-sections span {
    padding: 14px;
    border-radius: 10px;
    background: #f5f6f8;
    color: #737b87;
}

.danger-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 22px;
    padding: 24px;
    border: 1px solid #ead6d6;
    border-radius: 15px;
    background: #ffffff;
}

.danger-panel h2 {
    margin: 0;
    font-size: 18px;
}

.danger-panel p {
    margin: 7px 0 0;
    color: #747c88;
    line-height: 1.5;
}

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

@media (max-width: 800px) {
    .project-grid,
    .project-overview-grid {
        grid-template-columns: 1fr;
    }

    .danger-panel {
        display: block;
    }

    .danger-panel form {
        margin-top: 18px;
    }
}

@media (max-width: 560px) {
    .project-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }
}


/* Stage 5: channels */

.project-sections a {
    display: block;
    padding: 14px;
    border-radius: 10px;
    background: #eef1ff;
    color: #4059cd;
    font-weight: 700;
    text-decoration: none;
}

.project-sections a:hover {
    background: #e4e8ff;
}

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

.channel-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid #e0e4e9;
    border-radius: 15px;
    background: #ffffff;
}

.channel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.channel-platform {
    padding: 7px 10px;
    border-radius: 8px;
    background: #171a21;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.channel-status {
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.channel-status-active {
    background: #eaf7ee;
    color: #2c7c47;
}

.channel-status-paused {
    background: #fff5df;
    color: #94661b;
}

.channel-status-archived {
    background: #eff1f4;
    color: #68717e;
}

.channel-card h2 {
    margin: 20px 0 5px;
    font-size: 22px;
}

.channel-slug {
    margin: 0;
    color: #8a919c;
    font-family: monospace;
    font-size: 13px;
}

.channel-details {
    margin: 20px 0 0;
}

.channel-details div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f3;
}

.channel-details div:last-child {
    border-bottom: 0;
}

.channel-details dt {
    color: #777f8b;
}

.channel-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.channel-details a {
    color: #536de6;
    text-decoration: none;
}


.channel-lines-box {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #e3e7ec;
    border-radius: 12px;
    background: #f8f9fb;
}

.channel-lines-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.channel-lines-header h3 {
    margin: 0;
    font-size: 15px;
}

.channel-lines-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e8ecff;
    color: #4359c7;
    font-size: 12px;
    font-weight: 800;
}

.channel-lines-list {
    display: grid;
    gap: 8px;
}

.channel-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border: 1px solid #e8ebef;
    border-radius: 9px;
    background: #ffffff;
}

.channel-line-info {
    min-width: 0;
}

.channel-line-info strong {
    display: block;
    overflow-wrap: anywhere;
}

.channel-line-info span {
    display: block;
    margin-top: 3px;
    color: #777f8b;
    font-size: 13px;
}

.channel-line-label {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eff1f4;
    color: #68717e;
    font-size: 11px;
    font-weight: 700;
}

.channel-line-label.is-current {
    background: #eaf7ee;
    color: #2c7c47;
}

.channel-lines-empty {
    margin: 0;
    color: #777f8b;
    font-size: 14px;
}

@media (max-width: 640px) {
    .channel-line-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

.channel-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf0f3;
}

.channel-card-actions form {
    margin: 0;
}

.button-text-danger {
    padding: 9px 4px;
    border: 0;
    background: transparent;
    color: #b63838;
    font-weight: 700;
}

.channel-form-card {
    max-width: 900px;
}

.form-section {
    margin-bottom: 30px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e8ebef;
}

.form-section:last-of-type {
    border-bottom: 0;
}

.form-section h2 {
    margin: 0;
    font-size: 20px;
}

.form-section > p {
    margin: 7px 0 22px;
    color: #747c88;
    line-height: 1.5;
}

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

.form-field select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #ccd2da;
    border-radius: 10px;
    background: #ffffff;
    outline: none;
}

.form-field select:focus {
    border-color: #536de6;
    box-shadow: 0 0 0 3px rgba(83, 109, 230, 0.12);
}

@media (max-width: 900px) {
    .channel-grid,
    .two-column-fields {
        grid-template-columns: 1fr;
    }
}


/* Stage 6: instructions */

.instruction-summary {
    display: grid;
    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );
    gap: 16px;
    margin-bottom: 22px;
}

.instruction-date {
    font-size: 17px !important;
}

.instruction-checksum {
    font-family: monospace;
    font-size: 17px !important;
}

.instruction-sections {
    display: grid;
    gap: 14px;
}

.instruction-section {
    overflow: hidden;
    border: 1px solid #e0e4e9;
    border-radius: 14px;
    background: #ffffff;
}

.instruction-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
}

.instruction-section summary::-webkit-details-marker {
    display: none;
}

.instruction-section summary strong,
.instruction-section summary span {
    display: block;
}

.instruction-section summary strong {
    font-size: 17px;
}

.instruction-section summary div span {
    margin-top: 5px;
    color: #747c88;
    font-size: 13px;
    line-height: 1.45;
}

.instruction-size {
    flex: 0 0 auto;
    color: #808894;
    font-size: 12px;
}

.instruction-text {
    max-height: 620px;
    overflow: auto;
    margin: 0;
    padding: 22px;
    border-top: 1px solid #edf0f3;
    background: #f8f9fb;
    color: #242830;
    font-family:
        Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.instruction-empty {
    padding: 22px;
    border-top: 1px solid #edf0f3;
    background: #f8f9fb;
    color: #858d98;
}

.instruction-history {
    margin-top: 22px;
}

.version-list {
    margin-top: 18px;
}

.version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 17px 0;
    border-bottom: 1px solid #edf0f3;
}

.version-row:last-child {
    border-bottom: 0;
}

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

.version-main span {
    margin-top: 5px;
    color: #7a828e;
    font-size: 13px;
}

.version-main p {
    margin: 8px 0 0;
    color: #5f6874;
}

.version-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.version-actions form {
    margin: 0;
}

.active-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eaf7ee;
    color: #287646;
    font-size: 12px;
    font-weight: 800;
}

.active-version-badge.large {
    padding: 10px 14px;
    font-size: 14px;
}

.instruction-import-card {
    margin-bottom: 18px;
}

.instruction-import-form {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

.instruction-import-form .form-field {
    flex: 1;
    margin: 0;
}

.instruction-import-report {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
}

.instruction-import-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px 16px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #ffffff;
}

.instruction-import-row strong {
    overflow-wrap: anywhere;
}

.instruction-import-row span {
    color: #536de6;
    font-weight: 700;
}

.instruction-import-row small {
    color: #737b87;
    white-space: nowrap;
}

.instruction-form {
    display: grid;
    gap: 18px;
}

.instruction-form-section {
    max-width: none;
}

.instruction-form-header h2 {
    margin: 0;
    font-size: 20px;
}

.instruction-form-header p {
    margin: 7px 0 18px;
    color: #737b87;
    line-height: 1.5;
}

.instruction-form-section textarea {
    width: 100%;
    min-height: 230px;
    padding: 15px;
    border: 1px solid #ccd2da;
    border-radius: 10px;
    background: #ffffff;
    font-family:
        Arial,
        sans-serif;
    line-height: 1.6;
    resize: vertical;
    outline: none;
}

.instruction-form-section textarea:focus {
    border-color: #536de6;
    box-shadow: 0 0 0 3px rgba(83, 109, 230, 0.12);
}

.instruction-comment {
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    background: #ffffff;
}

.instruction-comment strong,
.instruction-comment p {
    display: block;
}

.instruction-comment p {
    margin: 6px 0 0;
    color: #616a76;
}

@media (max-width: 1000px) {
    .instruction-summary {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }
}

@media (max-width: 680px) {
    .instruction-summary {
        grid-template-columns: 1fr;
    }

    .instruction-section summary,
    .version-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .version-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
}


/* Stage 7: sources */

.header-actions,
.empty-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.source-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e0e4e9;
    border-radius: 15px;
    background: #ffffff;
}

.source-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.source-type {
    padding: 7px 10px;
    border-radius: 8px;
    background: #eef1ff;
    color: #4059cd;
    font-size: 12px;
    font-weight: 800;
}

.source-status {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eaf7ee;
    color: #287646;
    font-size: 12px;
    font-weight: 700;
}

.source-card h2 {
    margin: 19px 0 8px;
    font-size: 21px;
}

.source-card h2 a {
    color: #202124;
    text-decoration: none;
}

.source-card h2 a:hover {
    color: #536de6;
}

.source-description,
.source-url {
    margin: 0 0 12px;
    color: #6e7682;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.source-url {
    font-family: monospace;
    font-size: 12px;
}

.source-file-box,
.source-ready-box {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 11px;
    background: #f5f6f8;
}

.source-file-box strong,
.source-file-box span,
.source-ready-box strong,
.source-ready-box span {
    display: block;
}

.source-file-box strong {
    overflow-wrap: anywhere;
}

.source-file-box span,
.source-ready-box span {
    margin-top: 5px;
    color: #737b87;
    font-size: 13px;
}

.source-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 19px;
    padding-top: 16px;
    border-top: 1px solid #edf0f3;
}

.source-card-footer span {
    color: #858d98;
    font-size: 12px;
}

.source-card-footer a {
    color: #536de6;
    font-weight: 700;
    text-decoration: none;
}

.source-form-card {
    max-width: 880px;
}

.upload-warning {
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 1px solid #e6dfc0;
    border-radius: 10px;
    background: #fff9e9;
    color: #765f1f;
    line-height: 1.5;
}

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

.source-assets-panel {
    margin-top: 22px;
}

.asset-list {
    margin-top: 18px;
}

.asset-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #edf0f3;
}

.asset-row:last-child {
    border-bottom: 0;
}

.asset-row strong,
.asset-row span {
    display: block;
}

.asset-row strong {
    overflow-wrap: anywhere;
}

.asset-row span {
    margin-top: 5px;
    color: #737b87;
    font-size: 13px;
}

@media (max-width: 900px) {
    .source-grid,
    .source-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .header-actions,
    .empty-actions,
    .asset-row {
        align-items: stretch;
        flex-direction: column;
    }
}


/* Stage 8: transcriber */

.transcription-start-form {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    background: #ffffff;
}

.transcription-start-form .form-field {
    margin-bottom: 14px;
}

.transcription-status-card {
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid #e0e4e9;
    border-radius: 15px;
    background: #ffffff;
}

.transcription-status-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.transcription-status-top div span,
.transcription-status-top div strong {
    display: block;
}

.transcription-status-top div span {
    color: #69727e;
}

.transcription-status-top div strong {
    margin-top: 6px;
    font-size: 30px;
}

.transcription-status-top p {
    margin: 0;
    color: #68717e;
}

.progress-track,
.mini-progress {
    overflow: hidden;
    border-radius: 999px;
    background: #e9ecf1;
}

.progress-track {
    height: 14px;
}

.progress-track div,
.mini-progress div {
    height: 100%;
    border-radius: inherit;
    background: #536de6;
    transition: width 0.3s ease;
}

.transcription-list {
    display: grid;
}

.transcription-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid #edf0f3;
}

.transcription-row:last-child {
    border-bottom: 0;
}

.transcription-row-main {
    min-width: 0;
    flex: 1;
}

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

.transcription-row-main span {
    margin-top: 5px;
    color: #777f8b;
    font-size: 13px;
}

.mini-progress {
    width: min(420px, 100%);
    height: 7px;
    margin-top: 12px;
}

.transcription-row-status {
    display: flex;
    align-items: center;
    gap: 14px;
}

.job-state {
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef1ff;
    color: #4059cd;
    font-size: 12px;
    font-weight: 800;
}

.job-state-completed {
    background: #eaf7ee;
    color: #287646;
}

.job-state-completed_degraded {
    background: #fff6dd;
    color: #8a5b00;
}

.job-state-failed {
    background: #fff0f0;
    color: #a42828;
}

.transcription-error {
    margin-top: 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.transcript-summary-grid {
    display: grid;
    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );
    gap: 16px;
    margin-bottom: 22px;
}

.transcript-downloads {
    margin-bottom: 22px;
}

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

.download-card {
    padding: 18px;
    border: 1px solid #dfe3e8;
    border-radius: 11px;
    color: #22262d;
    text-decoration: none;
}

.download-card:hover {
    border-color: #536de6;
    background: #f7f8ff;
}

.download-card strong,
.download-card span {
    display: block;
}

.download-card strong {
    color: #536de6;
    font-size: 18px;
}

.download-card span {
    margin-top: 6px;
    color: #727a87;
    font-size: 13px;
}

.transcript-text {
    max-height: 700px;
    overflow: auto;
    margin-top: 20px;
    padding: 22px;
    border-radius: 11px;
    background: #f7f8fa;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
    .transcript-summary-grid,
    .download-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }
}

@media (max-width: 700px) {
    .transcription-status-top,
    .transcription-row,
    .transcription-row-status {
        align-items: stretch;
        flex-direction: column;
    }

    .transcript-summary-grid,
    .download-grid {
        grid-template-columns: 1fr;
    }
}


/* Stage 9: jobs */

.jobs-filter {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid #e0e4e9;
    border-radius: 14px;
    background: #ffffff;
}

.jobs-filter .form-field {
    min-width: 220px;
    margin: 0;
}

.jobs-table {
    display: grid;
}

.job-table-row {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        minmax(150px, 260px)
        150px
        150px;
    align-items: center;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid #edf0f3;
    color: #202124;
    text-decoration: none;
}

.job-table-row:last-child {
    border-bottom: 0;
}

.job-table-row:hover {
    background: #fafbfc;
}

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

.job-table-main span {
    margin-top: 5px;
    color: #737b87;
    font-size: 13px;
}

.job-table-progress > span {
    display: block;
    margin-bottom: 7px;
    color: #737b87;
    font-size: 12px;
}

.job-table-date {
    color: #7b838f;
    font-size: 13px;
    text-align: right;
}

.job-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 22px;
}

.job-json,
.job-error-text {
    max-height: 500px;
    overflow: auto;
    margin: 18px 0 0;
    padding: 18px;
    border-radius: 10px;
    background: #f7f8fa;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.job-error-panel {
    margin-bottom: 22px;
    border-color: #f0d1d1;
}

.job-error-text {
    color: #982d2d;
    background: #fff5f5;
}

.job-events-panel {
    margin-bottom: 22px;
}

.job-event-list {
    position: relative;
    margin-top: 22px;
}

.job-event-row {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 22px;
}

.job-event-row:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 6px;
    width: 2px;
    background: #e1e5eb;
}

.job-event-dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #536de6;
    box-shadow: 0 0 0 1px #cfd5df;
}

.job-event-content > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.job-event-content > div span {
    color: #536de6;
    font-size: 13px;
    font-weight: 700;
}

.job-event-content p {
    margin: 6px 0;
    color: #646d79;
}

.job-event-content small {
    color: #8a919c;
}

.retry-panel {
    border-color: #d4e0f5;
}

@media (max-width: 1050px) {
    .job-table-row {
        grid-template-columns:
            minmax(220px, 1fr)
            minmax(130px, 220px)
            140px;
    }

    .job-table-date {
        display: none;
    }
}

@media (max-width: 780px) {
    .jobs-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .jobs-filter .form-field {
        min-width: 0;
    }

    .job-table-row {
        grid-template-columns: 1fr;
    }

    .job-table-date {
        display: block;
        text-align: left;
    }

    .job-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* Stage 10: settings */

.settings-status-grid {
    display: grid;
    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );
    gap: 16px;
    margin-bottom: 22px;
}

.settings-status-grid .stat-card strong {
    font-size: 20px;
}

.settings-form {
    display: grid;
    gap: 20px;
}

.settings-section {
    max-width: none;
}

.settings-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.settings-section-header h2 {
    margin: 0;
    font-size: 21px;
}

.settings-section-header p {
    max-width: 720px;
    margin: 7px 0 0;
    color: #737b87;
    line-height: 1.55;
}

.settings-badge {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eff1f4;
    color: #68717e;
    font-size: 12px;
    font-weight: 800;
}

.settings-badge.ready {
    background: #eaf7ee;
    color: #287646;
}

.settings-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    color: #9e3030;
    cursor: pointer;
}

.settings-checkbox input {
    width: 17px;
    height: 17px;
}

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

.settings-readonly-grid div {
    padding: 17px;
    border-radius: 11px;
    background: #f5f6f8;
}

.settings-readonly-grid span,
.settings-readonly-grid strong {
    display: block;
}

.settings-readonly-grid span {
    color: #747c88;
    font-size: 13px;
}

.settings-readonly-grid strong {
    margin-top: 7px;
    font-size: 18px;
}

.settings-save-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px;
    border: 1px solid #d8dfea;
    border-radius: 15px;
    background: #ffffff;
}

.settings-save-panel strong,
.settings-save-panel p {
    display: block;
}

.settings-save-panel p {
    max-width: 760px;
    margin: 7px 0 0;
    color: #707986;
    line-height: 1.5;
}

.gateway-test-panel {
    margin-top: 20px;
}

.gateway-test-panel form {
    margin-top: 20px;
}

@media (max-width: 1050px) {
    .settings-status-grid,
    .settings-readonly-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }
}

@media (max-width: 700px) {
    .settings-status-grid,
    .settings-readonly-grid {
        grid-template-columns: 1fr;
    }

    .settings-section-header,
    .settings-save-panel {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Stage 11.4.4: real article pipeline */
.page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.article-readiness-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.article-generation-form textarea {
    min-height: 110px;
    resize: vertical;
}

.article-generation-form #brief {
    min-height: 280px;
}

.readiness-ok,
.readiness-error {
    margin: 0 0 14px;
    line-height: 1.55;
}

.readiness-ok {
    color: var(--success, #237a52);
}

.readiness-error {
    color: var(--danger, #b42318);
}

.pipeline-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(34, 92, 79, 0.08);
}

.pipeline-preview span {
    color: var(--muted-text, #667085);
    line-height: 1.5;
}

.orchestration-summary,
.final-article-panel,
.orchestration-steps-panel {
    margin-top: 24px;
}

.orchestration-details-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

.context-hash {
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
}

.orchestration-brief {
    margin-top: 18px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 16px;
}

.orchestration-brief summary,
.orchestration-step summary {
    cursor: pointer;
}

.article-output {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.72;
    font-family: inherit;
}

.article-output-final {
    font-size: 1.04rem;
}

.review-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.review-score span {
    color: var(--muted-text, #667085);
    font-size: 0.8rem;
}

.review-score strong {
    font-size: 1.7rem;
}

.final-review-summary {
    display: grid;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.final-review-summary ul {
    margin: 8px 0 0 20px;
}

.orchestration-step-list {
    display: grid;
    gap: 10px;
}

.orchestration-step {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    background: var(--panel-background, #fff);
    overflow: hidden;
}

.orchestration-step summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    list-style: none;
}

.orchestration-step summary::-webkit-details-marker {
    display: none;
}

.orchestration-step summary > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.orchestration-step summary small {
    color: var(--muted-text, #667085);
}

.orchestration-step-body {
    display: grid;
    gap: 16px;
    padding: 0 18px 18px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 18px;
}

@media (max-width: 760px) {
    .article-readiness-grid,
    .orchestration-details-list {
        grid-template-columns: 1fr;
    }

    .page-header-actions {
        justify-content: flex-start;
    }

    .orchestration-step summary {
        align-items: flex-start;
    }
}

@media (max-width: 760px) {
    .instruction-import-form {
        align-items: stretch;
        flex-direction: column;
    }

    .instruction-import-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}


/* Stage 12.2 content plan generation */

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

.content-plan-mode {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--border-color, #d8dde8);
    border-radius: 14px;
    cursor: pointer;
}

.content-plan-mode input {
    margin-top: 4px;
}

.content-plan-mode span {
    display: grid;
    gap: 5px;
}

.content-plan-mode small {
    color: var(--muted-color, #687386);
}

.content-plan-note {
    margin-top: 20px;
    margin-bottom: 24px;
}

.content-plan-note summary,
.content-plan-prompt summary {
    cursor: pointer;
    font-weight: 700;
}

.content-plan-prompt {
    margin-top: 16px;
    max-width: 1000px;
}

.content-plan-prompt-body {
    margin-top: 12px;
    padding: 16px;
    white-space: pre-wrap;
    line-height: 1.55;
    background: #ffffff;
    border: 1px solid #dfe3eb;
    border-radius: 12px;
    color: #4f5d73;
}

.content-plan-items-section {
    margin-top: 24px;
}

.content-plan-manual-form {
    margin-top: 24px;
}

@media (max-width: 760px) {
    .content-plan-mode-grid {
        grid-template-columns: 1fr;
    }
}

/* Transcriber page */
.transcriber-url-card + .transcriber-history-panel {
    margin-top: 28px;
}


/* JOB_PUBLICATION_STATUS_V1 */
.publication-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 22px;
    padding: 20px 22px;
    border: 1px solid #b8dfca;
    border-radius: 16px;
    background: #f1fbf5;
}

.publication-status-main {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.publication-status-icon {
    display: flex;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #238653;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
}

.publication-status-eyebrow {
    margin: 0 0 3px;
    color: #397158;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.publication-status-title {
    margin: 0;
    color: #174b32;
    font-size: 1.08rem;
}

.publication-status-meta {
    margin: 5px 0 0;
    color: #547162;
    font-size: 0.88rem;
}

.publication-status-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
}

.publication-manual-hint {
    margin-top: 10px;
}

@media (max-width: 760px) {
    .publication-status-card {
        align-items: stretch;
        flex-direction: column;
    }

    .publication-status-actions {
        width: 100%;
    }

    .publication-status-actions a {
        text-align: center;
    }
}

/* PUBLICATION_STATUS_UI_V2 */
.publication-status-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin: 22px 0 24px !important;
    padding: 20px 22px !important;
    border: 1px solid #a9ddbf !important;
    border-radius: 16px !important;
    background: #effaf3 !important;
    box-shadow: none !important;
}

.publication-status-main {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    min-width: 0 !important;
}

.publication-status-icon {
    display: flex !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #238653 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.publication-status-eyebrow {
    margin: 0 0 4px !important;
    color: #397158 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.publication-status-title {
    margin: 0 !important;
    color: #174b32 !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

.publication-status-meta {
    margin: 6px 0 0 !important;
    color: #547162 !important;
    font-size: 14px !important;
}

.publication-status-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.publication-status-actions .button-primary,
.publication-status-actions .button-secondary {
    display: inline-flex !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.publication-status-actions .button-primary {
    border: 1px solid #5068ea !important;
    background: #5068ea !important;
    color: #ffffff !important;
}

.publication-status-actions .button-primary:hover {
    border-color: #4058d8 !important;
    background: #4058d8 !important;
    color: #ffffff !important;
}

.publication-status-actions .button-secondary {
    border: 1px solid #9bb6a7 !important;
    background: #ffffff !important;
    color: #24583d !important;
}

.publication-status-actions .button-secondary:hover {
    border-color: #6e9b82 !important;
    background: #e3f3e9 !important;
    color: #174b32 !important;
}

@media (max-width: 760px) {
    .publication-status-card {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .publication-status-actions {
        width: 100% !important;
    }

    .publication-status-actions .button-primary,
    .publication-status-actions .button-secondary {
        flex: 1 1 180px !important;
    }
}

/* PUBLICATION_STATUS_BUTTONS_ALIGN_V1 */
.publication-status-actions {
    display: flex !important;
    flex: 0 0 280px !important;
    width: 280px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.publication-status-actions .button-primary,
.publication-status-actions .button-secondary {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

@media (max-width: 760px) {
    .publication-status-actions {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
}

/* JOBS_MATERIAL_STATUS_V1 */
.job-table-row {
    grid-template-columns:
        minmax(300px, 1fr)
        minmax(160px, 260px)
        205px
        145px;
}

.job-table-status {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}

.job-state {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    line-height: 1.25;
}

.job-state-note {
    color: #7a828d;
    font-size: 11px;
    line-height: 1.3;
}

.job-state-published_automatic,
.job-state-published_manual {
    background: #e4f5ea;
    color: #197342;
}

.job-state-published_automatic::before,
.job-state-published_manual::before {
    content: "✓";
    font-weight: 900;
}

.job-state-scheduled {
    background: #e9edff;
    color: #4058cb;
}

.job-state-scheduled::before {
    content: "◷";
    font-size: 14px;
}

.job-state-cover_generating {
    background: #f0eaff;
    color: #6a42bc;
}

.job-state-cover_generating::before {
    content: "◌";
    font-size: 15px;
}

.job-state-waiting_cover,
.job-state-waiting_publication {
    background: #fff5d9;
    color: #8a5a00;
}

.job-state-ready_to_publish {
    background: #e5f7f3;
    color: #16715e;
}

.job-state-cover_error,
.job-state-publication_error {
    background: #ffeded;
    color: #ad2929;
}

.job-state-cover_error::before,
.job-state-publication_error::before {
    content: "!";
    font-weight: 900;
}

.job-table-date {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
}

.job-table-date small {
    color: #9aA1ab;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.job-table-progress-published_automatic
.mini-progress > div,
.job-table-progress-published_manual
.mini-progress > div {
    background: #27935a;
}

.job-table-progress-scheduled
.mini-progress > div {
    background: #6577df;
}

.job-table-progress-cover_generating
.mini-progress > div {
    background: #8762d5;
}

.job-table-progress-cover_error
.mini-progress > div,
.job-table-progress-publication_error
.mini-progress > div {
    background: #d64a4a;
}

@media (max-width: 1050px) {
    .job-table-row {
        grid-template-columns:
            minmax(250px, 1fr)
            minmax(150px, 220px)
            205px;
    }

    .job-table-date {
        display: none;
    }
}

@media (max-width: 780px) {
    .job-table-row {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .job-table-date {
        display: flex;
        align-items: flex-start;
    }
}