/* =========================================================
   ZAIN — BASE GERAL
   ========================================================= */

.zain-body {
    margin: 0;
    background: #f4f1eb;
    color: #102030;
    font-family: Georgia, "Times New Roman", serif;
}

.zain-wallet-summary,
.zain-me-order-state,
.zain-generated-shipment {
    align-items: center;
    background: #f5f8fb;
    border: 1px solid #cfdae5;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 18px 0;
    padding: 16px;
}

.zain-wallet-summary > div,
.zain-me-order-state > div:first-child,
.zain-generated-shipment > div:first-child {
    display: grid;
    gap: 4px;
}

.zain-wallet-summary strong {
    color: #06476a;
    font-size: 22px;
}

.zain-wallet-summary .zain-btn,
.zain-generated-shipment .zain-btn,
.zain-me-order-state .zain-btn {
    flex: 0 0 auto;
}

.zain-generated-shipment h3,
.zain-me-order-state h3 {
    margin: 5px 0 0;
}

.zain-generated-shipment p,
.zain-me-order-state p {
    margin: 0;
}

.zain-generated-shipment-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.zain-btn.zain-btn-danger {
    background: #b4232d;
    border-color: #b4232d;
    color: #fff;
}

.zain-btn.zain-btn-danger:hover {
    background: #8f1821;
}

@media (max-width: 760px) {
    .zain-wallet-summary,
    .zain-me-order-state,
    .zain-generated-shipment {
        align-items: stretch;
        flex-direction: column;
    }

    .zain-wallet-summary .zain-btn,
    .zain-generated-shipment-actions,
    .zain-generated-shipment-actions .zain-btn,
    .zain-generated-shipment-actions form,
    .zain-generated-shipment-actions form .zain-btn,
    .zain-me-order-state .zain-actions,
    .zain-me-order-state .zain-actions form,
    .zain-me-order-state .zain-actions .zain-btn {
        width: 100%;
    }
}

.zain-page {
    padding: 40px;
    background: #f4f1eb;
    min-height: calc(100vh - 80px);
}

/* =========================================================
   TOPO / MENU
   ========================================================= */

.zain-topbar {
    background: #ffffff;
    border-bottom: 1px solid #ddd6c8;
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zain-topbar-brand strong {
    color: #053C5E;
    font-size: 22px;
    letter-spacing: 4px;
    margin-right: 10px;
}

.zain-topbar-brand {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 2px;
}

.zain-topbar-brand span {
    color: #6b7280;
    font-size: 14px;
}

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

.zain-topbar-nav a {
    color: #053C5E;
    text-decoration: none;
    font-weight: bold;
}

.zain-topbar-icon-link {
    align-items: center;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.zain-topbar-icon-link svg {
    display: block;
}

.zain-topbar-nav form {
    margin: 0;
}

.zain-topbar-nav button {
    background: #053C5E;
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
}

/* =========================================================
   CABEÇALHO DAS PÁGINAS
   ========================================================= */

.zain-header {
    background: #053C5E;
    color: #fff;
    padding: 32px;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    overflow: hidden;
}

.zain-header h1 {
    font-family: Georgia, serif;
    letter-spacing: 8px;
    font-size: 48px;
    line-height: 1.05;
    margin: 0 0 6px;
}

.zain-header p {
    margin: 0;
    opacity: .85;
}

.zain-motto {
    font-family: Georgia, serif;
    font-style: italic;
    color: #d8c28b;
    text-align: right;
}

/* =========================================================
   CARDS / GRID
   ========================================================= */

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

.zain-full-card {
    grid-column: 1 / -1;
}

.zain-card {
    background: #fff;
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    border-top: 5px solid #053C5E;
    margin-bottom: 28px;
}

.zain-dashboard-hero .zain-motto {
    max-width: 760px;
}

.zain-dashboard-symbol {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 130px;
    justify-content: center;
    min-height: 100px;
}

.zain-inline-svg {
    display: inline-block;
    line-height: 0;
}

.zain-inline-svg svg {
    display: block;
    height: 100%;
    width: 100%;
}

.zain-dashboard-symbol .zain-inline-svg {
    display: block;
    height: 120px;
    width: 120px;
}

.zain-card-disabled {
    background: #eef0f3;
    border-color: #d7dce2;
    color: #667085;
    cursor: not-allowed;
    opacity: 0.82;
}

.zain-card.zain-card-disabled h2,
.zain-card.zain-card-disabled p,
.zain-card-disabled h2,
.zain-card-disabled p {
    color: #667085;
}

.zain-profile-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.zain-profile-page .zain-profile-card {
    align-content: start;
    display: grid;
    gap: 18px;
}

.zain-profile-page .zain-profile-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 8px;
    max-width: 560px;
    width: 100%;
}

.zain-profile-page .zain-profile-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 100%;
}

.zain-profile-page .zain-profile-field label {
    color: #053C5E;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.zain-profile-page .zain-profile-field input {
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    min-height: 42px;
    padding: 9px 12px;
    width: 100% !important;
}

.zain-profile-page .zain-profile-form .zain-btn {
    align-self: flex-start;
    min-width: 210px;
}

.zain-form-grid,
.zain-user-form,
.zain-user-card,
.zain-user-list {
    display: grid;
    gap: 12px;
}

.zain-form-grid label,
.zain-check-line {
    color: #053C5E;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.zain-form-grid input,
.zain-user-form input,
.zain-user-fields input {
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-family: Arial, sans-serif;
    min-height: 42px;
    padding: 9px 12px;
}

.zain-user-form,
.zain-user-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
}

.zain-user-card-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.zain-user-card-head strong,
.zain-user-card-head small {
    display: block;
}

.zain-user-card-head small {
    color: #64748b;
    font-family: Arial, sans-serif;
    margin-top: 3px;
}

.zain-user-fields {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.zain-module-checks {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.zain-module-checks label,
.zain-admin-check {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    display: flex;
    gap: 8px;
    padding: 9px 10px;
}

.zain-card h2 {
    margin: 0 0 10px;
    color: #053C5E;
}

.zain-card p {
    color: #4b5563;
    line-height: 1.5;
}

.zain-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.zain-card-header h2 {
    margin-bottom: 4px;
}

.zain-card-header p {
    margin-top: 0;
}

.zain-muted {
    color: #6b7280;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-top: 0;
}

/* =========================================================
   BOTÕES / ALERTAS / STATUS
   ========================================================= */

.zain-btn {
    display: inline-block;
    background: #053C5E;
    color: #fff !important;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    border: 0;
    cursor: pointer;
}

.zain-btn-light {
    background: #e5e7eb;
    color: #374151 !important;
}

.zain-btn-light.is-selected {
    background: #053C5E;
    color: #fff !important;
}

.zain-alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 22px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.zain-alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 22px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.zain-warning-text {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    color: #92400e;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin: 0 0 22px;
    padding: 12px 14px;
}

.zain-warning-text a {
    color: #053C5E;
    font-weight: bold;
}

.zain-status {
    display: inline-block;
    margin-top: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
}

.zain-status.pending {
    background: #fff3cd;
    color: #856404;
}

.zain-status.ok {
    background: #d4edda;
    color: #155724;
}

.zain-status-pill {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.zain-origin-tag {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #9a3412;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin-left: 8px;
    padding: 4px 8px;
    white-space: nowrap;
}

.status-nao-listado,
.status-rascunho {
    background: #e5e7eb;
    color: #374151;
}

.status-exportado {
    background: #dbeafe;
    color: #053C5E;
}

.status-enviado {
    background: #ccfbf1;
    color: #0f766e;
}

/* =========================================================
   FORMULÁRIO DE BUSCA
   ========================================================= */

.zain-search-form {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 18px 0 22px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.zain-search-input {
    flex: 1;
    min-width: 240px;
    padding: 11px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.zain-search-input:focus {
    outline: 2px solid rgba(5, 60, 94, .25);
    border-color: #053C5E;
}

.zain-search-select {
    min-width: 190px;
    padding: 11px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.zain-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.zain-table-link {
    color: #053C5E;
    font-weight: bold;
    text-decoration: none;
}

.zain-table-link:hover {
    text-decoration: underline;
}

.zain-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}

.zain-summary-item {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    font-family: Arial, sans-serif;
}

.zain-summary-item span {
    display: block;
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 4px;
}

.zain-summary-item strong {
    color: #053C5E;
    display: block;
    font-size: 26px;
}

/* =========================================================
   PAGINAÇÃO
   ========================================================= */

.zain-pagination {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-family: Arial, sans-serif;
}

.zain-pagination a,
.zain-pagination .disabled {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.zain-pagination a {
    background: #053C5E;
    color: #fff;
}

.zain-pagination .disabled {
    color: #9ca3af;
    background: #e5e7eb;
}

.zain-page-numbers {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
}

.zain-page-numbers a,
.zain-page-numbers span.active {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
}

.zain-page-numbers a {
    background: #e5e7eb;
    color: #053C5E;
}

.zain-page-numbers span.active {
    background: #053C5E;
    color: #fff;
}

.zain-page-ellipsis {
    padding: 0 4px;
    color: #6b7280;
}

.zain-pagination-bottom {
    margin-top: 24px;
}

/* =========================================================
   TABELAS
   ========================================================= */

.zain-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.zain-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.zain-table th {
    background: #053C5E;
    color: #fff;
    text-align: left;
    padding: 12px;
    white-space: nowrap;
}

.zain-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 11px 12px;
    vertical-align: top;
}

.zain-table tr:nth-child(even) td {
    background: #f8fafc;
}

.zain-table tr:hover td {
    background: #eef4f8;
}

.zain-inner-table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

.zain-inner-table th {
    background: #e5e7eb;
    color: #102030;
    text-align: left;
    padding: 9px 10px;
}

.zain-inner-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 9px 10px;
}

/* =========================================================
   LINHAS EXPANSÍVEIS
   ========================================================= */

.zain-row-toggle {
    background: #053C5E;
    color: #fff;
    border: 0;
    border-radius: 7px;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    cursor: pointer;
    font-weight: bold;
}

.zain-mini-text {
    display: block;
    margin-top: 5px;
    color: #6b7280;
    font-size: 12px;
    font-family: Arial, sans-serif;
}

.zain-child-row td {
    background: #f8fafc !important;
}

.zain-child-box {
    padding: 18px;
    border: 1px solid #dbe3ea;
    border-radius: 14px;
    background: #fff;
}

/* =========================================================
   LEGENDA / BOLINHAS
   ========================================================= */

.zain-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 18px 0 24px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.zain-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
}

.dot-gray {
    background: #9ca3af;
}

.dot-navy {
    background: #053C5E;
}

.dot-teal {
    background: #0f766e;
}

/* =========================================================
   STATUS DE PAGAMENTO
   ========================================================= */

.zain-pay-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}

.zain-pay-square {
    width: 13px;
    height: 13px;
    display: inline-block;
    border-radius: 3px;
    flex: 0 0 auto;
}

.zain-pay-paid .zain-pay-square,
.zain-square-paid {
    background: #16a34a;
}

.zain-pay-overdue .zain-pay-square,
.zain-square-overdue {
    background: #dc2626;
}

.zain-pay-unknown .zain-pay-square {
    background: #9ca3af;
}

.zain-pay-paid {
    color: #166534;
}

.zain-pay-overdue {
    color: #991b1b;
}

.zain-pay-unknown {
    color: #4b5563;
}

/* =========================================================
   AÇÕES / ÍCONES
   ========================================================= */

.zain-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.zain-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #053C5E;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
}

.zain-icon-btn:hover {
    background: #eef4f8;
    border-color: #9db4c4;
}

.zain-icon-btn:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.zain-icon-btn-ok {
    color: #0f766e;
}

.zain-xlsx-btn {
    width: auto;
    min-width: 42px;
    padding: 0 8px;
}

.zain-actions form {
    margin: 0;
}

/* =========================================================
   LOADING
   ========================================================= */

.zain-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: zain-spin .8s linear infinite;
    margin-left: 8px;
    vertical-align: -2px;
}

.zain-loading-button.is-loading .zain-spinner {
    display: inline-block;
}

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

/* =========================================================
   RESPONSIVO — TABLET
   ========================================================= */

@media (max-width: 900px) {
    .zain-page {
        padding: 22px;
    }

    .zain-header {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }

    .zain-motto {
        text-align: left;
    }

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

/* =========================================================
   RESPONSIVO — CELULAR
   ========================================================= */

@media (max-width: 700px) {
    .zain-page {
        padding: 18px 14px;
    }

    .zain-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 20px;
    }

    .zain-topbar-brand strong {
        font-size: 30px;
        letter-spacing: 5px;
    }

    .zain-topbar-brand span {
        font-size: 14px;
        line-height: 1.3;
        margin-left: 0;
        width: 100%;
    }

    .zain-topbar-nav {
        flex-wrap: wrap;
        gap: 16px;
    }

    .zain-topbar-nav a {
        font-size: 22px;
    }

    .zain-topbar-nav button {
        font-size: 18px;
        padding: 10px 18px;
        border-radius: 12px;
    }

    .zain-header {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .zain-header h1 {
        font-size: clamp(38px, 13vw, 56px);
        letter-spacing: 6px;
        max-width: 100%;
    }

    .zain-header p {
        font-size: 18px;
        line-height: 1.35;
    }

    .zain-motto {
        font-size: 18px;
        line-height: 1.3;
    }

    .zain-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .zain-card h2 {
        font-size: 32px;
        line-height: 1.15;
    }

    .zain-card-header {
        display: block;
    }

    .zain-card-header > div + div {
        margin-top: 18px;
    }

    .zain-muted,
    .zain-card p {
        font-size: 18px;
        line-height: 1.45;
    }

    .zain-search-form {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
    }

    .zain-search-input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 16px;
    }

    .zain-search-select {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 16px;
    }

    .zain-header-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .zain-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zain-btn {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .zain-status.ok {
        font-size: 15px;
        margin-top: 8px;
    }

    .zain-pagination {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }

    .zain-pagination > a,
    .zain-pagination > span.disabled {
        width: 100%;
        box-sizing: border-box;
    }

    .zain-page-numbers {
        order: 2;
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .zain-page-numbers a,
    .zain-page-numbers span.active {
        min-width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .zain-table,
    .zain-inner-table {
        min-width: 850px;
        font-size: 13px;
    }

    .zain-legend {
        display: block;
    }

    .zain-legend span {
        display: flex;
        margin-bottom: 8px;
    }

    .zain-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   ZAIN — LOGIN INSTITUCIONAL
   Base visual inspirada no login personalizado IPCO
   ========================================================= */

.zain-login-page {
    min-height: 100vh;
    padding: 40px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top left, rgba(201, 162, 74, 0.18), transparent 32%),
        linear-gradient(135deg, #053C5E 0%, #032b44 48%, #021827 100%);
}

.zain-login-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    border-top: 6px solid #c9a24a;
}

.zain-login-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.zain-login-symbol {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #053C5E;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 34px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(5, 60, 94, 0.25);
    overflow: hidden;
}

.zain-login-symbol .zain-inline-svg {
    display: block;
    height: 72px;
    width: 72px;
}

.zain-login-brand h1 {
    margin: 0;
    color: #053C5E;
    font-family: Georgia, serif;
    font-size: 38px;
    letter-spacing: 6px;
    line-height: 1;
}

.zain-login-brand p {
    margin: 6px 0 0;
    color: #687787;
    font-size: 13px;
}

.zain-login-intro {
    margin-bottom: 26px;
}

.zain-login-intro h2 {
    margin: 0 0 8px;
    color: #1f2933;
    font-size: 22px;
    font-weight: 700;
}

.zain-login-intro p {
    margin: 0;
    color: #687787;
    font-size: 14px;
    line-height: 1.5;
}

.zain-login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.zain-field label {
    display: block;
    margin-bottom: 7px;
    color: #053C5E;
    font-size: 14px;
    font-weight: 700;
}

.zain-input {
    width: 100%;
    border: 1px solid #d8dee6 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    color: #1f2933;
    font-size: 15px;
    background: #ffffff;
    box-shadow: none !important;
}

.zain-input:focus {
    border-color: #053C5E !important;
    box-shadow: 0 0 0 3px rgba(5, 60, 94, 0.14) !important;
    outline: none !important;
}

.zain-error {
    margin-top: 7px;
    color: #b42318;
    font-size: 13px;
}

.zain-login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.zain-login-options label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #51606f;
}

.zain-login-options input[type="checkbox"] {
    border-radius: 5px;
    border-color: #c8d0da;
    color: #053C5E;
}

.zain-login-options a {
    color: #053C5E;
    text-decoration: none;
    font-weight: 600;
}

.zain-login-options a:hover {
    text-decoration: underline;
}

.zain-login-button {
    width: 100%;
    margin-top: 4px;
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    background: #053C5E;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(5, 60, 94, 0.28);
    transition: all 0.2s ease;
}

.zain-login-button:hover {
    background: #032b44;
    transform: translateY(-1px);
}

.zain-login-button:active {
    transform: translateY(0);
}

/* Mensagens do Laravel/Breeze */
.zain-login-card .mb-4 {
    margin-bottom: 18px;
}

/* Mobile */
@media (max-width: 520px) {
    .zain-login-page {
        padding: 24px 14px;
        align-items: flex-start;
    }

    .zain-login-card {
        margin-top: 24px;
        padding: 26px 22px;
        border-radius: 18px;
    }

    .zain-login-brand {
        align-items: flex-start;
    }

    .zain-login-symbol {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }

    .zain-login-symbol .zain-inline-svg {
        height: 62px;
        width: 62px;
    }

    .zain-login-brand h1 {
        font-size: 32px;
        letter-spacing: 5px;
    }

    .zain-login-options {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   ZAIN — LOGIN INSTITUCIONAL
   logo wrap
   ========================================================= */

.zain-logo-text {
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 8px;
    color: #053C5E;
}

/* =========================================================
   ZAIN — MÓDULO DE E-MAIL
   ========================================================= */

.zain-mail-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
}

.zain-mail-shell,
.zain-mail-shell * {
    box-sizing: border-box;
}

.zain-mail-sidebar,
.zain-mail-list,
.zain-mail-reader {
    background: #fff;
    border-top: 5px solid #053C5E;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.zain-mail-sidebar {
    padding: 18px;
}

.zain-mail-new {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
}

.zain-mail-folders {
    display: grid;
    gap: 7px;
    margin-bottom: 20px;
}

.zain-mail-folders a {
    border-radius: 10px;
    color: #053C5E;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 10px 12px;
    text-decoration: none;
}

.zain-mail-folders a.is-active,
.zain-mail-folders a:hover {
    background: #eef4f8;
}

.zain-mail-panel {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-top: 16px;
}

.zain-mail-panel h2 {
    color: #053C5E;
    font-size: 20px;
    margin: 0 0 12px;
}

.zain-mail-mini-form {
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
}

.zain-mail-mini-form input,
.zain-mail-mini-form textarea,
.zain-mail-mini-form select,
.zain-reply-form textarea {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 12px;
    width: 100%;
}

.zain-template-list,
.zain-rule-list {
    display: grid;
    gap: 8px;
}

.zain-template-item,
.zain-rule-item {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 9px;
}

.zain-template-use,
.zain-signature-use {
    background: transparent;
    border: 0;
    color: #053C5E;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: left;
}

.zain-template-item form,
.zain-rule-actions form {
    margin: 0;
}

.zain-template-item form button,
.zain-rule-actions button {
    background: #e5e7eb;
    border: 0;
    border-radius: 8px;
    color: #374151;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 8px;
}

.zain-rule-item {
    align-items: flex-start;
    display: grid;
}

.zain-rule-item.is-off {
    opacity: .6;
}

.zain-rule-item strong,
.zain-rule-item span,
.zain-rule-item small {
    display: block;
    font-family: Arial, sans-serif;
}

.zain-rule-item strong {
    color: #053C5E;
    font-size: 12px;
    text-transform: uppercase;
}

.zain-rule-item small {
    color: #6b7280;
    margin-top: 3px;
}

.zain-rule-actions {
    display: flex;
    gap: 6px;
}

.zain-mail-main {
    display: grid;
    grid-template-columns: minmax(290px, 38%) minmax(0, 1fr);
    gap: 22px;
    min-width: 0;
}

.zain-mail-list,
.zain-mail-reader {
    min-width: 0;
    padding: 18px;
    overflow: hidden;
}

.zain-mail-list-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.zain-mail-list-header h2,
.zain-mail-reader-head h2 {
    color: #053C5E;
    margin: 0;
}

.zain-mail-row {
    border-bottom: 1px solid #e5e7eb;
    color: #102030;
    display: grid;
    font-family: Arial, sans-serif;
    gap: 4px;
    padding: 12px 10px;
    text-decoration: none;
}

.zain-mail-row:hover,
.zain-mail-row.is-selected {
    background: #eef4f8;
}

.zain-mail-row.is-unread strong,
.zain-mail-row.is-unread span {
    font-weight: 800;
}

.zain-mail-row span,
.zain-mail-row small {
    color: #4b5563;
}

.zain-mail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.zain-mail-badges em {
    background: #e5e7eb;
    border-radius: 999px;
    color: #374151;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    padding: 4px 8px;
}

.zain-mail-reader-head {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
    padding-bottom: 14px;
}

.zain-mail-read-form {
    margin: -6px 0 16px;
}

.zain-mail-read-form .zain-btn {
    width: auto;
}

.zain-mail-reader-head p,
.zain-mail-reader-head span {
    color: #4b5563;
    font-family: Arial, sans-serif;
}

.zain-mail-body {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    font-family: Arial, sans-serif;
    line-height: 1.55;
    margin-bottom: 18px;
    max-height: 420px;
    overflow: auto;
    padding: 16px;
    white-space: normal;
}

.zain-reply-form {
    display: grid;
    gap: 12px;
}

.zain-compose-form {
    border-bottom: 1px solid #e5e7eb;
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
}

.zain-compose-form h2 {
    color: #053C5E;
    margin: 0;
}

.zain-compose-form input,
.zain-forward-panel input {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 12px;
    width: 100%;
}

.zain-mail-message-actions,
.zain-mail-action-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.zain-mail-message-actions form {
    margin: 0;
}

.zain-forward-panel {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.zain-reply-form label {
    color: #053C5E;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.zain-treatment-buttons .is-active {
    background: #053C5E;
    color: #fff !important;
}

.zain-response-variables {
    align-items: center;
    display: flex;
    flex: 1 1 240px;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.zain-response-variables input {
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    min-height: 40px;
    min-width: 0;
    padding: 8px 10px;
    width: min(230px, 100%);
}

.zain-response-builder {
    margin-top: 22px;
}

.zain-response-builder-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.zain-response-builder-head h2 {
    color: #053C5E;
    font-size: 24px;
    margin: 0;
}

.zain-response-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 10px;
    max-width: 820px;
}

.zain-response-builder.has-no-response-fields .zain-response-toolbar {
    display: none;
}

.zain-response-toolbar .zain-btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 10px 14px;
    width: auto;
}

.zain-response-toolbar .zain-icon-btn {
    flex: 0 0 auto;
}

.zain-response-blocks {
    display: grid;
    gap: 6px;
    max-width: 720px;
}

.zain-response-block-row,
.zain-response-add-block {
    align-items: center;
    background: #e5e7eb;
    border: 0;
    border-radius: 7px;
    color: #111827;
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 15px;
    justify-content: space-between;
    min-height: 36px;
    padding: 7px 10px;
}

.zain-response-add-block {
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.zain-response-add-block strong {
    color: #111827;
    font-size: 22px;
    line-height: 1;
}

.zain-response-block-title {
    background: transparent;
    border: 0;
    color: #111827;
    cursor: pointer;
    flex: 1;
    font: inherit;
    text-align: left;
}

.zain-response-block-actions {
    align-items: center;
    display: flex;
    gap: 5px;
}

.zain-response-block-actions button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    font-size: 15px;
    font-weight: bold;
    justify-content: center;
    line-height: 1;
    padding: 3px 4px;
}

.zain-response-block-actions button[title="Excluir"],
.zain-response-block-actions button:last-child {
    color: #dc2626;
}

.zain-block-picker {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    display: grid;
    gap: 12px;
    margin-top: 14px;
    max-width: 760px;
    padding: 14px;
}

.zain-block-picker[hidden] {
    display: none;
}

.zain-block-picker-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.zain-block-picker-head-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.zain-block-picker-head strong {
    color: #053C5E;
    font-family: Arial, sans-serif;
}

.zain-block-picker-head button {
    background: #e5e7eb;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    padding: 6px 10px;
}

.zain-block-picker-grid {
    display: grid;
    gap: 8px;
}

.zain-block-picker-grid details {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 9px 10px;
}

.zain-block-picker-grid summary {
    color: #053C5E;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.zain-block-picker-grid details > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.zain-block-picker-grid button {
    background: #eef4f8;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #053C5E;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 7px 10px;
}

.zain-block-picker textarea {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    padding: 10px 12px;
    resize: vertical;
}

.zain-response-config-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.zain-response-config-section {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
}

.zain-response-config-section-head {
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 10px;
}

.zain-response-config-section h3 {
    color: #053C5E;
    margin: 0;
}

.zain-response-config-actions,
.zain-response-edit-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.zain-response-config-block {
    border-top: 1px solid #e5e7eb;
    padding: 9px 0;
}

.zain-response-config-block summary {
    align-items: center;
    color: #111827;
    cursor: pointer;
    display: flex;
    font-family: Arial, sans-serif;
    font-weight: bold;
    justify-content: space-between;
    gap: 10px;
}

.zain-response-config-block summary small {
    color: #6b7280;
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin-top: 2px;
}

.zain-response-config-block pre {
    background: #f8fafc;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    line-height: 1.45;
    overflow: auto;
    padding: 10px;
    white-space: pre-wrap;
}

.zain-response-block-edit {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.zain-response-edit-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-top: 10px;
}

.zain-response-block-edit input,
.zain-response-block-edit textarea,
.zain-response-category-form input {
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-family: Arial, sans-serif;
    padding: 10px 12px;
}

.zain-response-block-edit textarea {
    line-height: 1.45;
    resize: vertical;
}

.zain-response-category-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.zain-response-icon-danger {
    align-items: center;
    background: transparent;
    border: 0;
    color: #dc2626;
    cursor: pointer;
    display: inline-flex;
    font-family: Arial, sans-serif;
    font-weight: bold;
    gap: 6px;
    padding: 3px;
}

.zain-response-delete-form {
    margin-top: 8px;
}

.zain-response-new-block summary b {
    color: #111827;
    font-size: 24px;
    line-height: 1;
}

.zain-mail-empty {
    color: #6b7280;
    font-family: Arial, sans-serif;
    padding: 24px;
    text-align: center;
}

.zain-mail-list .zain-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 10px;
}

.zain-mail-list .zain-pagination > a,
.zain-mail-list .zain-pagination > span.disabled {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 8px 10px;
    width: auto;
}

.zain-mail-list .zain-page-numbers {
    display: flex;
    flex: 0 1 100%;
    gap: 6px;
    justify-content: center;
    order: 2;
    width: 100%;
}

.zain-mail-list .zain-page-numbers a,
.zain-mail-list .zain-page-numbers span.active {
    height: 34px;
    min-width: 34px;
}

.zain-alert-warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 12px;
    color: #9a3412;
    font-family: Arial, sans-serif;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.zain-form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.zain-form-grid > * {
    min-width: 0;
}

.zain-form-grid .zain-search-input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.zain-form-grid + .zain-table-wrap {
    margin-top: 24px;
}

.zain-below-table-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.zain-form-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.zain-form-span {
    grid-column: 1 / -1;
}

.zain-check-row {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #053C5E;
    display: flex;
    font-family: Arial, sans-serif;
    font-weight: bold;
    gap: 8px;
    min-height: 46px;
    padding: 10px 12px;
}

.zain-compact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.zain-compact-list span {
    background: #eef6fb;
    border-radius: 999px;
    color: #053C5E;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 8px 12px;
}

.zain-input-unit {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.zain-input-unit span {
    color: #053C5E;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.zain-select-help {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    position: relative;
}

.zain-help-dot {
    align-items: center;
    background: #eef6fb;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #053C5E;
    cursor: help;
    display: inline-flex;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 24px;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 24px;
}

.zain-help-dot::after {
    background: #0f172a;
    border-radius: 8px;
    bottom: calc(100% + 8px);
    color: #fff;
    content: attr(aria-label);
    font-size: 12px;
    font-weight: normal;
    line-height: 1.3;
    opacity: 0;
    padding: 8px 10px;
    pointer-events: none;
    position: absolute;
    right: 0;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
    visibility: hidden;
    white-space: nowrap;
    z-index: 20;
}

.zain-help-dot:hover::after,
.zain-help-dot:focus::after,
.zain-help-dot.is-open::after {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.zain-modal-backdrop {
    align-items: center;
    background: rgba(15, 23, 42, .48);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 22px;
    position: fixed;
    z-index: 80;
}

.zain-modal-backdrop[hidden] {
    display: none;
}

.zain-modal-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .28);
    max-width: 560px;
    padding: 24px;
    width: min(100%, 560px);
}

.zain-modal-card h2 {
    color: #053C5E;
    margin: 0 0 10px;
}

.zain-modal-card p,
.zain-modal-field {
    color: #0f172a;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.zain-modal-field {
    display: grid;
    gap: 8px;
}

.zain-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

body.zain-modal-open {
    overflow: hidden;
}

.zain-lot-email-modal {
    overflow-y: auto;
}

.zain-lot-email-modal .zain-modal-card {
    margin: auto;
    max-width: 780px;
    width: min(100%, 780px);
}

.zain-modal-heading {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.zain-modal-heading p {
    margin: 0 0 18px;
}

.zain-modal-close {
    align-items: center;
    background: transparent;
    border: 0;
    color: #053c5e;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 38px;
    font: 30px/1 Arial, sans-serif;
    height: 38px;
    justify-content: center;
    padding: 0;
}

.zain-lot-email-modal form {
    display: grid;
    gap: 16px;
}

.zain-lot-email-modal input[type="email"],
.zain-lot-email-modal input[type="text"],
.zain-lot-email-modal textarea {
    border: 1px solid #c9d7e6;
    border-radius: 8px;
    box-sizing: border-box;
    font: 16px Arial, sans-serif;
    min-width: 0;
    padding: 12px 14px;
    width: 100%;
}

.zain-lot-email-modal textarea {
    line-height: 1.5;
    resize: vertical;
}

.zain-recipient-row {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.zain-recipient-row .zain-btn {
    white-space: nowrap;
}

.zain-recipient-save {
    background: #f5f8fb;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.zain-recipient-save[hidden] {
    display: none;
}

.zain-check-option {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    font: 15px Arial, sans-serif;
    gap: 8px;
}

.zain-check-option input {
    height: 18px;
    margin: 0;
    width: 18px;
}

.zain-attachment-options {
    align-items: center;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 12px 14px 14px;
}

.zain-attachment-options legend {
    color: #053c5e;
    font: 700 15px Arial, sans-serif;
    padding: 0 5px;
}

.zain-attachment-error {
    color: #b91c1c;
    font: 700 14px Arial, sans-serif;
}

.zain-log-filters {
    grid-template-columns: minmax(240px, 2fr) minmax(150px, 1fr) minmax(180px, 1fr) auto auto;
}

.zain-log-table-wrap {
    margin-top: 22px;
}

.zain-log-details summary {
    color: #053c5e;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: 700;
}

.zain-log-details pre {
    background: #f5f8fb;
    border: 1px solid #d9e2ec;
    border-radius: 6px;
    font-size: 12px;
    margin: 8px 0 0;
    max-width: 340px;
    overflow: auto;
    padding: 10px;
    white-space: pre-wrap;
}

@media (max-width: 760px) {
    .zain-modal-backdrop {
        align-items: flex-start;
        padding: 12px;
    }

    .zain-lot-email-modal .zain-modal-card {
        padding: 18px;
    }

    .zain-recipient-row,
    .zain-log-filters {
        grid-template-columns: 1fr;
    }

    .zain-recipient-row .zain-btn,
    .zain-modal-actions .zain-btn {
        width: 100%;
    }

    .zain-modal-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.zain-compact-list .zain-envelope-chip {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.zain-envelope-chip form {
    margin: 0;
}

.zain-chip-trash {
    align-items: center;
    background: transparent;
    border: 0;
    color: #b91c1c;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 2px;
}

.zain-chip-trash:hover {
    color: #7f1d1d;
}

.zain-shipping-actions {
    align-items: stretch;
    flex-direction: column;
    min-width: 260px;
}

.zain-shipping-actions .zain-btn {
    width: 100%;
}

.zain-inline-postage-form {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    width: 100%;
}

.zain-inline-postage-form .zain-search-input {
    min-height: 38px;
    padding: 8px 10px;
}

.zain-detail-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.zain-detail-list {
    display: grid;
    gap: 8px;
}

.zain-detail-list p {
    color: #0f172a;
    font-family: Arial, sans-serif;
    margin: 0;
}

.zain-detail-list strong {
    color: #053C5E;
}

.zain-treatment-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zain-treatment-buttons .zain-btn {
    width: auto;
}

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

.zain-postage-provider,
.zain-postage-option {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #053C5E;
    cursor: pointer;
    display: grid;
    gap: 6px;
    min-height: 92px;
    padding: 18px;
    text-align: left;
}

.zain-postage-provider strong,
.zain-postage-option strong {
    font-family: Georgia, serif;
    font-size: 20px;
}

.zain-postage-provider span,
.zain-postage-option span {
    color: #475569;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.zain-postage-provider:hover:not(:disabled),
.zain-postage-option:hover:not(:disabled) {
    border-color: #0b6b78;
}

.zain-postage-provider.is-selected,
.zain-postage-option.is-selected {
    background: #053C5E;
    border-color: #053C5E;
    color: #fff;
}

.zain-postage-provider.is-selected span,
.zain-postage-option.is-selected span {
    color: #fff;
}

.zain-postage-provider:disabled,
.zain-postage-option:disabled {
    background: #eef0f2;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: .8;
}

.zain-correios-assistant {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.zain-correios-assistant[hidden],
.zain-assistant-step[hidden],
.zain-label-selection-summary p[hidden],
.zain-assistant-actions[hidden],
.zain-confirm-postage[hidden] {
    display: none;
}

.zain-assistant-step {
    border-top: 1px solid #dbe3ea;
    padding-top: 18px;
}

.zain-assistant-step-heading {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.zain-assistant-step-heading > span {
    align-items: center;
    background: #053C5E;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 32px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    height: 32px;
    justify-content: center;
}

.zain-assistant-step-heading h3 {
    color: #053C5E;
    font-size: 19px;
    margin: 0 0 3px;
}

.zain-assistant-step-heading p,
.zain-assistant-actions p,
.zain-confirm-postage p {
    color: #475569;
    font-family: Arial, sans-serif;
    margin: 0;
}

.zain-postage-option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zain-postage-option-grid-small {
    grid-template-columns: repeat(2, minmax(0, 180px));
}

.zain-postage-option-grid-small .zain-postage-option {
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    justify-items: center;
    min-height: 58px;
    text-align: center;
}

.zain-label-picker-layout {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(240px, 360px) minmax(220px, 1fr);
}

.zain-label-sheet {
    aspect-ratio: 210 / 297;
    background: #f8fafc;
    border: 1px solid #94a3b8;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    display: grid;
    gap: 3px 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    padding: 12px 7px 10px;
    width: 100%;
}

.zain-label-position {
    align-items: center;
    background: #fff;
    border: 1px dashed #aab7c4;
    border-radius: 3px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 13px;
    justify-content: center;
    min-height: 0;
}

.zain-label-position:hover {
    border-color: #053C5E;
    color: #053C5E;
}

.zain-label-position.is-address {
    background: #dbeafe;
    border-color: #1d4ed8;
    color: #1e3a8a;
    font-weight: bold;
}

.zain-label-position.is-stamp {
    background: #dcfce7;
    border-color: #15803d;
    color: #14532d;
    font-weight: bold;
}

.zain-label-selection-summary {
    display: grid;
    gap: 12px;
}

.zain-label-selection-summary p {
    align-items: center;
    color: #0f172a;
    display: flex;
    font-family: Arial, sans-serif;
    gap: 8px;
    margin: 0;
}

.zain-label-key {
    border-radius: 3px;
    display: inline-block;
    height: 18px;
    width: 18px;
}

.zain-label-key-address {
    background: #dbeafe;
    border: 1px solid #1d4ed8;
}

.zain-label-key-stamp {
    background: #dcfce7;
    border: 1px solid #15803d;
}

.zain-label-selection-summary .zain-btn {
    justify-self: start;
}

.zain-assistant-actions {
    align-items: center;
    background: #eef6fb;
    border: 1px solid #cbdde8;
    border-radius: 8px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 14px;
}

.zain-melhor-envio-panel {
    border-top: 1px solid #d9e2ec;
    display: grid;
    gap: 22px;
    margin-top: 24px;
    padding-top: 24px;
}

.zain-sedex-panel {
    border-top: 1px solid #d9e2ec;
    display: grid;
    gap: 22px;
    margin-top: 24px;
    padding-top: 24px;
}

.zain-sedex-panel[hidden] {
    display: none;
}

.zain-melhor-envio-panel[hidden] {
    display: none;
}

.zain-integration-connect {
    align-items: center;
    background: #f5f8fb;
    border: 1px solid #c9d7e6;
    border-radius: 8px;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 18px;
}

.zain-integration-connect strong,
.zain-quote-results-heading h3 {
    color: #053c5e;
}

.zain-integration-connect p {
    font-family: Arial, sans-serif;
    margin: 5px 0 0;
}

.zain-quote-form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zain-quote-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.zain-quote-form label span {
    color: #053c5e;
    font: 700 14px Arial, sans-serif;
}

.zain-quote-form input {
    border: 1px solid #c9d7e6;
    border-radius: 8px;
    box-sizing: border-box;
    font: 16px Arial, sans-serif;
    min-height: 46px;
    min-width: 0;
    padding: 10px 12px;
    width: 100%;
}

.zain-quote-submit {
    min-height: 46px;
}

.zain-quote-results {
    display: grid;
    gap: 14px;
}

.zain-quote-results-heading {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.zain-quote-results-heading h3 {
    margin: 0;
}

.zain-quote-results-heading span,
.zain-quote-errors {
    color: #526274;
    font-family: Arial, sans-serif;
}

.zain-quote-errors {
    background: #fffaf0;
    border: 1px solid #f0d49a;
    border-radius: 8px;
    padding: 14px;
}

.zain-quote-errors summary {
    color: #714b00;
    cursor: pointer;
    font-weight: 700;
}

.zain-quote-errors p:last-child {
    margin-bottom: 0;
}

.zain-sedex-result,
.zain-correios-generated-actions {
    align-items: center;
    background: #f5f8fb;
    border: 1px solid #c9d7e6;
    border-radius: 8px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(220px, 1.5fr) minmax(130px, .7fr) minmax(130px, .7fr) auto;
    padding: 16px;
}

.zain-sedex-result > div,
.zain-correios-generated-actions > div {
    display: grid;
    gap: 4px;
}

.zain-sedex-result > div:first-child {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zain-sedex-result span,
.zain-sedex-result small,
.zain-correios-generated-actions span {
    color: #526274;
    font-family: Arial, sans-serif;
}

.zain-correios-generated-actions {
    background: #f0fdfa;
    border-color: #99d5cc;
    grid-template-columns: minmax(220px, 1fr) auto auto;
}

.zain-confirm-postage {
    align-items: center;
    background: #f0fdfa;
    border: 1px solid #99d5cc;
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    margin-top: 20px;
    padding: 16px;
}

.zain-confirm-postage > div:first-child {
    color: #064e3b;
    display: grid;
    font-family: Arial, sans-serif;
    gap: 5px;
}

.zain-confirm-postage .zain-treatment-buttons .is-selected {
    background: #053C5E;
    color: #fff !important;
}


@media (max-width: 1100px) {
    .zain-mail-shell,
    .zain-mail-main {
        grid-template-columns: 1fr;
    }

    .zain-mail-sidebar {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .zain-postage-provider-grid,
    .zain-postage-option-grid,
    .zain-label-picker-layout,
    .zain-confirm-postage {
        grid-template-columns: 1fr;
    }

    .zain-postage-option-grid-small {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .zain-assistant-actions .zain-btn,
    .zain-confirm-postage .zain-btn {
        width: 100%;
    }

    .zain-integration-connect,
    .zain-quote-results-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .zain-quote-form {
        grid-template-columns: 1fr;
    }

    .zain-sedex-result,
    .zain-correios-generated-actions {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .zain-sedex-result .zain-btn,
    .zain-correios-generated-actions .zain-btn {
        width: 100%;
    }

    .zain-mail-shell .zain-btn {
        width: 100%;
    }

    .zain-mail-list .zain-pagination {
        grid-template-columns: none;
    }

    .zain-mail-list .zain-pagination > a,
    .zain-mail-list .zain-pagination > span.disabled {
        font-size: 14px;
        min-width: 0;
        width: auto;
    }

    .zain-mail-list .zain-page-numbers {
        gap: 5px;
    }

    .zain-mail-list .zain-page-numbers a,
    .zain-mail-list .zain-page-numbers span.active {
        font-size: 14px;
        height: 32px;
        min-width: 32px;
    }

    .zain-help-dot::after {
        right: -8px;
        white-space: normal;
        width: 190px;
    }
}

/* Envios extras / assistente de mala direta */
.zain-extra-entry-card .zain-card-header {
    margin-bottom: 0;
}

.zain-extra-source-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.zain-extra-import-form,
.zain-extra-recipient-form {
    display: grid;
    gap: 14px;
}

.zain-upload-field,
.zain-extra-recipient-form > label {
    color: #053c5e;
    display: grid;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    gap: 7px;
}

.zain-upload-field input,
.zain-extra-recipient-form input {
    background: #fff;
    border: 1px solid #cbd7e4;
    border-radius: 7px;
    color: #102030;
    font: 16px Arial, sans-serif;
    min-height: 46px;
    min-width: 0;
    padding: 10px 12px;
    width: 100%;
}

.zain-upload-field input[type="file"] {
    padding: 7px;
}

.zain-upload-field input[type="file"]::file-selector-button {
    background: #e8eef4;
    border: 0;
    border-radius: 5px;
    color: #053c5e;
    cursor: pointer;
    font-weight: 700;
    margin-right: 12px;
    padding: 9px 12px;
}

.zain-choice-fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.zain-choice-fieldset legend {
    color: #053c5e;
    font: 700 14px Arial, sans-serif;
    margin-bottom: 8px;
}

.zain-segmented-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zain-segmented-options label {
    cursor: pointer;
}

.zain-segmented-options input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.zain-segmented-options span {
    align-items: center;
    background: #e7ebef;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #24384a;
    display: inline-flex;
    font: 700 14px Arial, sans-serif;
    min-height: 42px;
    padding: 9px 13px;
}

.zain-segmented-options input:checked + span {
    background: #06476a;
    border-color: #06476a;
    color: #fff;
}

.zain-segmented-options input:focus-visible + span {
    outline: 3px solid rgba(6, 71, 106, .22);
    outline-offset: 2px;
}

.zain-extra-recipient-details > summary {
    align-items: center;
    color: #053c5e;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
}

.zain-extra-recipient-details > summary::-webkit-details-marker {
    display: none;
}

.zain-extra-recipient-details > summary span {
    display: grid;
    gap: 4px;
}

.zain-extra-recipient-details > summary strong {
    font-size: 21px;
}

.zain-extra-recipient-details > summary small {
    color: #617181;
    font: 14px Arial, sans-serif;
}

.zain-extra-recipient-details > summary i {
    font: normal 30px Arial, sans-serif;
}

.zain-extra-recipient-details[open] > summary {
    border-bottom: 1px solid #d9e0e7;
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.zain-extra-recipient-details[open] > summary i {
    transform: rotate(45deg);
}

.zain-extra-recipient-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zain-extra-recipient-form .zain-form-span {
    grid-column: 1 / -1;
}

.zain-extra-recipient-form small {
    color: #708090;
    font-weight: 400;
}

.zain-import-warning-list {
    margin: 8px 0 0;
    padding-left: 22px;
}

.zain-empty-state {
    color: #657383;
    font-family: Arial, sans-serif;
    padding: 16px 0;
}

.zain-extra-trash {
    color: #c62828;
}

.zain-extra-layout-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.zain-extra-layout-toolbar span {
    color: #4e6072;
    font: 14px Arial, sans-serif;
    margin-left: auto;
}

.zain-extra-layout-workspace {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
}

.zain-extra-task-list {
    border-right: 1px solid #d7e0e8;
    max-height: 720px;
    overflow: auto;
    padding-right: 16px;
    position: sticky;
    top: 16px;
}

.zain-extra-task-list h3,
.zain-extra-sheet-card h3 {
    color: #053c5e;
    margin: 0 0 7px;
}

.zain-extra-task-list > p {
    color: #627284;
    font: 14px Arial, sans-serif;
    margin: 0 0 12px;
}

.zain-extra-task-list > div {
    display: grid;
    gap: 7px;
}

.zain-extra-task {
    align-items: center;
    background: #f1f4f7;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #18344a;
    cursor: pointer;
    display: grid;
    gap: 2px 9px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 9px;
    text-align: left;
}

.zain-extra-task > span {
    align-items: center;
    background: #dbe5ee;
    border-radius: 50%;
    display: flex;
    font: 700 12px Arial, sans-serif;
    grid-row: 1 / 3;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.zain-extra-task strong,
.zain-extra-task small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zain-extra-task strong {
    font: 700 13px Arial, sans-serif;
}

.zain-extra-task small {
    color: #6b7b8b;
    font: 12px Arial, sans-serif;
}

.zain-extra-task.is-assigned {
    background: #edf7f1;
}

.zain-extra-task.is-selected {
    background: #06476a;
    border-color: #06476a;
    color: #fff;
}

.zain-extra-task.is-selected small {
    color: #d9edf7;
}

.zain-extra-sheets {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 420px));
}

.zain-extra-sheet-card {
    min-width: 0;
}

.zain-extra-label-position {
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    padding: 3px;
}

.zain-extra-label-position > span {
    flex: 0 0 auto;
}

.zain-extra-label-position > small {
    display: block;
    font-size: 9px;
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zain-extra-label-position.is-selected {
    box-shadow: inset 0 0 0 3px #053c5e;
}

.zain-extra-print-form {
    align-items: center;
    background: #edf6fb;
    border: 1px solid #c8dce8;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 20px;
    padding: 14px;
}

.zain-extra-print-form p {
    color: #334e63;
    font: 14px Arial, sans-serif;
    margin: 0;
}

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

    .zain-extra-task-list {
        border-bottom: 1px solid #d7e0e8;
        border-right: 0;
        max-height: 320px;
        padding: 0 0 16px;
        position: static;
    }
}

@media (max-width: 620px) {
    .zain-extra-recipient-form {
        grid-template-columns: 1fr;
    }

    .zain-extra-recipient-form .zain-form-span {
        grid-column: auto;
    }

    .zain-segmented-options,
    .zain-segmented-options label,
    .zain-segmented-options span,
    .zain-extra-layout-toolbar .zain-btn,
    .zain-extra-print-form .zain-btn {
        width: 100%;
    }

    .zain-segmented-options span {
        justify-content: center;
    }

    .zain-extra-layout-toolbar span {
        margin-left: 0;
        width: 100%;
    }

    .zain-extra-sheets {
        grid-template-columns: 1fr;
    }

    .zain-extra-print-form {
        align-items: stretch;
        flex-direction: column;
    }
}
/* =========================================================
   EDITORIAL
   ========================================================= */

.zain-editorial-page .zain-header h1 {
    letter-spacing: 4px;
}

.zain-editorial-legend,
.zain-editorial-legend span {
    align-items: center;
    display: flex;
}

.zain-editorial-legend {
    flex-wrap: wrap;
    font-family: Arial, sans-serif;
    gap: 12px;
    justify-content: flex-end;
}

.zain-editorial-legend span {
    gap: 6px;
    white-space: nowrap;
}

.zain-editorial-dot,
.zain-editorial-article-marker {
    background: #9ca3af;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 9px;
    width: 9px;
}

.zain-editorial-dot.is-new,
.zain-editorial-article-marker.is-new {
    background: #9ca3af;
}

.zain-editorial-dot.is-working,
.zain-editorial-article-marker.is-working,
.zain-editorial-article-marker.is-selected {
    background: #0f7c76;
}

.zain-editorial-article-marker.is-wordpress_draft {
    background: #1b9e51;
}

.zain-editorial-triangle {
    border-bottom: 9px solid #d59710;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    display: inline-block;
    flex: 0 0 auto;
    height: 0;
    width: 0;
}

.zain-editorial-source-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(260px, 1fr));
}

.zain-editorial-source {
    border: 1px solid #d9e0e7;
    border-radius: 8px;
    box-sizing: border-box;
    min-width: 0;
    padding: 14px;
}

.zain-editorial-source-head {
    align-items: center;
    border-bottom: 1px solid #d9e0e7;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-bottom: 10px;
}

.zain-editorial-source-head h3 {
    color: #053c5e;
    font-size: 20px;
    margin: 0;
}

.zain-editorial-source-head span,
.zain-editorial-sync-state {
    color: #64748b;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.zain-editorial-sync-state {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    min-height: 28px;
}

.zain-editorial-sync-state.is-error span {
    color: #b4232d;
    font-weight: bold;
}

.zain-editorial-article-list {
    display: grid;
}

.zain-editorial-article {
    border-top: 1px solid #e5e7eb;
}

.zain-editorial-article:first-child {
    border-top: 0;
}

.zain-editorial-article summary {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 11px 0;
}

.zain-editorial-article summary::-webkit-details-marker {
    display: none;
}

.zain-editorial-article-title {
    color: #102030;
    flex: 1 1 auto;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    min-width: 0;
}

.zain-editorial-article-marker {
    margin-top: 4px;
}

.zain-editorial-article summary .zain-editorial-triangle {
    margin-top: 2px;
}

.zain-editorial-article-detail {
    background: #f7f9fb;
    border-left: 3px solid #053c5e;
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px;
}

.zain-editorial-article-detail p {
    font-family: Arial, sans-serif;
    font-size: 13px;
    margin: 0;
}

.zain-editorial-article-detail small,
.zain-editorial-article-detail strong {
    font-family: Arial, sans-serif;
}

.zain-editorial-duplicate-note {
    background: #fff8df;
    border: 1px solid #e8c76a;
    color: #6b4e08;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    padding: 9px;
}

.zain-editorial-article-detail .zain-actions {
    gap: 7px;
}

.zain-editorial-article-detail .zain-btn {
    font-size: 12px;
    padding: 8px 10px;
}

.zain-editorial-eyebrow {
    color: #d8c28b;
    display: block;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.zain-editorial-work-header h1 {
    font-size: 38px;
}

.zain-editorial-workspace {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.zain-editorial-pane {
    background: #fff;
    border-top: 5px solid #053c5e;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    box-sizing: border-box;
    min-width: 0;
    padding: 24px;
}

.zain-editorial-pane-head {
    align-items: flex-start;
    border-bottom: 1px solid #d9e0e7;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.zain-editorial-pane-head h2 {
    color: #053c5e;
    margin: 0 0 4px;
}

.zain-editorial-pane-head p {
    color: #64748b;
    font-family: Arial, sans-serif;
    font-size: 13px;
    margin: 0;
}

.zain-editorial-original-meta {
    display: grid;
    gap: 5px;
    margin-bottom: 16px;
}

.zain-editorial-original-meta strong {
    color: #053c5e;
    font-size: 20px;
}

.zain-editorial-original-meta span {
    color: #64748b;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

.zain-editorial-featured-image {
    display: block;
    height: auto;
    margin: 0 0 18px;
    max-height: 340px;
    object-fit: contain;
    width: 100%;
}

.zain-editorial-original-content {
    color: #202a34;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.68;
    overflow-wrap: anywhere;
}

.zain-editorial-original-content img {
    height: auto;
    max-width: 100%;
}

.zain-editorial-original-content a {
    color: inherit;
    pointer-events: none;
    text-decoration: none;
}

.zain-editorial-draft-form,
.zain-editorial-draft-form label {
    display: grid;
    gap: 8px;
}

.zain-editorial-draft-form {
    gap: 15px;
}

.zain-editorial-draft-form label {
    color: #053c5e;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.zain-editorial-draft-form input {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

.zain-editorial-editor {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    color: #202a34;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.6;
    min-height: 620px;
    overflow: auto;
    padding: 18px;
    width: 100%;
}

.zain-editorial-editor:empty::before {
    color: #94a3b8;
    content: attr(data-placeholder);
    font-family: Arial, sans-serif;
    pointer-events: none;
}

.zain-editorial-editor:focus {
    border-color: #053c5e;
    box-shadow: 0 0 0 2px rgba(5, 60, 94, .12);
    outline: 0;
}

.zain-editorial-source-lock {
    align-items: flex-start;
    background: #eef6f8;
    border: 1px solid #b8d7de;
    color: #164e63;
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 13px;
    gap: 9px;
    overflow-wrap: anywhere;
    padding: 12px;
}

.zain-editorial-source-lock svg {
    flex: 0 0 auto;
}

.zain-editorial-draft-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.zain-editorial-draft-actions button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

@media (max-width: 1380px) {
    .zain-editorial-source-grid {
        grid-template-columns: repeat(3, minmax(250px, 1fr));
    }
}

@media (max-width: 1040px) {
    .zain-editorial-source-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .zain-editorial-workspace {
        grid-template-columns: 1fr;
    }

    .zain-editorial-editor {
        min-height: 480px;
    }
}

@media (max-width: 680px) {
    .zain-editorial-source-grid {
        grid-template-columns: 1fr;
    }

    .zain-editorial-page .zain-card,
    .zain-editorial-pane {
        padding: 18px;
    }

    .zain-editorial-legend {
        justify-content: flex-start;
    }

    .zain-editorial-draft-actions,
    .zain-editorial-draft-actions .zain-btn {
        width: 100%;
    }
}