@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --sidebar-width: 300px;
    --sidebar-collapsed-width: 92px;
    --surface: #ffffff;
    --surface-soft: #f6f8fb;
    --border: #e5e9f0;
    --text: #17212b;
    --muted: #6b7280;
    --green: #16a34a;
}


*::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

*::-webkit-scrollbar-track {
    background: #eef3f0;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: var(--green);
    border: 0;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #078e60;
}

body {
    background: var(--surface-soft);
    color: var(--text);
    font-family: "Montserrat", sans-serif;
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */
}

.app-shell {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: var(--sidebar-width);
    background: #0f1f18;
    color: #fff;
    position: fixed;
    inset: 0 auto 0 0;
    padding: 18px;
    z-index: 30;
}

.brand {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 18px;
}

.brand i {
    color: #25d366;
    font-size: 1.4rem;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, .78);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin-bottom: 4px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.sidebar .nav-link.disabled {
    opacity: .48;
}

.main {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}

.topbar {
    min-height: 72px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.page-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.page-subtitle {
    color: var(--muted);
    font-size: .88rem;
}

.content {
    padding: 24px;
}
.btn-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border);
}

.btn {
    --bs-btn-border-radius: 10px;
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size:0.78rem;
}

.btn-sm {
    --bs-btn-border-radius: 8px;
    min-height: 34px;
    gap: 6px;
}

.btn-action-primary,
.btn-action-secondary {
    min-height: 40px;
    padding-inline: 10px;
    white-space: nowrap;
}

.btn-action-primary i,
.btn-action-secondary i {
    font-size: 1.08rem;
}

.btn-compact-action {
    min-width: 96px;
}

.btn-square {
    width: 46px;
    min-width: 46px;
    padding-inline: 0;
}

.btn-square-sm {
    width: 34px;
    min-width: 34px;
    padding-inline: 0;
}

.profile-btn {
    border: 1px solid var(--border);
    background: #fff;
}

.metric-card,
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .05);
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    min-height: 96px;
}

.metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.metric-label {
    color: var(--muted);
    font-size: .86rem;
}

.panel {
    padding: 18px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.panel-header h2 {
    font-size: 0.95rem;
    margin: 0;
    font-weight: 500;
}

.limit-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}

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

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-form {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    min-height: 35px;
}

.search-form input {
    border: 0;
    outline: 0;
    width: 100%;
}

.contact-filters {
    flex: 1 1 520px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-filters .search-form {
    flex: 1 1 240px;
}

.contact-filters .form-select {
    width: auto;
    min-width: 160px;
}

.table-title {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.85rem;
}

.table-title:hover {
    color: var(--green);
}

.tag-badge {
    background: #e8f7ef;
    color: #166534;
    border: 1px solid #bbf7d0;
    margin: 2px;
}

.contacts-hero {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .04);
    padding: 22px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.contacts-hero .eyebrow {
    display: inline-flex;
    color: var(--green);
    background: var(--green-soft);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.contacts-hero h1 {
    color: #111827;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.contacts-hero p {
    color: var(--muted);
    max-width: 640px;
    margin: 0;
    font-size: .75rem;
    font-weight: 400;
}

.contacts-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

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

.contact-summary-card {
    background: #05a77917;
    border: 1px solid var(--green);
    border-radius: 12px;
    padding: 16px;
}

.contact-summary-card span,
.contact-summary-card small,
.help-copy {
    color: var(--muted);
}

.contact-summary-card span {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.contact-summary-card strong {
    display: block;
    color: #111827;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.contact-summary-card small {
    display: block;
    margin-top: 4px;
    font-size: .8rem;
    font-weight: 450;
}

.contacts-workspace .contact-filters {
    margin-bottom: 16px;
    padding: 14px;
    align-items: center;
}

.filter-intro {
    min-width: 170px;
    display: grid;
    gap: 2px;
}

.filter-intro strong {
    color: #111827;
    font-weight: 700;
}

.filter-intro span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 400;
}

.contacts-table-panel {
    padding: 18px 18px 12px;
}

.contacts-table-panel .table-responsive {
    max-height: calc(100vh - 390px);
    min-height: 280px;
    overflow: auto;
    padding-bottom: 8px;
}

.contacts-table-panel .table {
    min-width: 980px;
}

.contacts-table-panel thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    font-weight: 600;
}

.contacts-pagination {
    overflow-x: auto;
    padding-bottom: 2px;
}

.contacts-pagination .pagination {
    flex-wrap: wrap;
    gap: 4px;
}

.contacts-pagination .page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1;
}

.contacts-pagination .page-item:first-child .page-link,
.contacts-pagination .page-item:last-child .page-link {
    min-width: 72px;
}

.contacts-empty-state {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 34px 16px;
}

.contacts-empty-state i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 1.35rem;
}

.contacts-empty-state strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.contacts-empty-state span {
    color: var(--muted);
    max-width: 420px;
    text-align: center;
    font-size: .9rem;
}

.contacts-help-card {
    position: sticky;
    top: 88px;
}

.help-copy {
    font-size: .75rem;
    font-weight: 400;
    margin: -4px 0 14px;
}

.mini-empty {
    padding: 16px;
    font-size: .84rem;
}

.tag-manager {
    display: grid;
    gap: 6px;
}

.tag-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
}

.action-buttons {
    white-space: nowrap;
}

.contact-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-detail-header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dcfce7;
    color: #166534;
    font-weight: 700;
    font-size: 1.4rem;
}

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

.detail-grid div,
.mini-stat {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfe;
}

.detail-grid span,
.mini-stat span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    margin-bottom: 4px;
}

.detail-grid strong{

}
.mini-stat strong {
    word-break: break-word;
}

.section-title {
    font-size: .95rem;
    font-weight: 700;
}

.empty-state {
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 16px;
    background: #fbfcfe;
}

.import-errors {
    max-height: 260px;
    overflow: auto;
    border: 1px solid #fecaca;
    background: #fff7f7;
    color: #991b1b;
    border-radius: 8px;
    padding: 10px;
    font-size: .9rem;
}

.copy-box {
    border: 1px solid var(--border);
    background: #fbfcfe;
    border-radius: 8px;
    padding: 12px;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .86rem;
    word-break: break-all;
}

.template-components {
    max-width: 520px;
    max-height: 180px;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
    font-size: .78rem;
    background: #fbfcfe;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

.campaign-progress {
    height: 8px;
    min-width: 160px;
}

.recipient-preview {
    max-height: 620px;
    overflow: auto;
    display: grid;
    gap: 8px;
}

.recipient-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: #fbfcfe;
}

.workflow-timeline {
    display: grid;
    gap: 16px;
}

.workflow-step {
    border-left: 3px solid #16a34a;
    background: #fbfcfe;
    border-radius: 8px;
    padding: 14px;
}

.workflow-step h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.automation-action-row {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.preview-form {
    border-bottom: 0;
}

.campaign-builder-page {
    min-height: calc(100vh - 120px);
    display: grid;
    gap: 34px;
}

.campaign-builder-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
}

.campaign-back-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: #111827;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .12);
    text-decoration: none;
    font-size: 1.15rem;
}

.campaign-builder-head h1 {
    color: var(--green);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 4px;
}

.campaign-builder-head p {
    color: #64748b;
    font-size: .85rem;
    font-weight: 450;
    margin: 0;
}

.campaign-wizard {
    display: grid;
    grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}

.campaign-stepper {
    display: grid;
    gap: 38px;
}

.campaign-step-link {
    min-height: 100px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas: "num title" "num copy";
    align-items: center;
    column-gap: 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    padding: 18px 20px;
    text-align: left;
    color: #94a3b8;
}

.campaign-step-link span,
.campaign-step-link i {
    grid-area: num;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f8fafc;
    color: #cbd5e1;
    font-size: 1.05rem;
    font-weight: 600;
}

.campaign-step-link i {
    display: none;
    background: #86d7b3;
    color: #fff;
    font-size: 1.35rem;
}

.campaign-step-link strong {
    grid-area: title;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
}

.campaign-step-link small {
    grid-area: copy;
    color: #747474;
    font-size: .88rem;
    font-weight: 400;
    white-space: nowrap;
}

.campaign-step-link.is-active {
    background: #fff;
    border-color: #e5eaf2;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
    color: var(--green);
}

.campaign-step-link.is-active span {
    background: var(--green);
    color: #fff;
    box-shadow: 0 10px 20px rgba(5, 150, 105, .18);
}

.campaign-step-link.is-complete span {
    display: none;
}

.campaign-step-link.is-complete i {
    display: grid;
}

.campaign-wizard-card {
    min-height: 500px;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .03);
    padding: 20px;
}

.campaign-step-panel {
    display: none;
}

.campaign-step-panel.is-active {
    display: block;
}

.campaign-panel-title {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 30px;
}

.campaign-panel-title > span,
.campaign-variable-box .campaign-ready-state i,
.campaign-ready-banner > i,
.campaign-target-summary > i {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf7f1;
    color: var(--green);
    font-size: 1.65rem;
}

.campaign-panel-title h2 {
    margin: 0 0 6px;
    color: var(--green);
    font-size: 1.10rem;
    font-weight: 600;
}

.campaign-panel-title p {
        margin: 0;
    color: #64748b;
    font-size: .98rem;
    font-weight: 400;
    line-height: 1.3;
    font-size:0.80rem;
}

.campaign-field {
    display: grid;
    gap: 6px;
    margin-bottom: 20px;
}

.campaign-field > span,
.campaign-variable-field span,
.campaign-audience-controls label > span {
    color: #495260;
    font-weight: 500;
}

.campaign-field b {
    color: var(--green);
}

.campaign-field .form-control,
.campaign-field .form-select,
.campaign-variable-field .form-control,
.campaign-audience-controls .form-select,
.campaign-time-card .form-control {
    min-height: 40px;
    border-radius: 12px;
    border-color: #e2e8f0;
    background: #f8fafc;
    font-weight: 400;
}

.campaign-field textarea.form-control {
    min-height: 190px;
    padding-top: 26px;
}

.campaign-channel-grid,
.campaign-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.campaign-channel-card,
.campaign-audience-card,
.campaign-template-card,
.campaign-time-card {
    position: relative;
    min-height: 150px;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    color: #111827;
    text-align: left;
    padding: 12px;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .04);
}

.campaign-channel-card i:first-child,
.campaign-audience-card > i,
.campaign-time-card > i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #f5f8fb;
    color: #94a3b8;
    font-size: 1.55rem;
    margin-bottom: 15px;
}

.campaign-channel-card strong,
.campaign-audience-card strong,
.campaign-time-card strong {
        display: block;
    font-size: 0.90rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.campaign-channel-card small,
.campaign-audience-card small,
.campaign-time-card small {
    display: block;
    color: #94a3b8;
    font-weight: 400;
}

.campaign-channel-card.is-selected,
.campaign-audience-card.is-selected,
.campaign-time-card.is-selected,
.campaign-template-card.is-selected {
    border-color: var(--green);
    background: #f7fffb;
    box-shadow: 0 10px 22px rgba(5, 150, 105, .10);
}

.campaign-channel-card.is-selected i:first-child,
.campaign-audience-card.is-selected > i {
    background: var(--green);
    color: #fff;
}

.campaign-channel-card b.bi {
    position: absolute;
    right: 22px;
    top: 22px;
    color: var(--green);
}

.campaign-waba-card {
    min-width: 250px;
    border: 1px solid #d8efe4;
    border-radius: 12px;
    background: #f8fffb;
    padding: 18px;
}

.campaign-waba-card strong {
    display: block;
    font-size: 1.1rem;
    color: #111827;
}

.campaign-waba-card small {
    color: #64748b;
    font-weight: 700;
}

.campaign-waba-card b {
    color: var(--green);
}

.campaign-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #64748b;
    font-weight: 750;
    margin-bottom: 20px;
}

.campaign-section-row span {
    border-radius: 999px;
    background: #f1f5f9;
    color: #94a3b8;
    padding: 8px 14px;
}

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

.campaign-template-card {
    min-height: 220px;
    padding: 10px 20px;
}

.campaign-template-card span {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.campaign-template-card span b {
    border-radius: 999px;
    background: #fff7ed;
    color: #f97316;
    padding: 5px 10px;
    font-size: .72rem;
}

.campaign-template-card span small {
    color: #94a3b8;
    font-weight: 700;
}

.campaign-template-card strong {
        display: block;
    color: #111827;
    font-size: 0.80rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.campaign-template-thumb {
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    margin: -16px 0 12px;
}

.campaign-template-media-icon {
    display: grid;
    place-items: center;
    gap: 4px;
    color: #64748b;
    font-weight: 700;
}

.campaign-template-media-icon i {
    font-size: 1.35rem;
    color: var(--green);
}

.campaign-template-media-icon small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
}

.campaign-template-card p {
    min-height: 50px;
    color: #94a3b8;
    font-weight: 400;
    line-height: 1.4;
    font-size: 0.75rem;
}

.campaign-template-card em {
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    color: #64748b;
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
}

.campaign-template-card em b {
    color: #3b82f6;
    background: #eff6ff;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 500;
}

.campaign-mapping-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 532px);
    gap: 42px;
    align-items: stretch;
}

.campaign-variable-box {
    display: grid;
    gap: 18px;
}

.campaign-variable-field {
    min-height: 110px;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .06);
    padding: 15px;
    display: grid;
    gap: 10px;
    align-content: center;
}

.campaign-live-preview {
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    overflow: hidden;
    min-height: 660px;
}

.campaign-preview-title {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 28px;
    border-bottom: 1px solid #e6ebf3;
    color: #64748b;
    font-weight: 400;
}

.campaign-preview-title i {
    color: var(--green);
}

.campaign-phone-preview {
    width: 410px;
    height: 760px;
    margin: 32px auto;
    border: 7px solid #111827;
    border-radius: 48px;
    overflow: hidden;
    background: #f4eee5;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .14);
}

.campaign-phone-top {
    min-height: 112px;
    background: #066152;
    color: #fff;
    display: grid;
    grid-template-columns: 28px 42px minmax(0, 1fr) repeat(3, 24px);
    gap: 12px;
    align-items: center;
    padding: 30px 20px 12px;
}

.campaign-phone-top span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
}

.campaign-phone-top strong small {
    display: block;
    opacity: .75;
    font-size: .7rem;
}

.campaign-phone-body {
    min-height: calc(100% - 112px);
    padding: 22px;
    background-color: #efe8df;
    background-image: radial-gradient(#d9d1c7 1px, transparent 1px);
    background-size: 18px 18px;
}

.campaign-phone-body > b {
    display: block;
    width: max-content;
    margin: 0 auto 26px;
    border-radius: 8px;
    background: #dff1ff;
    color: #1685d9;
    padding: 5px 14px;
    font-size: .72rem;
}

.campaign-message-preview {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    color: #334155;
    line-height: 1.45;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
}

.campaign-message-preview > div,
.campaign-message-preview > small,
.campaign-message-preview > .campaign-preview-header-text {
    padding: 18px;
}

.campaign-message-preview > div + small {
    padding-top: 0;
}

.campaign-preview-media {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    background: #f8fafc;
}

.campaign-preview-document {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    color: #0f766e;
    text-decoration: none;
    background: #f0fdfa;
    border-bottom: 1px solid #d1fae5;
}

.campaign-preview-document i {
    font-size: 1.25rem;
}

.campaign-preview-header-text {
    display: block;
    color: #111827;
}

.campaign-message-preview small {
    display: block;
    color: #94a3b8;
}

.campaign-message-preview button {
    width: 100%;
    border: 0;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    color: #0ea5e9;
    padding: 14px;
    font-weight: 850;
}

.campaign-audience-card {
    min-height: 150px;
    text-align: center;
}

.campaign-audience-card > i {
    margin: 0 auto 18px;
}

.campaign-audience-controls {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.campaign-audience-controls label {
    display: none;
    gap: 10px;
}

.campaign-audience-controls label.is-open {
    display: grid;
}

.campaign-avoid-row {
    min-height: 96px;
    margin: 64px 0 52px;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .05);
}

.campaign-avoid-row strong,
.campaign-avoid-row small {
    display: block;
}

.campaign-avoid-row small {
    color: #64748b;
    font-weight: 600;
}

.campaign-avoid-row input,
.campaign-switch input {
    display: none;
}

.campaign-avoid-row > i,
.campaign-switch > i {
    position: relative;
    width: 58px;
    height: 32px;
    display: block;
    border-radius: 999px;
    background: #cbd5e1;
}

.campaign-avoid-row > i::after,
.campaign-switch > i::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    top: 3px;
    left: 3px;
    border-radius: 999px;
    background: #fff;
    transition: transform .18s ease;
}

.campaign-avoid-row input:checked + i,
.campaign-switch input:checked + i {
    background: #10b981;
}

.campaign-avoid-row input:checked + i::after,
.campaign-switch input:checked + i::after {
    transform: translateX(26px);
}

.campaign-target-summary {
    min-height: 160px;
    border: 1px solid #b7e4ce;
    border-radius: 14px;
    background: #f4fbf8;
    /* display: grid; */
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
}

.campaign-target-summary strong,
.campaign-target-summary small {
    display: block;
}

.campaign-target-summary strong {
    color: #1e3a8a;
    font-size: 1.12rem;
}

.campaign-target-summary small {
    color: #7c9cff;
    font-weight: 600;
}

.campaign-timeline-options {
    width: min(1520px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;
}

.campaign-time-card {
    min-height: 120px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 15px;
}

.campaign-time-card > i {
    margin: 0;
}

.campaign-time-card > div {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.campaign-time-card strong,
.campaign-time-card small {
    margin: 0;
    line-height: 1.25;
}

.campaign-time-card strong {
    font-size: 0.95rem;
    font-weight: 600;
}

.campaign-time-card small {
    font-size: .80rem;
}

.campaign-switch {
    justify-self: end;
}

.campaign-time-card .form-control {
    grid-column: 2 / -1;
    display: none;
}

.campaign-time-card.is-selected .form-control {
    display: block;
}

.campaign-ready-banner {
    margin-top: 30px;
    min-height: 120px;
    border-radius: 12px;
    background: #101a2e;
    color: #fff;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
    overflow: hidden;
}

.campaign-ready-banner > i {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.campaign-ready-banner strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 500;
}

.campaign-ready-banner span {
    color: #94a3b8;
    font-weight: 400;
}

.campaign-empty-card,
.campaign-ready-state {
    border: 1px dashed #d7e1ec;
    border-radius: 14px;
    color: #94a3b8;
    padding: 32px;
    font-weight: 700;
}

.campaign-ready-state {
    display: flex;
    align-items: center;
    gap: 18px;
}

.campaign-ready-state i {
    flex: 0 0 auto;
}

.campaign-wizard-actions {
    border-top: 1px solid #e5e7eb;
    margin-top: 32px;
    padding: 16px 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.campaign-wizard-actions > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.campaign-nav-btn,
.campaign-next-btn,
.campaign-launch-btn,
.campaign-draft-btn {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.75rem;
    padding: 0 30px;
    font-weight: 450;
    text-decoration: none;
}

.campaign-nav-btn {
    background: #e5e7eb;
    color: #111827;
}

.campaign-nav-btn:disabled {
    opacity: .55;
}

.campaign-next-btn,
.campaign-launch-btn {
    background: var(--green);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(5, 150, 105, .18);
}

.campaign-draft-btn {
    border: 1px solid #fecaca;
    background: #fff;
    color: #ef4444;
}

.campaign-launch-btn {
    display: none;
}

.broadcast-page {
    display: grid;
    gap: 10px;
}

.broadcast-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.broadcast-head h1 {
    color: var(--green);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.broadcast-head p {
    color: #64748b;
    font-size: .85rem;
    font-weight: 450;
    margin: 0;
}

.broadcast-add-btn {
    min-height: 40px;
    min-width: 160px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--green);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    font-size: .80rem;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .04);
}

.broadcast-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.broadcast-metric-card {
        position: relative;
    min-height: 130px;
    border: 1px solid #e6ebf3;
    border-radius: 12px;
    background: #fff;
    padding: 15px 15px;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.broadcast-metric-card > div {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    margin-bottom: 20px;
}

.broadcast-metric-card > div > i {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.38rem;
}

.broadcast-metric-card > div span {
    font-size: .72rem;
    font-weight: 850;
}

.broadcast-metric-card strong {
    /* max-width: 130px; */
    display: block;
    color: #000000;
    font-size: .85rem;
    font-weight: 650;
}

.broadcast-metric-card small {
    color: #474a4f;
    font-weight: 400;
}

.broadcast-metric-card b {
    position: absolute;
    right: 28px;
    bottom: 70px;
    font-size: 2.35rem;
    line-height: 1;
    font-weight: 500;
}

.broadcast-metric-card.orange > div > i { background: #fff1e8; color: #ff7a21; }
.broadcast-metric-card.orange span,
.broadcast-metric-card.orange b { color: #ff7a21; }
.broadcast-metric-card.blue > div > i { background: #eef4ff; color: #3b82f6; }
.broadcast-metric-card.blue span,
.broadcast-metric-card.blue b { color: #4d89ff; }
.broadcast-metric-card.green > div > i { background: #eaf9f1; color: #10b981; }
.broadcast-metric-card.green span,
.broadcast-metric-card.green b { color: #10b981; }
.broadcast-metric-card.purple > div > i { background: #f7eafe; color: #b84cff; }
.broadcast-metric-card.purple span,
.broadcast-metric-card.purple b { color: #b84cff; }
.broadcast-metric-card.red > div > i { background: #fff1f2; color: #ef4444; }
.broadcast-metric-card.red span,
.broadcast-metric-card.red b { color: #ef4444; }

.broadcast-filter-card {
    min-height: 60px;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 0 15px;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .04);
}

.broadcast-search {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fbfcfe;
    padding: 0 22px;
    color: #94a3b8;
}

.broadcast-search i {
    font-size: 1rem;
}

.broadcast-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #080808;
    font-weight: 400;
}

.broadcast-search input::placeholder {
    color: #91979e;
}

.broadcast-range-tabs {
    display: flex;
    gap: 10px;
}

.broadcast-range-tabs button,
.broadcast-refresh-btn {
    min-height: 30px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    padding: 0 20px;
    font-weight: 450;
    font-size: 0.80rem;
}

.broadcast-range-tabs button.is-active {
    background: var(--green);
    color: #fff;
}

.broadcast-refresh-btn {
    background: #fff;
    color: #111827;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .10);
}

.broadcast-refresh-btn i {
    color: #94a3b8;
    margin-right: 8px;
}

.broadcast-table-card {
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.broadcast-table-wrap {
    overflow-x: auto;
}

.broadcast-table {
    width: 100%;
    min-width: 1380px;
    border-collapse: collapse;
}

.broadcast-table th {
    height: 40px;
    background: #f8fafc;
    color: #475569;
    font-size: .85rem;
    font-weight: 550;
    padding: 0 15px;
    white-space: nowrap;
}

.broadcast-table td {
    height: 80px;
    border-top: 1px solid #edf2f7;
    color: #334155;
    padding: 0 15px;
    vertical-align: middle;
    font-weight: 700;
}

.broadcast-table td strong,
.broadcast-table td small {
    display: block;
        font-weight: 500;
}

.broadcast-table td small {
    color: #94a3b8;
    font-weight: 400;
    margin-top: 4px;
}

.broadcast-template-pill,
.broadcast-status-pill,
.broadcast-publish-pill {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 10px;
    white-space: nowrap;
}

.broadcast-template-pill {
    border: 1px solid #dbeafe;
    background: #f8fbff;
    color: #111827;
    max-width: 230px;
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    font-weight: 400;
}

.broadcast-status-pill {
    font-size: .70em;
    gap: 4px;
}

.broadcast-status-pill.failed {
    background: #fff1f2;
    border: 1px solid #fecaca;
    color: #ef4444;
}

.broadcast-status-pill.completed {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #059669;
}

.broadcast-status-pill.running,
.broadcast-status-pill.scheduled {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #f97316;
}

.broadcast-status-pill.draft,
.broadcast-publish-pill {
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.70rem;
    font-weight: 400;
}

.broadcast-progress {
    width: 128px;
    height: 8px;
    border-radius: 999px;
    background: #e8edf4;
    overflow: hidden;
    margin-bottom: 8px;
}

.broadcast-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
}

.metric-blue { color: #2563eb !important; }
.metric-green { color: #059669 !important; }
.metric-purple { color: #a855f7 !important; }
.metric-red { color: #ef4444 !important; }

.broadcast-row-actions {
    display: flex;
    gap: 3px;
}

.broadcast-row-actions a,
.broadcast-row-actions button {
    width: 40px;
    height: 40px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #fff;
    color: var(--green);
    display: grid;
    place-items: center;
    text-decoration: none;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .04);
}

.broadcast-row-actions form {
    margin: 0;
}

.broadcast-row-actions button {
    color: #ef4444;
}

.broadcast-row-actions a:nth-child(2) {
    color: var(--green);
}

.broadcast-row-actions a:last-of-type {
    color: #2563eb;
}

.campaign-report-page {
    display: grid;
    gap: 16px;
}

.campaign-report-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.campaign-report-back {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: #111827;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .10);
    text-decoration: none;
}

.campaign-report-head span {
    color: var(--green);
    font-size: .74rem;
    font-weight: 600;
}

.campaign-report-head h1 {
    color: #111827;
    font-size: 1.35rem;
    font-weight: 650;
    margin: 2px 0 4px;
}

.campaign-report-head p {
    color: #64748b;
    font-size: .82rem;
    margin: 0;
}

.campaign-report-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.campaign-report-summary article {
    min-height: 106px;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .05);
}

.campaign-report-summary article > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ecfdf5;
    color: var(--green);
    font-size: 1.12rem;
}

.campaign-report-summary strong,
.campaign-report-summary b {
    display: block;
}

.campaign-report-summary strong {
    color: #64748b;
    font-size: .76rem;
    font-weight: 550;
    margin-bottom: 7px;
}

.campaign-report-summary b {
    font-size: 0.75rem;
    font-weight: 450;
    align-items: center;
    display: flex;
}

.campaign-report-summary .broadcast-status-pill {
    display: inline-flex;
    width: fit-content;
    font-size: .72rem;
}

.campaign-report-progress,
.campaign-report-table-card {
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .05);
}

.campaign-report-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
}

.campaign-report-progress strong,
.campaign-report-progress span {
    display: block;
}

.campaign-report-progress strong {
    color: #111827;
    font-size: .95rem;
    font-weight: 650;
}

.campaign-report-progress span {
    color: #64748b;
    font-size: .78rem;
}

.campaign-report-progress .broadcast-progress {
    width: 100%;
    margin: 0;
}

.campaign-report-table-card {
    overflow: hidden;
}

.campaign-report-table-head {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf2f7;
}

.campaign-report-table-head h2 {
    color: #111827;
    font-size: 1rem;
    font-weight: 650;
    margin: 0 0 2px;
}

.campaign-report-table-head p,
.campaign-report-table-head span {
    color: #64748b;
    font-size: .78rem;
    margin: 0;
}

.campaign-report-table-head span {
    border-radius: 999px;
    background: #f1f5f9;
    padding: 6px 10px;
    white-space: nowrap;
}

.campaign-report-table-wrap {
    overflow-x: auto;
}

.campaign-report-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.campaign-report-table th {
    height: 48px;
    background: #f8fafc;
    color: #475569;
    font-size: .78rem;
    font-weight: 600;
    padding: 0 18px;
    white-space: nowrap;
}

.campaign-report-table td {
    min-height: 72px;
    border-top: 1px solid #edf2f7;
    color: #334155;
    padding: 14px 18px;
    vertical-align: middle;
    font-size: .82rem;
}

.campaign-report-table td strong,
.campaign-report-table td small {
    display: block;
}

.campaign-report-table td strong {
    color: #111827;
    font-weight: 600;
}

.campaign-report-table td small {
    color: #94a3b8;
    font-size: .74rem;
    margin-top: 2px;
}

.campaign-recipient-pill {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 10px;
    font-size: .72rem;
    font-weight: 600;
}

.campaign-recipient-pill.success {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #059669;
}

.campaign-recipient-pill.failed {
    background: #fff1f2;
    border: 1px solid #fecaca;
    color: #ef4444;
}

.campaign-recipient-pill.running {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #f97316;
}

.campaign-recipient-pill.draft {
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.campaign-error-cell {
    max-width: 260px;
    color: #ef4444 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-report-empty {
    height: 120px;
    text-align: center;
    color: #94a3b8 !important;
}

@media (max-width: 1200px) {
    .campaign-report-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .campaign-report-head,
    .campaign-report-progress {
        grid-template-columns: 1fr;
    }

    .campaign-report-head .btn {
        width: 100%;
    }

    .campaign-report-summary {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .campaign-report-summary {
        grid-template-columns: 1fr;
    }
}

.broadcast-empty-row td {
    text-align: center;
    color: #94a3b8;
    height: 150px;
}

.broadcast-table-footer {
    min-height: 40px;
    border-top: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 32px;
    color: #64748b;
    font-weight: 400;
    font-size: 0.70rem;
}

.broadcast-table-footer > div:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #111827;
}

.broadcast-table-footer button {
    min-width: 40x;
    min-height: 25px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #64748b;
    padding: 0 16px;
    font-weight: 500;
}

.broadcast-pagination {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.broadcast-pagination button.is-active {
    color: var(--green);
    border-color: var(--green);
}

.template-create-page {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0px;
    display: grid;
    gap: 34px;
}

.template-create-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    align-items: center;
}

.template-back-btn {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .08);
    text-decoration: none;
}

.template-create-head h1 {
    margin: 0 0 4px;
    color: var(--green);
    font-size: 1.15rem;
    font-weight: 500;
}

.template-create-head p {
    margin: 0;
    color: #64748b;
    font-size: .82rem;
    font-weight: 400;
}

.template-create-actions {
    grid-column: 2;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.template-live-toggle,
.template-ai-btn,
.template-submit-top,
.template-create-footer a,
.template-create-footer button {
    min-height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    font-size: .75rem;
    font-weight: 550;
    text-decoration: none;
}

.template-live-toggle,
.template-submit-top,
.template-create-footer button {
    border: 0;
    background: var(--green);
    color: #fff;
    box-shadow: 0 8px 18px rgba(5, 150, 105, .16);
}

.template-ai-btn {
    border: 1px solid #dfe7f1;
    background: #fff;
    color: #a855f7;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

.template-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.template-create-main {
    display: grid;
    gap: 34px;
}

.template-builder-card,
.template-preview-card {
    border: 1px solid #e4ebf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .06);
    padding: 26px;
}

.template-builder-card h2 {
    margin: 0 0 10px;
    color: #172033;
    font-size: 1rem;
    font-weight: 800;
}

.template-builder-card p {
    margin: 0 0 24px;
    color: #64748b;
    font-size: .82rem;
    font-weight: 600;
}

.template-form-grid,
.template-builder-card label {
    display: grid;
    gap: 10px;
}

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

.template-builder-card label > span,
.template-section-label,
.template-field-title {
    color: #111827;
    font-size: .75rem;
    font-weight: 500;
}

.template-builder-card .form-control,
.template-builder-card .form-select {
    min-height: 50px;
    border-color: #dfe7f1;
    border-radius: 10px;
    background-color: #fbfcff;
    color: #111827;
    font-size: .9rem;
}

.template-builder-card small,
.template-help-text {
    display: block;
    color: #94a3b8;
    font-size: .74rem;
    font-weight: 600;
}

.template-section-label {
    margin: 28px 0 16px;
}

.template-category-grid,
.template-media-grid {
    display: grid;
    gap: 18px;
}

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

.template-choice-card,
.template-media-grid button {
    min-height: 72px;
    border: 1px solid #e5ebf4;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    display: grid;
    align-items: center;
    text-align: left;
    padding: 14px 18px;
}

.template-choice-card {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
}

.template-choice-card i,
.template-media-grid i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f3f7fb;
    color: #94a3b8;
}

.template-choice-card strong,
.template-media-grid strong {
    color: inherit;
    font-size: .86rem;
    font-weight: 800;
    text-transform: capitalize;
}

.template-choice-card small {
    grid-column: 2;
    text-transform: uppercase;
    font-size: .66rem;
}

.template-choice-card.is-selected,
.template-media-grid button.is-selected {
    border-color: var(--green);
    background: #f4fffa;
    color: var(--green);
    box-shadow: 0 8px 18px rgba(5, 150, 105, .08);
}

.template-choice-card.is-selected i,
.template-media-grid button.is-selected i {
    background: #dff8ed;
    color: var(--green);
}

.template-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.template-media-grid button {
    min-height: 84px;
    place-items: center;
    text-align: center;
    padding: 12px;
}

.template-media-grid button:disabled {
    opacity: .55;
}

.template-media-handle {
    display: none !important;
    margin-top: 18px;
}

.template-media-handle.is-open {
    display: grid !important;
}

.template-media-upload {
    display: none;
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px solid #eef2f7;
}

.template-media-upload.is-open {
    display: grid;
    gap: 16px;
}

.template-media-upload label {
    min-height: 260px;
    border: 2px dashed #dfe8f3;
    border-radius: 14px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    text-align: center;
    cursor: pointer;
    background: #fff;
}

.template-media-upload input[type="file"] {
    display: none;
}

.template-media-upload label i {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--green);
    font-size: 1.6rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

.template-media-upload label strong {
    color: #64748b;
    font-size: 1.05rem;
    font-weight: 800;
}

.template-media-upload label span {
    color: #64748b;
    font-size: .9rem;
    font-weight: 600;
}

.template-editor {
    border: 1px solid #dfe7f1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

.template-editor-toolbar {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    border-bottom: 1px solid #e7edf5;
    background: #fff;
}

.template-editor-toolbar select,
.template-editor-toolbar button {
    min-height: 34px;
    border: 0;
    background: transparent;
    color: #334155;
    border-radius: 8px;
    padding: 0 10px;
    font-weight: 650;
}

.template-editor textarea {
    width: 100%;
    min-height: 84px;
    border: 0;
    resize: vertical;
    outline: 0;
    padding: 18px;
    color: #111827;
}

.template-editor-foot,
.template-editor-meta,
.template-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.template-editor-foot {
    min-height: 58px;
    padding: 0 16px;
    border-top: 1px solid #e7edf5;
}

.template-editor-foot span,
.template-footer-row {
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.template-editor-foot span i {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 999px;
    background: #10b981;
    margin-right: 8px;
}

.template-editor-foot button,
.template-stop-btn {
    min-height: 34px;
    border: 1px solid #d7efe4;
    border-radius: 10px;
    background: #fff;
    color: var(--green);
    padding: 0 16px;
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.template-editor-meta {
    margin-top: 12px;
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 650;
}

.template-variable-examples {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #eef2f7;
}

.template-variable-title {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 850;
    margin-bottom: 20px;
}

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

.template-variable-grid label {
    border: 1px solid #e8edf5;
    border-radius: 14px;
    background: #fff;
    padding: 20px 24px;
}

.template-variable-grid label span {
    color: var(--green);
    font-size: .88rem;
    font-weight: 850;
    text-transform: uppercase;
}

.template-footer-row {
    margin: 16px 0 10px;
}

.template-stop-btn {
    width: max-content;
    margin-bottom: 8px;
}

.template-button-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.template-button-tabs button {
    min-height: 40px;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    background: #fff;
    color: #94a3b8;
    padding: 0 26px;
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.template-button-tabs button.is-active {
    border-color: var(--green);
    color: var(--green);
    background: #f7fffb;
}

.template-button-fields {
    margin-top: 18px;
    color: #64748b;
    font-size: .85rem;
    font-weight: 650;
}

.template-button-add-grid,
.template-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.template-button-add-grid label,
.template-quick-grid label {
    min-height: 86px;
    border: 2px dashed #e1e9f3;
    border-radius: 14px;
    background: #fff;
    padding: 18px;
    display: grid;
    gap: 12px;
}

.template-button-add-grid label span,
.template-quick-grid label span {
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
    font-weight: 850;
}

.template-button-add-grid .form-control,
.template-quick-grid .form-control {
    min-height: 42px;
    background: #fbfcff;
}

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

.template-create-footer {
    border-top: 1px solid #e7edf5;
    padding-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 18px;
}

.template-create-footer a {
    background: #f3f7fb;
    color: #64748b;
}

.template-preview-panel {
    position: sticky;
    top: 92px;
}

.template-preview-panel.is-hidden {
    display: none;
}

.template-preview-card {
    padding: 0;
    overflow: hidden;
}

.template-preview-card-head {
    min-height: 58px;
    border-bottom: 1px solid #e7edf5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    color: #64748b;
}

.template-preview-card-head i {
    color: var(--green);
}

.template-preview-phone {
    width: min(280px, calc(100% - 32px));
    height: 520px;
    margin: 22px auto;
    border: 6px solid #111827;
    border-radius: 34px;
    overflow: hidden;
    background: #efe8df;
}

.template-preview-top {
    min-height: 76px;
    background: #075e54;
    color: #fff;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 10px;
    align-items: center;
    padding: 18px 14px 10px;
}

.template-preview-top strong small {
    display: block;
    opacity: .72;
    font-size: .68rem;
}

.template-preview-body {
    min-height: calc(100% - 76px);
    padding: 16px;
    background-image: radial-gradient(#d9d1c7 1px, transparent 1px);
    background-size: 16px 16px;
}

.template-preview-body > span {
    display: block;
    width: max-content;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: #dff1ff;
    color: #1685d9;
    padding: 4px 10px;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.template-preview-bubble {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    color: #334155;
    font-size: .84rem;
    line-height: 1.45;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .08);
}

.template-preview-bubble b,
.template-preview-bubble small {
    display: block;
    margin-bottom: 10px;
}

.template-preview-bubble small {
    margin: 12px 0 0;
    color: #94a3b8;
}

.template-preview-bubble button {
    width: 100%;
    border: 0;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    color: #0ea5e9;
    padding: 10px 8px;
    font-size: .78rem;
    font-weight: 800;
}

.template-ai-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
}

.template-ai-modal.is-open {
    display: block;
}

.template-ai-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
}

.template-ai-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(94vw, 1120px);
    max-height: calc(100dvh - 44px);
    transform: translate(-50%, -50%);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.template-ai-head {
    min-height: 122px;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 58px;
    gap: 18px;
    align-items: center;
    padding: 28px 34px;
    border-bottom: 1px solid #e7edf5;
}

.template-ai-head > span {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #c8f8dc;
    color: var(--green);
    font-size: 1.75rem;
}

.template-ai-head h2 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 1.85rem;
    font-weight: 850;
}

.template-ai-head p {
    margin: 0;
    color: #64748b;
    font-size: 1.05rem;
    font-weight: 600;
}

.template-ai-head button {
    width: 58px;
    height: 58px;
    border: 1px solid #dfe7f1;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
}

.template-ai-body {
    overflow-y: auto;
    padding: 30px 34px 36px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 34px;
}

.template-ai-body label {
    display: grid;
    gap: 12px;
}

.template-ai-body label span {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.template-ai-body label span b {
    color: #ef4444;
}

.template-ai-body .form-control,
.template-ai-body .form-select {
    min-height: 58px;
    border-color: #dfe7f1;
    border-radius: 12px;
    background-color: #fbfcff;
    color: #111827;
    font-size: 1rem;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .04);
}

.template-ai-body textarea.form-control {
    min-height: 110px;
    padding-top: 18px;
}

.template-ai-full {
    grid-column: 1 / -1;
}

.template-ai-foot {
    min-height: 116px;
    border-top: 1px solid #e7edf5;
    background: #fbfcfe;
    display: grid;
    grid-template-columns: minmax(180px, .55fr) minmax(260px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 24px 34px;
}

.template-ai-foot button {
    min-height: 68px;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.12rem;
    font-weight: 850;
}

.template-ai-foot button:first-child {
    background: #f1f5f9;
    color: #64748b;
}

.template-ai-foot button:last-child {
    background: var(--green);
    color: #fff;
    box-shadow: 0 10px 22px rgba(5, 150, 105, .18);
}

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

    .broadcast-filter-card {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .broadcast-range-tabs {
        flex-wrap: wrap;
    }

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

    .template-preview-panel {
        position: static;
    }

    .template-ai-dialog {
        width: min(96vw, 820px);
    }

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

@media (max-width: 720px) {
    .broadcast-head {
        display: grid;
    }

    .broadcast-add-btn {
        width: 100%;
    }

    .broadcast-metrics {
        grid-template-columns: 1fr;
    }

    .broadcast-table-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .broadcast-pagination {
        margin-left: 0;
    }

    .template-create-page {
        padding: 20px 14px 34px;
    }

    .template-create-head {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
    }

    .template-create-actions {
        grid-column: 1 / -1;
        display: grid;
    }

    .template-create-actions > *,
    .template-create-footer > * {
        width: 100%;
    }

    .template-create-footer {
        display: grid;
    }

    .template-form-grid.two,
    .template-header-grid,
    .template-category-grid,
    .template-media-grid,
    .template-variable-grid,
    .template-button-add-grid,
    .template-quick-grid {
        grid-template-columns: 1fr;
    }

    .template-editor-toolbar {
        overflow-x: auto;
    }

    .template-builder-card {
        padding: 20px;
    }

    .template-ai-dialog {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px);
        border-radius: 18px;
    }

    .template-ai-head {
        min-height: 96px;
        grid-template-columns: 48px minmax(0, 1fr) 46px;
        gap: 12px;
        padding: 20px;
    }

    .template-ai-head > span,
    .template-ai-head button {
        width: 46px;
        height: 46px;
    }

    .template-ai-head h2 {
        font-size: 1.35rem;
    }

    .template-ai-head p {
        font-size: .85rem;
    }

    .template-ai-body {
        padding: 22px 20px;
        gap: 22px;
    }

    .template-ai-foot {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 18px 20px;
    }

    .template-ai-foot button {
        min-height: 54px;
        font-size: .98rem;
    }
}

@media (max-width: 1600px) {
    .campaign-wizard {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .campaign-stepper {
        position: relative;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        grid-template-columns: none;
        gap: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 8px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .campaign-stepper::before,
    .campaign-stepper::after {
        /* content: "";
        position: absolute;
        left: 0;
        bottom: 8px;
        height: 3px;
        border-radius: 999px; */
    }

    .campaign-stepper::before {
        right: 0;
        background: #e8edf2;
    }

    .campaign-stepper::after {
        width: 74%;
        background: var(--green);
    }

    .campaign-step-link {
        min-width: 180px;
        min-height: 70px;
        grid-template-columns: 35px max-content;
        column-gap: 15px;
        padding: 15px;
        scroll-snap-align: start;
    }

    .campaign-step-link.is-active {
        min-width: 200px;
    }

    .campaign-step-link span,
    .campaign-step-link i {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }

    .campaign-step-link i {
        font-size: 1.55rem;
    }

    .campaign-step-link strong {
        font-size: 0.95rem;
    }

    .campaign-step-link small {
        font-size: 0.70rem;
    }

    .campaign-channel-grid,
    .campaign-audience-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    .campaign-live-preview {
        max-width: none;
    }
}

@media (max-width: 1180px) {
    .campaign-mapping-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .campaign-live-preview {
        max-width: 560px;
        width: 100%;
    }
}

@media (max-width: 1600px) {
    .campaign-panel-title {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .campaign-panel-title > span {
        width: 56px;
        height: 56px;
    }

    .campaign-waba-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .campaign-builder-head {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
    }

    .campaign-back-btn {
        width: 42px;
        height: 42px;
    }

    .campaign-wizard-card {
        padding: 18px;
    }

    .campaign-stepper {
        gap: 14px;
        padding-bottom: 26px;
    }

    .campaign-step-link,
    .campaign-step-link.is-active {
        min-width: 320px;
        min-height: 90px;
        grid-template-columns: 54px max-content;
        column-gap: 16px;
        padding: 16px 18px;
    }

    .campaign-step-link span,
    .campaign-step-link i {
        width: 54px;
        height: 54px;
        font-size: 1rem;
    }

    .campaign-step-link i {
        font-size: 1.2rem;
    }

    .campaign-step-link strong {
        font-size: 1rem;
    }

    .campaign-step-link small {
        font-size: .8rem;
    }

    .campaign-channel-grid,
    .campaign-audience-grid,
    .campaign-template-grid {
        grid-template-columns: 1fr;
    }

    .campaign-timeline-options {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .campaign-time-card {
        min-height: 128px;
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 16px;
        padding: 20px;
    }

    .campaign-time-card strong {
        font-size: 1rem;
    }

    .campaign-time-card small {
        font-size: .84rem;
    }

    .campaign-phone-preview {
        width: min(100%, 340px);
        height: 640px;
        border-radius: 38px;
    }

    .campaign-wizard-actions,
    .campaign-wizard-actions > div {
        align-items: stretch;
        flex-direction: column;
    }

    .campaign-nav-btn,
    .campaign-next-btn,
    .campaign-launch-btn,
    .campaign-draft-btn {
        width: 100%;
    }

    .campaign-target-summary,
    .campaign-ready-banner {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}

.inbox-shell {
    height: calc(100dvh - 120px);
    min-height: 620px;
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .05);
}

.team-inbox-shell {
    grid-template-columns: minmax(310px, 380px) minmax(0, 1fr);
}

.inbox-filter-bar {
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px 12px;
}

.overdue-toggle {
    grid-column: span 2;
    font-size: .86rem;
    color: var(--muted);
    display: flex;
    gap: 7px;
    align-items: center;
}

.inbox-list {
    border-right: 1px solid var(--border);
    background: #fbfcfe;
    min-width: 0;
    overflow: hidden;
}

.inbox-search {
    height: 35px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.inbox-search input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 40px;
    padding: 0 10px;
}

#conversationList {
    /* height: calc(100% - 62px); */
    overflow: auto;
}

.conversation-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    text-align: left;
}

.conversation-item:hover,
.conversation-item.is-active {
    background: #eefaf3;
}

.conversation-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dcfce7;
    color: #166534;
    font-weight: 700;
    flex: 0 0 auto;
}

.conversation-main {
    min-width: 0;
}

.conversation-name,
.conversation-preview {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conversation-name {
    font-weight: 700;
}

.conversation-preview,
.conversation-meta {
    color: var(--muted);
    font-size: .75rem;
}

.conversation-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 3px;
}

.priority-low {
    background: #eef2ff;
    color: #3730a3;
}

.priority-medium {
    background: #f1f5f9;
    color: #334155;
}

.priority-high {
    background: #fef3c7;
    color: #92400e;
}

.priority-urgent {
    background: #fee2e2;
    color: #991b1b;
}

.conversation-meta {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.unread-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
}

.chat-panel {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    background: #eef2f0;
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.team-chat-header {
    min-height: 74px;
    flex-wrap: wrap;
}

.chat-controls {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(130px, 150px) 110px 110px minmax(150px, 180px) repeat(3, auto);
    gap: 8px;
    align-items: center;
}

.chat-controls .btn {
    white-space: nowrap;
}

.chat-identity {
    min-width: 0;
    flex: 1 1 260px;
}

.chat-control-field {
    display: grid;
    gap: 3px;
    margin: 0;
}

.chat-control-field span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

.inbox-panel-toggle.is-active {
    color: #166534;
    border-color: #86efac;
    background: #f0fdf4;
}

.template-modal-dialog {
    --bs-modal-width: min(760px, calc(100vw - 28px));
}

.template-modal-dialog .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.template-modal-header {
    align-items: flex-start;
    gap: 14px;
    background: #f8fbf9;
    border-bottom: 1px solid #e4ece8;
    padding: 18px 20px;
}

.template-modal-title {
    display: flex;
    gap: 12px;
    min-width: 0;
}

.template-modal-title > span {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #dcfce7;
    color: #15803d;
    flex: 0 0 auto;
}

.template-modal-title h5 {
    font-weight: 700;
    margin: 0;
}

.template-modal-title small {
    display: block;
    color: var(--muted);
    font-weight: 650;
    margin-top: 3px;
    line-height: 1.45;
}

.template-field-block {
    background: #fff;
    border: 1px solid #e4ece8;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.template-field-block .form-label {
    font-weight: 850;
}

.template-autofill-card {
    border: 1px solid #d8f3e4;
    background: #f1fff7;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.template-autofill-card > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #166534;
}

.template-autofill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.template-autofill-tags span {
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ccefdc;
    color: #166534;
    padding: 5px 9px;
    font-size: .8rem;
    font-weight: 750;
}

.template-variable-fields {
    display: grid;
    gap: 10px;
}

.template-variable-row {
    display: grid;
    grid-template-columns: minmax(160px, .8fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: center;
    border: 1px solid #e4ece8;
    background: #fbfcfe;
    border-radius: 10px;
    padding: 12px;
}

.template-variable-row .form-label {
    margin: 0;
    font-weight: 850;
}

.template-variable-row small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.template-ready-state {
    min-height: 72px;
    border: 1px dashed #badfcb;
    border-radius: 10px;
    background: #fbfffd;
    color: #166534;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 850;
    text-align: center;
    padding: 14px;
}

.template-modal-footer {
    border-top: 1px solid #e4ece8;
    background: #fff;
    padding: 14px 20px;
}

.team-chat-body {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
}

.team-chat-body .chat-messages {
    min-height: 0;
}

.notes-panel {
    border-left: 1px solid var(--border);
    background: #fff;
    padding: 14px;
    overflow: auto;
}

.ai-sidebar {
    border-left: 1px solid var(--border);
    background: #fff;
    padding: 14px;
    overflow: auto;
}

.inbox-side-panel {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 6;
    width: min(360px, 92vw);
    transform: translateX(105%);
    transition: transform .18s ease;
    box-shadow: -18px 0 38px rgba(15, 23, 42, .12);
}

.inbox-side-panel.is-open {
    transform: translateX(0);
}

.inbox-side-panel .panel-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    padding-bottom: 10px;
}

.ai-actions,
.rewrite-tools {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

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

.ai-block {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-suggestion {
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfcfe;
    padding: 10px;
}

.ai-suggestion span {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.note-form textarea {
    resize: vertical;
}

.notes-list,
.events-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.note-item,
.event-item {
    border: 1px solid var(--border);
    background: #fbfcfe;
    border-radius: 8px;
    padding: 10px;
}

.note-item small,
.event-item small {
    display: block;
    color: var(--muted);
    margin-top: 5px;
}

.chat-title {
    font-weight: 600;
}

.chat-subtitle,
.reply-note {
    color: var(--muted);
    font-size: .80rem;
}

.chat-messages {
    overflow: auto;
    padding: 18px;
    padding-bottom: 28px;
}

.message-row {
    display: flex;
    margin-bottom: 10px;
}

.message-row.is-outgoing {
    justify-content: flex-end;
}

.message-bubble {
    max-width: min(620px, 82%);
    border-radius: 8px;
    padding: 9px 11px 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.message-row.is-outgoing .message-bubble {
    background: #dcfce7;
}

.message-meta {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    color: var(--muted);
    font-size: .75rem;
    margin-top: 3px;
}

.chat-reply {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid var(--border);
}

.chat-reply .btn {
    min-width: 96px;
    white-space: nowrap;
}

.reply-note {
    position: sticky;
    bottom: 0;
    z-index: 8;
    min-height: 26px;
    background: #fff;
    padding: 0 12px 8px;
}

@media (max-width: 1200px) {
    .team-inbox-shell {
        grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    }

    .chat-controls {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    .chat-controls .follow-up-field {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .inbox-shell,
    .team-inbox-shell {
        height: calc(100dvh - 104px);
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 260px minmax(0, 1fr);
    }

    .inbox-list {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    #conversationList {
        height: calc(100% - 116px);
    }

    .chat-panel {
        min-height: 0;
    }

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

    .chat-controls .follow-up-field {
        grid-column: span 2;
    }

    .team-chat-header {
        align-items: flex-start;
    }
}

.form-panel {
    max-width: 920px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #eefaf3, #f8fafc);
    padding: 20px;
}

.auth-card {
    width: min(100%, 440px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 26px;
    box-shadow: 0 20px 60px rgba(16, 24, 40, .08);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    margin-bottom: 22px;
}

.auth-brand i {
    color: #25d366;
    font-size: 1.5rem;
}

.brand img,
.auth-brand img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.auth-links {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .92rem;
}

.workflow {
    display: grid;
    gap: 16px;
}

.workflow-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.workflow-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.workflow-body {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.workflow-body h3 {
    font-size: .98rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.onboarding-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .05);
}

.onboarding-eyebrow {
    color: #15803d;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.onboarding-hero h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 4px 0 6px;
}

.onboarding-hero p,
.step-copy {
    color: var(--muted);
    margin: 0;
}

.onboarding-progress {
    width: 190px;
    flex: 0 0 190px;
}

.onboarding-progress strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
}

.onboarding-progress span {
    display: block;
    color: var(--muted);
    font-size: .84rem;
    margin-bottom: 8px;
}

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

.onboarding-status {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}

.onboarding-status i,
.step-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.onboarding-status.is-done i {
    background: #dcfce7;
    color: #166534;
}

.onboarding-status.is-pending i {
    background: #fef3c7;
    color: #92400e;
}

.onboarding-status span,
.step-heading span {
    color: var(--muted);
    display: block;
    font-size: .8rem;
    font-weight: 700;
}

.onboarding-status strong {
    display: block;
    font-weight:650;
}

.onboarding-step-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .05);
}

.onboarding-step-card.highlight {
    border-color: #bbf7d0;
}

.onboarding-step-card.compact {
    margin-bottom: 0;
}

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

.step-icon {
    background: #ecfdf5;
    color: #15803d;
    font-size: 1.1rem;
}

.step-heading {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    margin-bottom: 12px;
}

.step-heading h2 {
    font-size: 0.90rem;
    font-weight: 650;
    margin: 2px 0 0;
}

.step-copy {
    margin-bottom: 14px;
}

.marketplace-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .05);
}

.marketplace-hero span {
    color: var(--green);
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.marketplace-hero h1 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 4px 0 3px;
}

.marketplace-hero p {
    color: var(--muted);
    margin: 0;
    font-size: 0.85rem;
}

.industry-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.industry-tabs a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #354052;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.75rem;
}

.industry-tabs a.active,
.industry-tabs a:hover,
.industry-tabs a:focus {
    background: var(--green-soft);
    border-color: rgba(7, 167, 121, .25);
    color: var(--green);
}

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

.marketplace-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .05);
}

.marketplace-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.marketplace-card-top span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 500;
}

.marketplace-card-top h2 {
    font-size: 0.90rem;
    font-weight: 550;
    margin: 2px 0 0;
}

.my-templates-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.my-templates-grid {
    align-items: stretch;
}

.my-templates-grid .empty-state {
    grid-column: 1 / -1;
}

.my-template-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.my-template-card .marketplace-card-top {
    align-items: flex-start;
}

.my-template-card .marketplace-card-top > div {
    min-width: 0;
}

.my-template-card .marketplace-card-top h2,
.my-template-card .marketplace-card-top p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-template-card .marketplace-card-top p {
    color: var(--muted);
    font-size: .82rem;
    margin: 3px 0 0;
}

.my-template-card .status-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.template-status-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: .92rem;
}

.template-status-icon.status-approved {
    background: #dcfce7;
    color: #079669;
}

.template-status-icon.status-rejected {
    background: #fee2e2;
    color: #dc2626;
}

.template-status-icon.status-pending {
    background: #fff7ed;
    color: #f59e0b;
}

.template-status-icon.status-draft {
    background: #eef2f7;
    color: #64748b;
}

.my-template-card .wa-preview {
    flex: 1;
    min-height: 158px;
}

.my-template-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.my-template-meta div {
    min-width: 0;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    padding: 9px 10px;
    background: #f8fafc;
}

.my-template-meta span {
    display: block;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.my-template-meta strong {
    display: block;
    color: #1f2937;
    font-size: .85rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-template-alert {
    margin-top: 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 10px 12px;
}

.my-template-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.my-template-actions form,
.my-template-actions .btn {
    min-width: 0;
    width: 100%;
}

.my-template-actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-inline: 10px;
    font-size: .86rem;
}

.templates-sync-form {
    flex: 0 0 auto;
}

.template-sort-form {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.template-sort-form label {
    margin: 0;
    color: #66758c;
    font-size: .78rem;
    font-weight: 600;
}

.template-sort-form .form-select {
    width: 132px;
    min-height: 32px;
    padding: 4px 32px 4px 10px;
    border-radius: 8px;
    border-color: var(--border);
    color: #354052;
    font-size: .78rem;
    font-weight: 600;
}

.templates-grid .empty-state {
    grid-column: 1 / -1;
}

.template-sync-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.template-sync-card .marketplace-card-top {
    align-items: flex-start;
}

.template-sync-card .marketplace-card-top > div {
    min-width: 0;
}

.template-sync-card .marketplace-card-top h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-sync-card .status-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.template-sync-card .wa-preview {
    flex: 1;
    min-height: 158px;
}

.template-card-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
}

.template-card-meta div {
    min-width: 0;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    padding: 9px 10px;
    background: #f8fafc;
}

.template-card-meta span {
    display: block;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.template-card-meta strong {
    display: block;
    color: #1f2937;
    font-size: .75rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-component-details {
    margin-top: 12px;
}

.template-component-details summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    color: #526072;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 600;
    list-style: none;
}

.template-component-details summary::-webkit-details-marker {
    display: none;
}

.template-component-details[open] summary {
    border-color: rgba(7, 167, 121, .25);
    background: var(--green-soft);
    color: var(--green);
}

.template-component-details .template-components {
    max-height: 220px;
    margin: 10px 0 0;
    overflow: auto;
}

.wa-preview {
    background: #e7f4ed;
    border-radius: 8px;
    padding: 5px;
    display: grid;
    gap: 5px;
}

.wa-preview-header,
.wa-preview-body,
.wa-preview-footer,
.wa-preview-button {
    background: #fff;
    border-radius: 8px;
    padding: 5px 12px;
}

.wa-preview-header {
    font-weight: 550;
}

.wa-preview-placeholder {
    color: #64748b;
    font-size: .82rem;
    font-weight: 500;
}

.wa-preview-media,
.template-preview-media {
    width: 100%;
    max-height: 210px;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #dbe7ef;
}

.wa-preview-document,
.template-preview-document {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #dbe7ef;
    color: #334155;
    padding: 10px 12px;
    font-size: .8rem;
    font-weight: 650;
    text-decoration: none;
}

.wa-preview-document span,
.template-preview-document span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-preview-body {
    line-height: 1.40;
    font-size: 0.80rem;
    height: 150px;
    overflow: auto;
}

.wa-preview-footer {
    color: var(--muted);
    font-size: .82rem;
}

.wa-preview-button {
    color: var(--green);
    text-align: center;
    font-weight: 550;
    font-size: 0.8rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: .78rem;
    font-weight: 850;
}

.status-draft {
    background: #eef2f7;
    color: #526072;
}

.status-pending {
    background: #fff7ed;
    color: #9a3412;
}

.status-approved {
    background: #dcfce7;
    color: #166534;
}

.status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.brand-preview {
    display: grid;
    gap: 16px;
}

.brand-preview-top {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-secondary);
}

.brand-preview-top img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.brand-preview-top i {
    font-size: 2rem;
    color: var(--brand-primary);
}

.brand-preview-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    background: #fff;
}

.brand-preview-card h3 {
    font-size: 1rem;
    font-weight: 700;
}

.btn-success,
.bg-success,
.progress-bar.bg-success {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.text-success {
    color: var(--green) !important;
}

.app-footer {
    margin-left: var(--sidebar-width);
    padding: 12px 24px;
    color: var(--muted);
    background: var(--surface-soft);
    border-top: 1px solid var(--border);
    font-size: .86rem;
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .main {
        margin-left: 0;
        width: 100%;
    }

    .app-footer {
        margin-left: 0;
    }

    .topbar {
        padding: 0 14px;
    }

    .content {
        padding: 16px;
    }

    .contacts-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .contacts-hero-actions {
        justify-content: flex-start;
    }

    .contact-summary-grid {
        grid-template-columns: 1fr;
    }

    .contacts-help-card {
        position: static;
    }

    .contacts-table-panel .table-responsive {
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .page-subtitle {
        display: none;
    }

    .toolbar .btn {
        flex: 1 1 auto;
    }

    .contact-filters,
    .contact-filters .form-select {
        width: 100%;
    }

    .contacts-hero-actions .btn,
    .contacts-workspace .contact-filters .btn {
        width: 100%;
    }

    .filter-intro {
        width: 100%;
    }

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

    .onboarding-hero,
    .onboarding-step-card {
        padding: 14px;
    }

    .onboarding-hero {
        display: grid;
    }

    .onboarding-progress {
        width: 100%;
        flex-basis: auto;
    }

    .onboarding-status-grid,
    .onboarding-step-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-step-card {
        grid-template-columns: 1fr;
    }

    .step-heading {
        display: grid;
    }

    .marketplace-hero {
        display: grid;
        padding: 14px;
    }

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

    .my-templates-hero-actions,
    .my-templates-hero-actions .btn,
    .templates-sync-form,
    .templates-sync-form .btn {
        width: 100%;
    }

    .template-sort-form {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

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

    .inbox-shell {
        height: calc(100dvh - 92px);
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 230px minmax(0, 1fr);
        border-radius: 0;
    }

    .inbox-list {
        height: auto;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    #conversationList {
        height: calc(100% - 116px);
    }

    .chat-panel {
        min-height: 0;
    }

    .team-inbox-shell {
        grid-template-columns: 1fr;
    }

    .team-chat-body {
        grid-template-columns: 1fr;
    }

    .notes-panel,
    .ai-sidebar {
        border-left: 1px solid var(--border);
        border-top: 0;
        max-height: none;
    }

    .chat-controls {
        grid-template-columns: 1fr 1fr;
        width: 100%;
        margin-left: 0;
    }

    .chat-controls .follow-up-field {
        grid-column: span 2;
    }

    .chat-controls .btn {
        min-height: 34px;
    }

    .team-chat-header {
        flex-wrap: wrap;
        height: auto;
    }

    .chat-reply {
        grid-template-columns: minmax(0, 1fr) 82px;
        gap: 8px;
        padding: 10px;
    }

    .chat-reply .btn {
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

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

    .template-modal-footer .btn {
        flex: 1;
    }

    .automation-action-row {
        grid-template-columns: 1fr;
    }

    .auth-links {
        flex-direction: column;
    }
}

/* WAMax-style shell and dashboard refresh */
:root {
    --sidebar-width: 270px;
    --sidebar-collapsed-width: 90px;
    --surface-soft: #f7f9fb;
    --border: #e8edf3;
    --text: #172033;
    --muted: #575f6b;
    --green: #07a779;
    --green-soft: #e8fbf5;
    --orange: #ff9d2e;
    --blue: #4d89ff;
    --purple: #8b67ff;
    --pink: #ff6f98;
}

body {
    background: var(--surface-soft);
    color: var(--text);
    font-size: 14px;
}

.app-shell {
    align-items: stretch;
}

.sidebar {
    background: #fff;
    color: var(--text);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 26px rgba(16, 24, 40, .025);
    padding: 0 5px 10px;
    overflow-y: auto;
    transition: width .22s ease, padding .22s ease;
}

.sidebar nav {
    padding-top: 0px;
}

.sidebar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    margin: 0 0px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
}

.brand {
    color: #0b1328;
    font-size: 1.3rem;
    letter-spacing: 0;
    margin-bottom: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 700;
    line-height: 1;
}

.brand:hover,
.brand:focus {
    color: #0b1328;
}

.brand i {
    color: var(--green);
    font-size: 2.2rem;
    line-height: 1;
}

.brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.sidebar-collapse-btn {
    position: fixed;
    top: 10px;
    left: calc(var(--sidebar-width) - 16px);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 3px;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(7, 167, 121, .26);
    z-index: 45;
    transition: left .22s ease, background .18s ease, box-shadow .18s ease;
}

.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus {
    background: #06966d;
    color: #fff;
    box-shadow: 0 12px 26px rgba(7, 167, 121, .32);
}

.sidebar-collapse-btn i {
    font-size: 1.0rem;
    font-weight: 700;
}

body.sidebar-collapsed {
    --sidebar-width: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .sidebar {
    padding: 0 16px 28px;
    overflow-x: hidden;
}

body.sidebar-collapsed .sidebar-head {
    justify-content: center;
    min-height: 80px;
    margin: 0 -16px;
    padding: 0 16px;
}

body.sidebar-collapsed .brand {
    justify-content: center;
    flex: 0 0 auto;
}

body.sidebar-collapsed .brand span,
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .nav-section-toggle span,
body.sidebar-collapsed .nav-section-toggle .bi-chevron-down,
body.sidebar-collapsed .sidebar .nav-link span,
body.sidebar-collapsed .social-setup-link span,
body.sidebar-collapsed .social-setup-link small,
body.sidebar-collapsed .social-setup-sub-link span,
body.sidebar-collapsed .social-platform-children {
    display: none;
}

body.sidebar-collapsed .brand i {
    font-size: 2.2rem;
}

body.sidebar-collapsed .brand img {
    width: 58px;
    height: 58px;
}

body.sidebar-collapsed .sidebar .nav-link,
body.sidebar-collapsed .social-setup-link,
body.sidebar-collapsed .nav-section-toggle {
    width: 40px;
    min-height: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    justify-content: center;
    display: flex;
    border-radius: 16px;
}

body.sidebar-collapsed .nav-section-toggle {
    margin-top: 10px;
    margin-bottom: 10px;
    background: transparent;
}

body.sidebar-collapsed .nav-section-toggle > i:first-child {
    display: inline-flex;
    font-size: 1.45rem;
}

body.sidebar-collapsed .nav-collapse {
    gap: 8px;
}

body.sidebar-collapsed .social-platform-group {
    margin-bottom: 0;
}

.nav-section-label {
    color: #9aa7ba;
    font-size: .80rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 15px 24px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-section-label::after {
    content: "\F282";
    color: #9aa7ba;
    font-family: "bootstrap-icons";
    font-size: .9rem;
    font-weight: 400;
}

.nav-section-toggle {
    width: calc(100% - 4px);
    min-height: 44px;
    margin: 0px 2px 0px;
    padding: 0 24px;
    border: 0;
    background: transparent;
    color: #9aa7ba;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    border-radius: 8px;
    font-size: .80rem;
    font-weight: 600;
    text-transform: uppercase;
}

.nav-section-toggle > i:first-child {
    display: none;
}

.nav-section-toggle:hover,
.nav-section-toggle:focus {
    background: #f4f7fb;
    color: #526072;
}

.nav-section-toggle i {
    transition: transform .18s ease;
}

.nav-section-toggle.is-collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}

.nav-collapse {
    display: grid;
    gap: 0;
}

.nav-collapse:not(.is-open) {
    display: none;
}

.social-setup-link {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(7, 167, 121, .28);
    border-radius: 14px;
    background: var(--green-soft);
    color: var(--green);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
}

.social-setup-link i {
    color: inherit;
    font-size: 1.35rem;
}

.social-setup-link:hover,
.social-setup-link:focus,
.social-setup-link.is-active {
    background: var(--green);
    color: #fff;
}

.social-setup-link small {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.social-setup-link:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.social-setup-link.facebook,
.social-setup-link.instagram {
    justify-content: flex-start;
}

.social-platform-group {
    margin-bottom: 6px;
}

.social-platform-group .social-setup-link {
    margin-bottom: 0;
}

.social-platform-children {
    display: grid;
    gap: 4px;
    margin: 7px 0 0 24px;
    padding-left: 12px;
    border-left: 2px solid rgba(7, 167, 121, .18);
}

.sidebar::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
}

.sidebar {
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #07A779;
    border: 0;
    border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #495057;
}
.social-setup-sub-link {
    min-height: 38px;
    border-radius: 10px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    padding: 0 12px;
    font-weight: 500;
    text-decoration: none;
}

.social-setup-sub-link i {
    color: var(--green);
}

.social-setup-sub-link:hover,
.social-setup-sub-link:focus,
.social-setup-sub-link.is-active {
    background: var(--green-soft);
    color: var(--green);
}

.sidebar .nav-link {
    color: #111827;
    border-radius: 14px;
    min-height: 40px;
    padding: 0 24px;
    gap: 18px;
    font-weight: 520;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.sidebar .nav-link i {
    color: #354052;
    font-size: 1.38rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus,
.sidebar .nav-link.is-active {
    background: var(--green-soft);
    color: var(--green);
}

.sidebar .nav-link:hover i,
.sidebar .nav-link:focus i,
.sidebar .nav-link.is-active i {
    color: var(--green);
}

.main {
    min-height: 100vh;
}

.topbar {
    min-height: 64px;
    padding: 0 22px;
    gap: 12px;
    background: #fff;
}

.top-search {
    position: relative;
    min-height: 42px;
    flex: 1 1 520px;
    max-width: 620px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f9fbfe;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: var(--muted);
}

.top-search input {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    min-width: 0;
    font-size: .9rem;
}

.quick-find-results {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1050;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
    padding: 8px;
}

.quick-find-results.is-open {
    display: grid;
    gap: 4px;
}

.quick-find-results a,
.quick-find-empty {
    min-height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    color: #334155;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 650;
}

.quick-find-results a:hover,
.quick-find-results a:focus {
    background: #eefaf5;
    color: var(--green);
}

.quick-find-results i {
    color: #8ca0b5;
}

.quick-find-empty {
    color: var(--muted);
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.top-chip,
.top-icon,
.profile-btn {
    min-height: 38px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 9px;
    color: #334155;
    font-weight: 700;
    text-decoration: none;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .04);
}

.top-chip {
    display: inline-flex;
}

.top-icon {
    width: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.top-icon:hover,
.top-icon:focus {
    border-color: rgba(5, 150, 105, .35);
    background: #eefaf5;
    color: var(--green);
}

.top-icon.is-spinning i {
    animation: wamaxSpin .6s linear infinite;
}

@keyframes wamaxSpin {
    to {
        transform: rotate(360deg);
    }
}

.flag-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: inline-block;
    background: linear-gradient(#b91c1c 0 33%, #fff 33% 66%, #1d4ed8 66%);
}

.profile-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    padding: 0;
    border-color: var(--green);
}

.profile-btn::after {
    display: none;
}

.account-menu {
    width: min(250px, calc(100vw - 28px));
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
    padding: 0;
    overflow: hidden;
}

.account-menu-head {
    margin: 0;
    padding: 14px;
    border-bottom: 1px solid #e8eef5;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 1px;
    align-items: center;
}

.account-menu-head > span {
        width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.account-menu-head strong,
.account-menu-head small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-head strong {
    color: #172033;
    font-size: 0.85rem;
    font-weight: 500;
}

.account-menu-head small {
    color: #64748b;
    font-size: .75rem;
    margin-top: 0px;
}

.account-menu-link,
.account-menu-logout {
    min-height: 35px;
    padding: 0 18px;
    display: inline-grid;
    align-items: center;
    color: #334155;
    font-size: .85rem;
    font-weight: 400;
    text-align: center;
}

.account-menu-link:hover,
.account-menu-link:focus {
    color: var(--green);
    background: #eefaf5;
}

.account-menu form {
    margin: 0;
    padding: 0px;
    border-top: 1px solid #e8eef5;
}

.account-menu-logout {
   width: 100%;
    /* border: 1px solid #e8eef5; */
    border-radius: 12px;
    color: #dc2626;
    background: #fff;
    gap: 10px;
    display: block;
}

.account-menu-logout:hover,
.account-menu-logout:focus {
    color: #dc2626;
    background: #fff5f5;
}

body.theme-dark {
    --surface: #111827;
    --border: #243244;
    --muted: #94a3b8;
    background: #0b1220;
    color: #dbe4ef;
}

body.theme-dark .main,
body.theme-dark .content {
    background: #0b1220;
}

body.theme-dark .topbar,
body.theme-dark .sidebar,
body.theme-dark .panel,
body.theme-dark .metric-card,
body.theme-dark .panel-soft,
body.theme-dark .usage-card,
body.theme-dark .top-chip,
body.theme-dark .top-icon,
body.theme-dark .quick-find-results,
body.theme-dark .account-menu,
body.theme-dark .account-menu-logout {
    background: #111827;
    color: #dbe4ef;
    border-color: #243244;
}

body.theme-dark .top-search,
body.theme-dark .top-search input,
body.theme-dark .form-control,
body.theme-dark .form-select {
    background: #0f172a;
    color: #e5edf7;
    border-color: #2b3a4f;
}

body.theme-dark .quick-find-results a,
body.theme-dark .quick-find-empty,
body.theme-dark .account-menu-link,
body.theme-dark .account-menu-head strong {
    color: #e5edf7;
}

body.theme-dark .quick-find-results a:hover,
body.theme-dark .account-menu-link:hover,
body.theme-dark .top-icon:hover {
    background: rgba(5, 150, 105, .16);
}

body.theme-dark .account-menu-head,
body.theme-dark .account-menu form {
    border-color: #243244;
}

.content {
    padding: 20px 20px 40px;
}

.panel,
.metric-card,
.panel-soft,
.usage-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.analytics-page {
    max-width: 1240px;
    margin: 0 auto;
}

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

.analytics-heading h1 {
    font-size: 1.45rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 4px;
}

.analytics-heading p {
    color: var(--muted);
    margin: 0;
    font-weight: 650;
}

.analytics-heading .form-select {
    width: 150px;
    border-radius: 9px;
    border-color: var(--border);
    font-size: .88rem;
}

.dashboard-hero-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) minmax(260px, .95fr) minmax(280px, 1.1fr);
    gap: 18px;
    align-items: stretch;
}

.welcome-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.workspace-label {
    background: linear-gradient(135deg, #0fae7c, #37bb8d);
    color: #fff;
    font-weight: 700;
    padding: 18px 20px 12px;
}

.welcome-card > .pill,
.welcome-card > h2,
.welcome-card > p {
    background: linear-gradient(135deg, #0fae7c, #37bb8d);
    color: #fff;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.welcome-card > .pill {
    display: block;
    width: fit-content;
    margin-left: 20px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .08em;
}

.welcome-card h2 {
    font-size: 1.65rem;
    font-weight: 700;
    padding-top: 10px;
}

.welcome-card h2 span {
    font-size: 1.2rem;
}

.welcome-card > p {
    padding-bottom: 18px;
    font-weight: 700;
}

.quick-access-panel {
    padding: 16px 18px;
}

.mini-heading {
    color: #46556a;
    font-size: .78rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}

.quick-access-panel a {
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: #243043;
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    margin-top: 8px;
}

.quick-access-panel a > i:first-child {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #edf4ff;
    color: var(--blue);
    display: grid;
    place-items: center;
}

.quick-access-panel small,
.panel-title-row small {
    display: block;
    color: var(--muted);
    font-weight: 400;
    font-size: .78rem;
}

.panel-soft {
    padding: 20px;
    position: relative;
}

.status-badge {
    position: absolute;
    right: 18px;
    top: 18px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green);
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
}

.large-icon,
.title-icon,
.usage-card-top span {
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.large-icon {
    width: 58px;
    height: 58px;
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.large-icon.success,
.title-icon.green {
    background: var(--green-soft);
    color: var(--green);
}

.large-icon.warning,
.title-icon.orange {
    background: #fff3df;
    color: var(--orange);
}

.integrate-card h2,
.plan-card h2 {
    font-size: 0.90rem;
    font-weight: 700;
}

.integrate-card p,
.plan-card p {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 650;
}

.connect-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}

.connect-options a {
    color: var(--green);
    background: var(--green-soft);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: .78rem;
}

.connect-options a + a {
    color: var(--orange);
    background: #fff6e8;
}

.plan-price {
    font-size: 2rem;
    font-weight: 700;
    margin: 16px 0 2px;
}

.plan-price small {
    color: var(--muted);
    font-size: .8rem;
}

.renewal-line,
.usage-bar {
    height: 7px;
    background: #edf2f7;
    border-radius: 99px;
    overflow: hidden;
}

.renewal-line {
    margin-top: 22px;
}

.renewal-line span,
.usage-bar span {
    display: block;
    height: 100%;
    background: var(--orange);
}

.renewal-meta {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 16px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.renewal-meta strong {
    color: var(--green);
}

.dashboard-section-title {
    font-size: 1.08rem;
    font-weight: 700;
    margin: 26px 0 14px;
}

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

.usage-card {
    min-height: 150px;
    padding: 20px;
    background:
        radial-gradient(circle at top right, rgba(7, 167, 121, .07), transparent 34%),
        #fff;
}

.usage-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #7f8da4;
    font-size: .86rem;
    font-weight: 700;
}

.usage-card-top span {
    width: 38px;
    height: 38px;
    background: var(--green-soft);
    color: var(--green);
}

.usage-number {
    margin-top: 20px;
    font-size: 1.85rem;
    font-weight: 700;
}

.usage-number small {
    color: #9aa7ba;
    font-size: .9rem;
    margin-left: 4px;
}

.usage-bar {
    margin-top: 12px;
}

.usage-percent {
    margin-top: 10px;
    text-transform: uppercase;
    color: var(--green);
    font-size: .68rem;
    font-weight: 700;
}

.tone-orange .usage-card-top span,
.title-icon.orange {
    background: #fff3df;
    color: var(--orange);
}

.tone-orange .usage-bar span {
    background: var(--orange);
}

.tone-orange .usage-percent {
    color: var(--orange);
}

.tone-blue .usage-card-top span {
    background: #eef4ff;
    color: var(--blue);
}

.tone-blue .usage-bar span {
    background: var(--blue);
}

.tone-blue .usage-percent {
    color: var(--blue);
}

.tone-purple .usage-card-top span,
.title-icon.purple {
    background: #f0edff;
    color: var(--purple);
}

.tone-purple .usage-bar span {
    background: var(--purple);
}

.tone-purple .usage-percent {
    color: var(--purple);
}

.tone-pink .usage-card-top span {
    background: #fff0f5;
    color: var(--pink);
}

.tone-pink .usage-bar span {
    background: var(--pink);
}

.tone-pink .usage-percent {
    color: var(--pink);
}

.chart-panel {
    margin-top: 24px;
}

.panel-title-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 14px;
    margin-bottom: 18px;
}

.panel-title-row > div {
    /* display: grid; */
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
}

.panel-title-row strong {
    font-size: 1.05rem;
    font-weight: 500;
}

.title-icon {
    width: 42px;
    height: 42px;
    grid-row: span 2;
}

.panel-title-row a,
.live-pill {
    color: var(--green);
    background: var(--green-soft);
    border-radius: 999px;
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    padding: 0 10px;
}

.live-pill {
    font-size: .72rem;
    text-transform: uppercase;
}

.dashboard-lower-grid,
.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.55fr);
    gap: 18px;
    margin-top: 22px;
}

.dashboard-bottom-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
}

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

.mini-metric-grid.one-column {
    grid-template-columns: 1fr;
}

.mini-metric-grid div {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    min-height: 132px;
    background: #fff;
}

.mini-metric-grid i {
    color: var(--orange);
}

.mini-metric-grid span {
    display: block;
    color: var(--muted);
    font-weight: 750;
    margin-top: 8px;
    font-size: .82rem;
}

.mini-metric-grid strong {
    display: block;
    font-size: 1.65rem;
    font-weight: 700;
    margin-top: 4px;
}

.sparkline {
    width: 100%;
    height: 38px;
    margin-top: 8px;
}

.template-status-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.template-status-pills span {
    border-radius: 999px;
    padding: 7px 12px;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
}

.template-status-pills .approved {
    background: var(--green-soft);
    color: var(--green);
}

.template-status-pills .rejected {
    background: #fff1f2;
    color: #e11d48;
}

.dashboard-table {
    font-size: .86rem;
}

.dashboard-table th {
    color: #667085;
    font-size: .78rem;
}

.dashboard-table td {
    font-weight: 700;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9bd8bf;
    display: inline-block;
    margin-right: 8px;
}

/* Realistic dashboard */
.dashboard-page {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dashboard-head h1 {
    color: #111827;
    font-size: 1.28rem;
    font-weight: 650;
    margin: 0 0 4px;
}

.dashboard-head p {
    color: #64748b;
    font-size: .86rem;
    font-weight: 450;
    margin: 0;
}

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

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-summary-card,
.dashboard-panel,
.dashboard-usage-card {
    border: 1px solid #e7edf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}

.dashboard-summary-card {
    min-height: 118px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
}

.dashboard-summary-card > span,
.dashboard-usage-card-head span,
.health-list i,
.next-action-list a > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f3f7f5;
    color: var(--green);
}

.dashboard-summary-card strong {
    color: #111827;
    display: block;
    font-size: 1.28rem;
    font-weight: 650;
    line-height: 1.1;
}

.dashboard-summary-card p {
    color: #334155;
    font-size: .82rem;
    font-weight: 550;
    margin: 8px 0 2px;
}

.dashboard-summary-card small {
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 450;
}

.dashboard-main-grid,
.dashboard-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
    gap: 16px;
}

.dashboard-panel {
    padding: 18px;
}

.dashboard-panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-panel-title h2 {
    color: #172033;
    font-size: .98rem;
    font-weight: 650;
    margin: 0 0 4px;
}

.dashboard-panel-title p {
    color: #7c8ba1;
    font-size: .78rem;
    font-weight: 450;
    margin: 0;
}

.dashboard-panel-title > a,
.dashboard-panel-actions a {
    color: var(--green);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
}

.dashboard-state {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}

.dashboard-state.is-ok {
    background: #e7f8ef;
    color: #078e60;
}

.dashboard-state.is-warn {
    background: #fff7ed;
    color: #b45309;
}

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

.health-list div {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    padding: 10px;
}

.health-list span {
    color: #64748b;
    min-width: 0;
    font-size: .78rem;
    font-weight: 450;
}

.health-list strong {
    color: #172033;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-panel-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    border-top: 1px solid #eef2f7;
    margin-top: 14px;
    padding-top: 14px;
}

.dashboard-plan-price {
    color: #172033;
    font-size: .95rem;
    font-weight: 650;
    white-space: nowrap;
}

.dashboard-plan-meter {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.dashboard-plan-meter div:first-child,
.dashboard-plan-meta div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 450;
}

.dashboard-plan-meter strong,
.dashboard-plan-meta strong {
    color: #172033;
    font-weight: 600;
}

.dashboard-plan-meta {
    display: grid;
    gap: 10px;
    margin: 14px 0 16px;
}

.dashboard-usage-panel {
    padding-bottom: 16px;
}

.dashboard-usage-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-usage-card {
    min-height: 128px;
    padding: 14px;
}

.dashboard-usage-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-usage-card-head strong {
    color: #172033;
    font-size: .78rem;
    font-weight: 600;
}

.dashboard-usage-values {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 22px 0 10px;
}

.dashboard-usage-values b {
    color: #111827;
    font-size: 1.16rem;
    font-weight: 650;
}

.dashboard-usage-values small {
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 450;
}

.dashboard-mini-table {
    display: grid;
    gap: 0;
}

.dashboard-mini-table-head,
.dashboard-mini-table > div:not(.dashboard-mini-table-head) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px 90px;
    gap: 12px;
    align-items: center;
}

.dashboard-mini-table-head {
    color: #94a3b8;
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 10px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-mini-table > div:not(.dashboard-mini-table-head) {
    min-height: 46px;
    border-bottom: 1px solid #f4f6f9;
    color: #334155;
    font-size: .8rem;
    font-weight: 450;
}

.dashboard-mini-table > div span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-status {
    width: fit-content;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: .7rem;
    font-weight: 600;
}

.mini-status.status-approved {
    background: #e7f8ef;
    color: #078e60;
}

.mini-status.status-rejected {
    background: #fee2e2;
    color: #b91c1c;
}

.mini-status.status-pending {
    background: #fff7ed;
    color: #b45309;
}

.dashboard-empty {
    color: #94a3b8;
    margin: 14px 0 0;
    font-size: .82rem;
}

.next-action-list {
    display: grid;
    gap: 10px;
}

.next-action-list a {
    min-height: 58px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    color: #172033;
    padding: 10px;
    text-decoration: none;
}

.next-action-list a:hover {
    border-color: rgba(7, 167, 121, .28);
    background: #fbfffd;
}

.next-action-list strong,
.next-action-list small {
    display: block;
}

.next-action-list strong {
    font-size: .82rem;
    font-weight: 600;
}

.next-action-list small {
    color: #94a3b8;
    font-size: .74rem;
    font-weight: 450;
    margin-top: 2px;
}

@media (max-width: 1199.98px) {
    :root {
        --sidebar-width: 300px;
    }

    .content {
        padding: 22px;
    }

    .dashboard-hero-grid,
    .dashboard-lower-grid,
    .dashboard-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-card,
    .template-card,
    .dashboard-bottom-grid .chart-panel {
        grid-column: 1 / -1;
    }

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

    .dashboard-summary-grid,
    .dashboard-usage-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-main-grid,
    .dashboard-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        width: 280px;
        transform: translateX(-104%);
    }

    .sidebar-collapse-btn {
        display: none;
    }

    body.sidebar-collapsed {
        --sidebar-width: 260px;
    }

    body.sidebar-collapsed .sidebar-head {
        justify-content: flex-start;
    }

    body.sidebar-collapsed .brand {
        justify-content: flex-start;
        flex: 1 1 auto;
    }

    body.sidebar-collapsed .brand span,
    body.sidebar-collapsed .nav-section-toggle span,
    body.sidebar-collapsed .nav-section-toggle .bi-chevron-down,
    body.sidebar-collapsed .sidebar .nav-link span,
    body.sidebar-collapsed .social-setup-link span,
    body.sidebar-collapsed .social-setup-link small,
    body.sidebar-collapsed .social-setup-sub-link span {
        display: initial;
    }

    body.sidebar-collapsed .nav-section-label {
        display: flex;
    }

    body.sidebar-collapsed .social-platform-children {
        display: grid;
    }

    body.sidebar-collapsed .sidebar .nav-link,
    body.sidebar-collapsed .social-setup-link,
    body.sidebar-collapsed .nav-section-toggle {
        width: calc(100% - 4px);
        min-height: 54px;
        margin-left: 2px;
        margin-right: 2px;
        padding: 0 20px;
        justify-content: flex-start;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .topbar {
        min-height: 60px;
        padding: 0 14px;
    }

    .top-search {
        flex-basis: 320px;
    }
}

@media (max-width: 767.98px) {
    .content {
        padding: 16px 12px 30px;
    }

    .analytics-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .analytics-heading .form-select {
        width: 100%;
    }

    .dashboard-hero-grid,
    .insight-grid,
    .dashboard-lower-grid,
    .dashboard-bottom-grid,
    .mini-metric-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-head {
        display: grid;
    }

    .dashboard-head-actions {
        justify-content: stretch;
    }

    .dashboard-head-actions .btn {
        flex: 1 1 auto;
    }

    .dashboard-summary-grid,
    .dashboard-usage-grid,
    .health-list {
        grid-template-columns: 1fr 1fr;
    }

    .plan-card,
    .template-card,
    .dashboard-bottom-grid .chart-panel {
        grid-column: auto;
    }

    .top-search {
        min-width: 0;
        flex: 1 1 auto;
    }

    .top-actions {
        display: none;
    }
}

.maintenance-body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, .12), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #eef7f3 100%);
    color: #172033;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.maintenance-card {
    width: min(100%, 520px);
    padding: 34px;
    border: 1px solid #dce8f1;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 55px rgba(15, 23, 42, .12);
    text-align: center;
}

.maintenance-card img {
    max-width: 150px;
    max-height: 76px;
    object-fit: contain;
    margin-bottom: 20px;
}

.maintenance-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(16, 185, 129, .1);
    color: var(--green);
    font-size: 14px;
    font-weight: 700;
}

.maintenance-card h1 {
    margin: 18px 0 10px;
    font-size: clamp(28px, 5vw, 38px);
    line-height: 1.12;
    letter-spacing: 0;
}

.maintenance-card p {
    margin: 0 auto 24px;
    max-width: 420px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.65;
}

.maintenance-card a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 480px) {
    .analytics-heading h1 {
        font-size: 1.2rem;
    }

    .welcome-card h2,
    .plan-price,
    .usage-number {
        font-size: 1.45rem;
    }

    .connect-options {
        grid-template-columns: 1fr;
    }

    .dashboard-summary-grid,
    .dashboard-usage-grid,
    .health-list {
        grid-template-columns: 1fr;
    }

    .dashboard-mini-table-head,
    .dashboard-mini-table > div:not(.dashboard-mini-table-head) {
        grid-template-columns: minmax(0, 1fr) 52px 74px;
    }

    .panel-soft,
    .usage-card {
        padding: 16px;
    }
}

/* Public landing page */
.landing-body {
    background: #f7faf9;
    color: #172033;
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 clamp(16px, 5vw, 72px);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    font-weight: 950;
    font-size: 1.6rem;
    text-decoration: none;
    white-space: nowrap;
}

.landing-brand i {
    color: var(--green);
}

.landing-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.landing-links {
    display: flex;
    gap: 22px;
    margin-left: auto;
}

.landing-links a {
    color: #506176;
    text-decoration: none;
    font-weight: 850;
}

.landing-links a:hover {
    color: var(--green);
}

.landing-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-hero,
.landing-section,
.landing-strip,
.landing-cta,
.landing-footer {
    width: min(1180px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.landing-hero {
    min-height: calc(100vh - 92px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    padding: 54px 0 42px;
}

.landing-kicker {
    width: fit-content;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--green);
    background: var(--green-soft);
    border: 1px solid #c8f4e7;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.landing-hero h1 {
    font-size: clamp(2.1rem, 5vw, 4.8rem);
    line-height: .98;
    font-weight: 950;
    letter-spacing: 0;
    max-width: 820px;
    margin-bottom: 22px;
}

.landing-hero p {
    color: #5d6b80;
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.75;
    max-width: 690px;
    font-weight: 650;
}

.landing-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 28px 0;
}

.landing-proof {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.landing-proof span {
    min-width: 120px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    color: #6b7a90;
    font-weight: 700;
}

.landing-proof strong {
    display: block;
    color: #172033;
    font-size: 0.90rem;
}

.landing-product-visual {
    position: relative;
}

.visual-window {
    min-height: 560px;
    border-radius: 28px;
    border: 1px solid #dfe8f0;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .16);
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    overflow: hidden;
}

.visual-sidebar {
    background: #f3f7f9;
    border-right: 1px solid var(--border);
    padding: 30px 18px;
    display: grid;
    align-content: start;
    gap: 18px;
}

.visual-sidebar span {
    height: 44px;
    border-radius: 13px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border);
}

.visual-sidebar span:first-child {
    background: var(--green-soft);
    box-shadow: inset 0 0 0 1px #bfeddc;
}

.visual-main {
    padding: 24px;
    display: grid;
    gap: 18px;
    align-content: start;
}

.visual-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 14px;
}

.visual-topbar span {
    height: 42px;
    border-radius: 12px;
    background: #f7fafc;
    border: 1px solid var(--border);
}

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

.visual-card {
    min-height: 110px;
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 16px;
    background: #fff;
}

.visual-card.green {
    background: linear-gradient(135deg, #0fae7c, #39bd8f);
    color: #fff;
}

.visual-card.orange {
    background: #fff6e8;
}

.visual-card small {
    display: block;
    color: inherit;
    opacity: .7;
    font-weight: 700;
}

.visual-card strong {
    display: block;
    font-size: 0.90rem;
    margin-top: 18px;
}

.visual-chat {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 14px;
}

.chat-list,
.chat-thread,
.visual-chart {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 14px;
}

.chat-list {
    display: grid;
    gap: 12px;
}

.chat-list span {
    height: 42px;
    border-radius: 11px;
    background: #f0f5f8;
}

.chat-thread {
    min-height: 190px;
    display: grid;
    align-content: center;
    gap: 14px;
}

.chat-thread i,
.chat-thread b {
    height: 34px;
    border-radius: 999px;
    display: block;
}

.chat-thread i {
    width: 62%;
    background: #eef4ff;
}

.chat-thread b {
    width: 52%;
    background: var(--green-soft);
    margin-left: auto;
}

.visual-chart {
    height: 110px;
    overflow: hidden;
    position: relative;
}

.visual-chart span {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 20px;
    height: 70px;
    border-radius: 50% 50% 0 0;
    border-top: 5px solid var(--green);
    background: linear-gradient(rgba(7, 167, 121, .18), transparent);
}

.landing-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 76px;
}

.landing-strip div {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    font-weight: 850;
    color: #415065;
}

.landing-strip i {
    color: var(--green);
}

.landing-section {
    padding: 70px 0 10px;
}

.landing-section-head {
    max-width: 720px;
    margin-bottom: 28px;
}

.landing-section-head span {
    color: var(--green);
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 950;
}

.landing-section-head h2,
.landing-cta h2 {
    font-size: clamp(1.8rem, 3.6vw, 3.2rem);
    line-height: 1.08;
    font-weight: 950;
    margin-top: 8px;
}

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

.landing-feature-card,
.landing-plan-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 34px rgba(15, 23, 42, .045);
}

.landing-feature-card i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 1.2rem;
    margin-bottom: 18px;
}

.landing-feature-card h3,
.landing-plan-card h3 {
    font-size: 1.05rem;
    font-weight: 950;
}

.landing-feature-card p,
.landing-plan-card p,
.landing-cta p {
    color: #66758a;
    line-height: 1.65;
    font-weight: 650;
}

.landing-workflow {
    overflow: hidden;
}

.workflow-showcase {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px;
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 16px;
    box-shadow: 0 10px 34px rgba(15, 23, 42, .045);
}

.workflow-node-preview {
    min-height: 120px;
    border: 2px solid #e7edf3;
    border-radius: 16px;
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
    font-weight: 950;
}

.workflow-node-preview i {
    font-size: 1.4rem;
}

.workflow-node-preview.trigger {
    border-color: #c9f1e3;
    color: var(--green);
}

.workflow-node-preview.condition {
    border-color: #ffe1b6;
    color: var(--orange);
}

.workflow-node-preview.action {
    border-color: #d7e4ff;
    color: var(--blue);
}

.workflow-connector {
    display: none;
}

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

.landing-plan-card div {
    border-top: 1px solid var(--border);
    padding: 12px 0;
    font-weight: 850;
    color: #415065;
}

.landing-cta {
    margin-top: 84px;
    margin-bottom: 48px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0b8f6d, #07a779);
    color: #fff;
    padding: clamp(30px, 6vw, 70px);
    text-align: center;
}

.landing-cta p {
    color: rgba(255, 255, 255, .82);
    max-width: 660px;
    margin: 12px auto 24px;
}

.landing-cta .btn-light {
    color: var(--green);
    font-weight: 700;
}

.landing-footer {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #738197;
    font-weight: 750;
    border-top: 1px solid var(--border);
}

@media (max-width: 1100px) {
    .landing-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .landing-product-visual {
        max-width: 760px;
    }

    .landing-strip,
    .landing-feature-grid,
    .landing-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 767.98px) {
    .landing-nav {
        min-height: auto;
        padding: 14px 16px;
        flex-wrap: wrap;
    }

    .landing-links {
        order: 3;
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .landing-actions {
        margin-left: auto;
    }

    .landing-actions .btn {
        padding-left: 12px;
        padding-right: 12px;
    }

    .landing-hero {
        padding-top: 34px;
    }

    .landing-hero-actions .btn,
    .landing-cta .btn {
        width: 100%;
    }

    .visual-window {
        min-height: 440px;
        grid-template-columns: 58px minmax(0, 1fr);
        border-radius: 20px;
    }

    .visual-sidebar {
        padding: 18px 10px;
    }

    .visual-cards,
    .visual-chat,
    .landing-strip,
    .landing-feature-grid,
    .landing-plan-grid,
    .workflow-showcase {
        grid-template-columns: 1fr;
    }

    .visual-main {
        padding: 14px;
    }

    .landing-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
    }
}

@media (max-width: 430px) {
    .landing-brand {
        font-size: 0.90rem;
    }

    .landing-actions {
        width: 100%;
    }

    .landing-actions .btn {
        flex: 1;
    }
}

/* WAMax public landing page */
.wamax-body {
    background: #ffffff;
    color: #101827;
    overflow-x: hidden;
}

.wamax-body .btn-success {
    --bs-btn-bg: #08a36d;
    --bs-btn-border-color: #08a36d;
    --bs-btn-hover-bg: #078e60;
    --bs-btn-hover-border-color: #078e60;
    --bs-btn-active-bg: #067e55;
    --bs-btn-active-border-color: #067e55;
    box-shadow: 0 10px 22px rgba(8, 163, 109, .2);
    font-weight: 850;
}

.wamax-nav {
    min-height: 66px;
    padding: 0 clamp(18px, 6vw, 96px);
    background: #073d31;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 30px;
    position: sticky;
    top: 0;
    z-index: 80;
    box-shadow: 0 12px 36px rgba(7, 61, 49, .18);
}

.wamax-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: inherit;
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 950;
    white-space: nowrap;
}

.wamax-brand i {
    color: #20d487;
}

.wamax-nav nav,
.wamax-footer nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.wamax-nav nav a,
.wamax-footer nav a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 750;
}

.wamax-nav nav a:hover,
.wamax-footer nav a:hover {
    color: #fff;
}

.wamax-nav > div {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.wamax-hero {
    min-height: 690px;
    padding: clamp(56px, 8vw, 104px) clamp(18px, 6vw, 96px);
    background:
        radial-gradient(circle at 12% 20%, rgba(26, 213, 139, .2), transparent 26%),
        linear-gradient(180deg, #eafbf4 0%, #f7fffb 70%, #fff 100%);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: center;
}

.wamax-hero-copy {
    max-width: 650px;
}

.wamax-pill,
.wamax-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #dff8ed;
    color: #079365;
    font-size: .73rem;
    font-weight: 950;
    text-transform: uppercase;
}

.wamax-hero h1 {
    margin: 18px 0 18px;
    font-size: clamp(2.2rem, 5.7vw, 5rem);
    line-height: 1.02;
    font-weight: 950;
    max-width: 820px;
}

.wamax-hero p,
.wamax-section > p,
.feature-copy p,
.wamax-step-grid p,
.wamax-contact p,
.wamax-footer p,
.testimonial-grid p,
.faq-list p {
    color: #617086;
    line-height: 1.7;
    font-weight: 650;
}

.wamax-hero-art {
    position: relative;
    min-height: 200px;
}

.wamax-dashboard-card {
    background: #fff;
    border: 1px solid #dceee7;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 26px 80px rgba(7, 61, 49, .13);
    transform: rotate(.8deg);
}

.dash-top {
    display: flex;
    gap: 8px;
    padding-bottom: 16px;
}

.dash-top span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #cde6dd;
}

.dash-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
}

.dash-panel {
    min-height: 128px;
    border: 1px solid #e5f0ec;
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(180deg, #fff, #f7fffb);
}

.dash-panel.big {
    grid-row: span 2;
    min-height: 270px;
    background:
        linear-gradient(180deg, rgba(8, 163, 109, .12), rgba(8, 163, 109, .02)),
        #fff;
}

.dash-panel strong {
    display: block;
    color: #17312a;
    font-size: .9rem;
    margin-bottom: 14px;
}

.dash-panel em,
.dash-panel i,
.dash-panel b,
.dash-panel small {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: #def5eb;
    margin-bottom: 12px;
}

.dash-panel em:nth-child(2) {
    width: 90%;
}

.dash-panel em:nth-child(3) {
    width: 68%;
}

.dash-panel em:nth-child(4) {
    width: 78%;
}

.floating-widget {
    position: absolute;
    right: 4%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #d8eee5;
    border-radius: 12px;
    padding: 12px 14px;
    color: #0f6d4e;
    font-weight: 700;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .12);
}

.floating-widget.one {
    top: 28px;
}

.floating-widget.two {
    bottom: 34px;
    right: 12%;
}

.wamax-section {
    padding: clamp(58px, 8vw, 104px) clamp(18px, 6vw, 96px);
    text-align: center;
}

.wamax-section h2,
.wamax-contact h2 {
    margin: 14px auto 10px;
    max-width: 800px;
    font-size: clamp(1.8rem, 3.9vw, 3.6rem);
    line-height: 1.08;
    font-weight: 950;
}

.wamax-section > p {
    max-width: 720px;
    margin: 0 auto;
}

.wamax-feature-list {
    padding: 0 clamp(18px, 6vw, 96px) clamp(58px, 8vw, 104px);
}

.wamax-feature-row {
    max-width: 1200px;
    margin: 0 auto clamp(34px, 6vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
    align-items: center;
    gap: clamp(24px, 6vw, 90px);
}

.wamax-feature-row.reverse .feature-copy {
    order: 2;
}

.feature-copy span {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e4f9ef;
    color: #08a36d;
    display: inline-grid;
    place-items: center;
    font-size: 1.15rem;
    margin-bottom: 18px;
}

.feature-copy h3 {
    font-size: clamp(1.35rem, 2.4vw, 2.2rem);
    font-weight: 950;
}

.feature-visual,
.mini-ui {
    min-height: 300px;
    border-radius: 18px;
}

.feature-visual {
    background: linear-gradient(135deg, #f5fffa, #ffffff);
    border: 1px solid #e4eee9;
    /* padding: 18px; */
    box-shadow: 0 16px 48px rgba(15, 23, 42, .06);
}

.mini-ui {
    background: #fff;
    border: 1px solid #e4eee9;
    padding: 18px;
    display: grid;
    grid-template-rows: 38px 1fr 72px;
    gap: 16px;
}

.mini-head,
.mini-cards span {
    border-radius: 10px;
    background: #e8f8f1;
}

.mini-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mini-flow i {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #08a36d;
}

.mini-flow b {
    width: clamp(42px, 8vw, 110px);
    height: 4px;
    border-radius: 999px;
    background: #bfe9d8;
}

.mini-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.steps,
.pricing,
.faq {
    background: #f7faf9;
}

.wamax-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1180px;
    margin: 34px auto 0;
    text-align: left;
}

.wamax-step-grid article,
.testimonial-grid article,
.wamax-contact,
.pricing-table {
    background: #fff;
    border: 1px solid #e3ece8;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .055);
}

.wamax-step-grid article {
    padding: 24px;
}

.wamax-step-grid article > strong {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: #fff;
    background: #08a36d;
    margin-bottom: 22px;
}

.wamax-step-grid h3 {
    min-height: 58px;
    font-size: 1.12rem;
    font-weight: 950;
}

.step-screen {
    height: 150px;
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.step-screen span {
    border-radius: 12px;
    background: linear-gradient(90deg, #e5f8ef, #ffffff);
    border: 1px solid #e2eee9;
}

.pricing-table {
    max-width: 1160px;
    margin: 34px auto 0;
    overflow-x: auto;
    text-align: left;
}

.pricing-table table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
    padding: 18px;
    border-bottom: 1px solid #eef3f1;
    text-align: center;
}

.pricing-table th:first-child,
.pricing-table td:first-child {
    text-align: left;
    color: #5f6c7e;
}

.pricing-table th {
    color: #102019;
    font-weight: 950;
}

.pricing-table th a {
    display: block;
    margin: 12px auto 0;
    width: max-content;
    padding: 8px 14px;
    border-radius: 999px;
    color: #fff;
    background: #08a36d;
    text-decoration: none;
    font-size: .78rem;
}

.pricing-table .bi-check-circle-fill {
    color: #08a36d;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: 1120px;
    margin: 34px auto 0;
    text-align: left;
}

.testimonial-grid article {
    padding: 24px;
}

.testimonial-grid div {
    color: #ffa42b;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

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

.testimonial-grid span {
    color: #08a36d;
    font-size: .85rem;
    font-weight: 700;
}

.faq-list {
    max-width: 920px;
    margin: 34px auto 0;
    text-align: left;
}

.faq-list details {
    background: #fff;
    border: 1px solid #e1eee9;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 18px 20px;
}

.faq-list summary {
    cursor: pointer;
    font-weight: 700;
}

.faq-list p {
    margin: 12px 0 0;
}

.wamax-contact {
    max-width: 1180px;
    margin: clamp(58px, 8vw, 100px) auto;
    padding: clamp(22px, 5vw, 42px);
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 32px;
    text-align: left;
}

.wamax-contact h2 {
    margin-left: 0;
}

.wamax-contact form {
    display: grid;
    gap: 12px;
}
.form-control{
    font-size:0.85rem;
}
.wamax-contact .form-control {
    min-height: 48px;
    border-color: #e0ebe7;
}

.wamax-footer {
    /* background: #0b2230; */
    color: #fff;
    padding: 34px clamp(18px, 6vw, 96px);
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 28px;
}

.wamax-footer p {
    color: rgba(255, 255, 255, .7);
    margin: 10px 0 0;
}

@media (max-width: 1180px) {
    .wamax-hero {
        grid-template-columns: 1fr;
    }

    .wamax-hero-copy {
        max-width: 860px;
    }

    .wamax-hero-art {
        max-width: 780px;
        width: 100%;
    }

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

@media (max-width: 900px) {
    .wamax-nav {
        padding: 14px 18px;
        flex-wrap: wrap;
        gap: 14px;
    }

    .wamax-nav nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .wamax-nav > div {
        margin-left: auto;
    }

    .wamax-feature-row,
    .wamax-feature-row.reverse {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wamax-feature-row.reverse .feature-copy {
        order: 0;
    }

    .wamax-contact,
    .wamax-footer {
        grid-template-columns: 1fr;
    }

    .wamax-footer nav {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .wamax-hero {
        min-height: auto;
        padding-top: 34px;
    }

    .wamax-hero-art {
        min-height: 100%;
    }

    .dash-grid,
    .wamax-step-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .dash-panel.big {
        min-height: 190px;
    }

    .floating-widget {
        position: static;
        margin: 12px 0 0;
        width: 100%;
        justify-content: center;
    }

    .wamax-nav > div {
        width: 100%;
    }

    .wamax-nav > div .btn {
        flex: 1;
    }

    .feature-visual,
    .mini-ui {
        min-height: 100%;
    }
}

@media (max-width: 575.98px) {
    .wamax-section h2{
        font-size:1.6rem !important;
    }
    .template-modal-dialog {
        margin: 8px;
        --bs-modal-width: calc(100vw - 16px);
    }

    .template-modal-header {
        padding: 14px;
    }

    .template-modal-dialog .modal-body {
        padding: 14px;
    }

    .template-modal-title > span {
        width: 38px;
        height: 38px;
    }

    .template-modal-footer {
        padding: 12px 14px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* Inbox desktop fit fixes */
.inbox-shell.team-inbox-shell {
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 134px);
    min-height: 560px;
    grid-template-columns: minmax(330px, 31%) minmax(0, 1fr);
    gap: 10px;
    border: 0;
    background: transparent;
}

.team-inbox-shell .inbox-list,
.team-inbox-shell .chat-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(16, 24, 40, .05);
    overflow: auto;
}

.team-inbox-shell .inbox-list {
    padding: 18px 16px 0;
}

.team-inbox-shell .chat-panel,
.team-inbox-shell .team-chat-body,
.team-inbox-shell .chat-messages,
.team-inbox-shell .chat-identity,
.team-inbox-shell .chat-controls {
    min-width: 0;
}

.inbox-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.inbox-list-head .eyebrow {
    color: var(--green);
    font-size: .72rem;
    font-weight: 600;
    text-transform: capitalize  ;
}

.inbox-list-head h2 {
    color: #111827;
    font-size: 0.99rem;
    font-weight: 600;
    margin: 2px 0 0;
}

.inbox-alert-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: #fffaf0;
    color: #f59e0b;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.inbox-alert-btn.is-enabled::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--green);
    border: 2px solid #fff;
}

.notification-settings-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1080;
}

.notification-settings-modal.is-open {
    display: block;
}

.notification-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .76);
}

.notification-settings-dialog {
    position: absolute;
    top: 22px;
    left: 50%;
    width: min(650px, calc(100vw - 48px));
    height: min(92vh, 956px);
    transform: translateX(-50%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 26px 72px rgba(15, 23, 42, .24);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.notification-settings-head {
    min-height: 55px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 25px;
    border-bottom: 1px solid #e7edf5;
}

.notification-settings-head > i {
    color: var(--green);
    font-size: 1.5rem;
}

.notification-settings-head h2 {
    margin: 0;
    color: #0d1117;
    font-size: 1.05rem;
    font-weight: 600;
}

.notification-settings-body {
    margin-top: 10px;
    overflow-y: auto;
    padding: 0 25px 24px;
    scrollbar-color: var(--green) transparent;
}

.notification-permission-card {
    min-height: 60px;
    display: grid;
    margin-top:10px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffdf4;
    padding: 5px 20px 5px 15px;
}

.notification-permission-card.is-granted {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.notification-permission-card.is-denied {
    border-color: #fecaca;
    background: #fff1f2;
}

.notification-permission-card > i {
    color: #ff9800;
    font-size: 1.8rem;
}

.notification-permission-card.is-granted > i {
    color: var(--green);
}

.notification-permission-card.is-denied > i {
    color: #e11d48;
}

.notification-permission-card strong {
    display: block;
    color: #111;
    font-size: 0.95rem;
    line-height: 0.9;
}

.notification-permission-card span {
    display: block;
    color: #64748b;
    font-size: .75rem;
    margin-top: 1px;
}

.notification-permission-card button {
    min-height: 30px;
    border: 0px solid #9ed4a5;
    border-radius: 5px;
    background: #ff9800;
    color: #fff;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 400;
}

.notification-permission-card button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.notification-section-label {
    color: #94a3b8;
    font-size: 0.65rem;
    font-weight: 500;
    margin: 30px 0 5px;
}

.notification-section-label.is-upper {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 650;
}

.notification-toggle-row {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #e9eef5;
    border-radius: 14px;
    background: #fbfcfe;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .05);
    padding: 0 26px;
}

.notification-toggle-row > span {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #111;
}

.notification-toggle-row > span i {
    font-size: 1.35rem;
}

.notification-toggle-row strong {
    font-size: 0.95rem;
    font-weight: 600;
}

.notification-toggle-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.notification-toggle-row > i {
    position: relative;
    width: 55px;
    height: 25px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .18s ease;
}

.notification-toggle-row > i::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    transition: transform .18s ease;
}

.notification-toggle-row input:checked + i {
    background: var(--green);
}

.notification-toggle-row input:checked + i::after {
    transform: translateX(30px);
}

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

.notification-sound-option {
    min-height: 50px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 5px;
    border: 1px solid #e8eef6;
    border-radius: 14px;
    background: #fff;
    color: #111;
    padding: 0 18px;
    text-align: left;
}

.notification-sound-option > span {
    width: 35px;
    height: 35px;
    border-radius: 50px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #8aa0bc;
    font-size: 1.1rem;
}

.notification-sound-option strong {
    font-size: 0.80rem;
    font-weight: 500;
}

.notification-sound-option > .bi-check-lg {
    display: none;
    color: var(--green);
    font-size: 1.25rem;
}

.notification-sound-option.is-selected {
    border-color: var(--green);
    background: #f8fffb;
    color: var(--green);
}

.notification-sound-option.is-selected > span {
    background: var(--green);
    color: #fff;
}

.notification-sound-option.is-selected > .bi-check-lg {
    display: block;
}

.notification-settings-actions {
    min-height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding: 0 30px;
    border-top: 1px solid #e7edf5;
    background: #f8fafc;
}

.notification-cancel-btn,
.notification-save-btn {
    border: 0;
    min-height: 35px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
}

.notification-cancel-btn {
    background: transparent;
    color: #111;
    padding: 0 36px;
}

.notification-save-btn {
    min-width: 150px;
    background: var(--green);
    color: #fff;
}

@media (max-width: 760px) {
    .notification-settings-dialog {
        top: 10px;
        width: calc(100vw - 20px);
        height: calc(100vh - 20px);
    }

    .notification-settings-head {
        min-height: 76px;
        padding: 0 20px;
    }

    .notification-settings-body {
        padding: 0 16px 24px;
    }

    .notification-permission-card {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 16px;
    }

    .notification-permission-card button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 54px;
    }

    .notification-toggle-row {
        min-height: 76px;
        padding: 0 16px;
    }

    .notification-sound-grid {
        grid-template-columns: 1fr;
    }

    .notification-sound-option {
        min-height: 86px;
        grid-template-columns: 52px minmax(0, 1fr) 28px;
        gap: 16px;
        padding: 0 16px;
    }

    .notification-sound-option > span {
        width: 52px;
        height: 52px;
    }

    .notification-settings-actions {
        min-height: 88px;
        gap: 10px;
        padding: 0 14px;
    }

    .notification-cancel-btn,
    .notification-save-btn {
        min-height: 54px;
        font-size: 1rem;
    }

    .notification-save-btn {
        min-width: 0;
        flex: 1;
    }
}

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

.inbox-channel-tabs button {
    min-height: 50px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    color: #94a3b8;
    display: grid;
    place-items: center;
    gap: 2px;
    font-size: .65rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
}

.inbox-channel-tabs button i {
    font-size: 1rem;
}

.inbox-channel-tabs button.is-active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    box-shadow: 0 10px 22px rgba(7, 167, 121, .2);
}

.inbox-channel-tabs button:disabled {
    cursor: not-allowed;
}

.team-inbox-shell .inbox-filter-bar {
    display: grid;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

.team-inbox-shell .inbox-account-select,
.team-inbox-shell .inbox-search {
    min-height: 46px;
    border-radius: 12px;
    background: #f8fafc;
}

.team-inbox-shell .inbox-account-select {
    width: 100%;
    max-width: none;
    min-height: 35px;
    padding: 0 44px 0 18px;
    border-radius: 14px;
    color: #111827;
    font-weight: 600;
    font-size: .85rem;
}

.inbox-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    gap: 3px;
}

.team-inbox-shell .inbox-search {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: #8fa0b8;
}

.team-inbox-shell .inbox-search i {
    font-size: 0.85rem;
}

.team-inbox-shell .inbox-search input {
    color: #111827;
    font-size: .80rem;
    font-weight: 400;
    background: transparent;
    border: 0;
}

.team-inbox-shell .inbox-search input::placeholder {
    color: #8b8f98;
    font-weight: 400;
}

.inbox-filter-trigger {
    position: relative;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #111827;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
}

.inbox-filter-trigger span {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--green);
    border: 2px solid #fff;
}

.inbox-filter-trigger:hover,
.inbox-filter-trigger:focus {
    color: var(--green);
    background: var(--green-soft);
}

.team-inbox-shell .filter-grid {
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
}

.team-inbox-shell .filter-grid .form-select,
.team-inbox-shell .overdue-toggle {
    min-height: 40px;
    border-radius: 12px;
}

.inbox-status-tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.inbox-status-tabs button {
    min-height: 30px;
    font-size: 0.75rem;
    border: 0;
    border-radius: 999px;
    background: #eef3f7;
    color: #64748b;
    padding: 0 20px;
    font-weight: 450;
    white-space: nowrap;
}

.inbox-status-tabs button.is-active {
    background: var(--green);
    color: #fff;
    box-shadow: 0 2px 18px rgba(7, 167, 121, .22);
}

.inbox-status-tabs button:disabled {
    opacity: .55;
}

.inbox-filter-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
}

.inbox-filter-modal.is-open {
    display: block;
}

.inbox-filter-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .24);
}

.inbox-filter-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(92vw, 520px);
    max-height: min(88vh, 720px);
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .28);
    overflow: auto;
}

.inbox-filter-head {
    min-height: 78px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 28px;
}

.inbox-filter-head h2 {
    color: var(--green);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.inbox-filter-close {
    width: 52px;
    height: 52px;
    border: 3px solid #9bd8bf;
    border-radius: 16px;
    background: #fff;
    color: #64748b;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.inbox-filter-body {
    display: grid;
    gap: 22px;
    padding: 28px;
}

.inbox-filter-body label,
.inbox-filter-body > div {
    display: grid;
    gap: 10px;
}

.inbox-filter-body label > span,
.filter-label {
    color: #111827;
    font-weight: 850;
    font-size: .98rem;
}
.form-select {
    font-size: 0.85rem;
}
.inbox-filter-body .form-select,
.inbox-date-range div {
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background-color: #f8fafc;
    color: #111827;
    font-weight: 600;
}

.inbox-date-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.inbox-date-range div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    color: #64748b;
}

.inbox-switch-row {
    min-height: 60px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
    padding: 0 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.inbox-switch-row input {
    display: none;
}

.inbox-switch-row i {
    width: 58px;
    height: 32px;
    border-radius: 999px;
    background: #dfe7ef;
    position: relative;
}

.inbox-switch-row i::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
    transition: transform .18s ease;
}

.inbox-switch-row input:checked + i {
    background: var(--green);
}

.inbox-switch-row input:checked + i::after {
    transform: translateX(26px);
}

.inbox-filter-actions {
    border-top: 1px solid var(--border);
    background: #fbfcfd;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 22px 28px;
}

.inbox-filter-actions .btn {
    min-height: 54px;
    border-radius: 14px;
    font-size: 1rem;
}

.team-inbox-shell #conversationList {
    margin: 0 -16px;
    padding: 14px 12px 16px;
    border-top: 1px solid var(--border);
}

.inbox-empty-state {
    min-height: 420px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    color: #64748b;
    font-size: 1.05rem;
    font-weight: 600;
}

.inbox-empty-state i {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #f5f7fb;
    color: #94a3b8;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
}

.inbox-empty-state strong {
    font-weight: 600;
}

.team-inbox-shell .conversation-item {
    border: 1px solid transparent;
    border-radius: 14px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    min-height: 70px;
    padding: 5px 15px;
    margin-bottom: 5px;
    background: #f8fafc;
}

.team-inbox-shell .conversation-item:hover {
    background: #f2fbf7;
}

.team-inbox-shell .conversation-item.is-active {
    background: var(--green-soft);
    border-color: rgba(7, 167, 121, .28);
}

.team-inbox-shell .conversation-avatar {
    width: 30px;
    height: 30px;
    background: var(--green);
    color: #fff;
    font-size: 0.85rem;
}

.team-inbox-shell .conversation-name {
    color: #111827;
    font-weight: 600;
    font-size: 0.75rem;
}

.team-inbox-shell .conversation-preview {
    color: #75849a;
    font-weight: 400;
    font-size: 0.75rem;
}

.team-chat-header {
    display: grid;
    grid-template-columns: 50px minmax(180px, 1fr);
    align-items: center;
    gap: 10px 12px;
    min-height: 0;
    padding: 5px 18px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.team-chat-header .conversation-avatar {
    width: 40px;
    height: 40px;
}

.team-chat-header .chat-controls {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.team-chat-header .chat-control-field {
    min-width: 112px;
    max-width: 148px;
}

.team-chat-header .chat-control-field.follow-up-field {
    max-width: 178px;
}

.team-chat-header .chat-control-field span {
    display: none;
}

.chat-timer-pill {
    min-height: 30px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff7f7;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.75rem;
}

.team-chat-header .chat-control-field .form-select,
.team-chat-header .chat-control-field .form-control {
    min-width: 0;
    width: 100%;
}

.team-chat-header .chat-controls .btn {
    min-height: 30px;
    border-radius: 12px;
    padding: 0px 12px;
    font-size: .75rem;
    font-weight: 500;
}

.team-chat-header .chat-title,
.team-chat-header .chat-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-chat-body {
    background-color: #fbfcfa;
    /* background-image:
        radial-gradient(circle at 18px 18px, rgba(7, 167, 121, .045) 0 1px, transparent 1.5px),
        radial-gradient(circle at 46px 44px, rgba(15, 23, 42, .035) 0 1px, transparent 1.5px);
    background-size: 64px 64px; */
    background-image: url('../image/chat-bg.png');
    background-size: cover;
}

.team-chat-body .chat-messages {
    height: 100%;
    padding: 34px 44px;
}

.team-inbox-shell .message-bubble {
    border: 1px solid #dce3ea;
    border-radius: 14px;
    background: #eef3f8;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .08);
    font-size: 13px;
    line-height: 1.4;
}

.team-inbox-shell .message-row.is-outgoing .message-bubble {
    background: #d9f3e8;
    border-color: #bfe8d7;
}

.message-media-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    text-transform: capitalize;
}

.message-media-image,
.message-media-video {
    display: block;
    width: min(320px, 58vw);
    max-height: 280px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #dbe5ef;
    background: #f8fafc;
}

.message-media-audio {
    width: min(320px, 58vw);
    height: 38px;
}

.message-media-document,
.message-media-fallback {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(320px, 58vw);
    border: 1px solid #dbe5ef;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    padding: 10px 12px;
    text-decoration: none;
    font-weight: 600;
}

.message-media-document span,
.message-media-fallback span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-media-caption {
    margin-top: 7px;
    color: #253247;
}

.chat-reply {
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    background: #fff;
    padding: 10px 18px;
}

.chat-reply .form-control {
    min-width: 0;
    min-height: 30px;
    border-radius: 14px;
    background: #f8fafc;
    padding-inline: 16px;
}

.chat-reply .btn {
    min-height: 30px;
    border-radius: 14px;
    padding-inline: 22px;
    grid-column: 2;
    grid-row: 1;
}

.template-reengage-bar {
    border-top: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 16px;
}

.template-reengage-bar.is-hidden {
    display: none;
}

.reply-note {
    position: static;
    bottom: auto;
    z-index: auto;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: #75849a;
    font-weight: 400;
    font-size: 0.75rem;
}

.reply-note:not(:empty)::before {
    content: "\F47B";
    font-family: "bootstrap-icons";
    color: #64748b;
    margin-right: 8px;
}

.inbox-icon-action span {
    display: none;
}

@media (max-width: 1320px) {
    .content:has(.team-inbox-shell) {
        padding: 18px;
    }

    .inbox-shell.team-inbox-shell {
        grid-template-columns: minmax(250px, 32%) minmax(0, 1fr);
    }

    .team-chat-header .chat-controls {
        grid-template-columns: repeat(4, minmax(104px, 1fr));
    }

    .team-chat-header .chat-controls .btn {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .team-chat-header .chat-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .team-chat-header .follow-up-field {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .content:has(.team-inbox-shell) {
        padding: 12px;
    }

    .inbox-shell.team-inbox-shell {
        height: calc(100dvh - 92px);
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(210px, 32dvh) minmax(0, 1fr);
    }

    .team-chat-header .chat-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-chat-header .follow-up-field,
    .team-chat-header .chat-controls .btn {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .content:has(.team-inbox-shell) {
        padding: 0;
    }

    .inbox-shell.team-inbox-shell {
        height: calc(100dvh - 60px);
        border: 0;
        border-radius: 0;
        grid-template-rows: 230px minmax(0, 1fr);
    }

    .team-chat-header {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 10px;
    }

    .team-chat-header .chat-controls {
        grid-template-columns: 1fr 1fr;
    }

    .team-chat-header .chat-control-field span {
        font-size: .62rem;
    }

    .team-chat-header .chat-controls .btn {
        padding-inline: 8px;
    }

    .inbox-filter-dialog {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px);
    }

    .inbox-filter-head,
    .inbox-filter-body,
    .inbox-filter-actions {
        padding-left: 18px;
        padding-right: 18px;
    }

    .inbox-filter-head h2 {
        font-size: 1.1rem;
    }

    .inbox-date-range,
    .inbox-filter-actions {
        grid-template-columns: 1fr;
    }
}

/* Automation builder responsive refresh */
.automation-builder-panel {
    max-width: min(100%, 980px);
    padding: 22px 24px;
}

.automation-builder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.automation-builder-head h2 {
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0 0 3px;
}

.automation-builder-head p {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 650;
    margin: 0;
}

.automation-rule-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(130px, .45fr) minmax(180px, .55fr);
    gap: 12px;
    align-items: end;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

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

.automation-preset-card {
    min-width: 0;
    text-align: left;
    border: 1px solid #e2eaf3;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 11px;
    align-items: center;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.automation-preset-card:hover,
.automation-preset-card.is-active {
    border-color: rgba(5, 150, 105, .5);
    background: #f1fff8;
    box-shadow: 0 12px 28px rgba(5, 150, 105, .10);
}

.automation-preset-card span {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--green);
    background: #e9fbf2;
}

.automation-preset-card strong {
    color: #172033;
    font-size: .92rem;
    font-weight: 750;
}

.automation-preset-card small {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
}

.automation-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.automation-field span,
.automation-step-title h3 {
    color: #1f2937;
    font-weight: 850;
}

.automation-timeline {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.automation-step-card {
    border-left: 3px solid var(--green);
    background: #fbfcfe;
    border-radius: 10px;
    padding: 16px 18px;
    min-width: 0;
}

.automation-step-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.automation-step-title i {
    color: var(--green);
}

.automation-step-title h3 {
    font-size: 1rem;
    margin: 0;
}

.automation-step-title p {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
    margin: 2px 0 0;
}

.automation-rows {
    display: grid;
    gap: 10px;
}

.automation-condition-row,
.automation-action-row {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.automation-condition-row {
    grid-template-columns: minmax(180px, 1.15fr) minmax(120px, .7fr) minmax(180px, 1fr);
}

.automation-action-row {
    grid-template-columns: minmax(160px, .9fr) minmax(220px, 1.2fr) minmax(150px, .8fr) minmax(140px, .75fr);
    margin-bottom: 0;
}

.automation-condition-row > *,
.automation-action-row > * {
    min-width: 0;
}

.automation-demo-card {
    margin-top: 16px;
    border: 1px solid #badfcb;
    background: #f1fff7;
    color: #166534;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 700;
}

.automation-form-actions {
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

@media (max-width: 1320px) {
    .content:has(.automation-builder-panel) {
        padding: 18px;
    }

    .automation-builder-panel {
        max-width: 100%;
    }
}

@media (max-width: 1050px) {
    .automation-rule-grid {
        grid-template-columns: minmax(0, 1fr) minmax(130px, .45fr);
    }

    .automation-rule-grid .automation-field:last-child {
        grid-column: 1 / -1;
    }

    .automation-condition-row,
    .automation-action-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .automation-presets {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .automation-builder-panel {
        padding: 16px;
        border-radius: 10px;
    }

    .automation-builder-head {
        align-items: stretch;
        flex-direction: column;
    }

    .automation-builder-head .btn {
        width: 100%;
    }

    .automation-rule-grid,
    .automation-condition-row,
    .automation-action-row,
    .automation-presets {
        grid-template-columns: 1fr;
    }

    .automation-rule-grid .automation-field:last-child {
        grid-column: auto;
    }

    .automation-step-card {
        padding: 14px;
    }

    .automation-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .automation-form-actions .btn {
        width: 100%;
    }
}

/* Automation test runner */
.automation-test-panel {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.automation-test-panel strong,
.automation-test-panel span {
    display: block;
}

.automation-test-panel span {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 650;
    margin-top: 2px;
}

.automation-test-panel form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(100px, 160px) max-content;
    gap: 8px;
    align-items: center;
}

.automation-test-panel form > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .automation-test-panel,
    .automation-test-panel form {
        grid-template-columns: 1fr;
    }

    .automation-test-panel .btn {
        width: 100%;
    }
}

.webhook-log-list {
    display: grid;
    gap: 8px;
}

.webhook-log-list > div {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfcfe;
    padding: 9px 10px;
}

.webhook-log-list strong,
.webhook-log-list span,
.webhook-log-list small {
    display: block;
}

.webhook-log-list span,
.webhook-log-list small {
    color: var(--muted);
    font-size: .8rem;
}

.ai-status {
    min-height: 22px;
    margin: 8px 0 12px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.ai-status.success {
    color: var(--green);
}

.ai-status.error {
    color: #dc2626;
}

/* Billing & plans */
.billing-page {
    max-width: 1420px;
    margin: 0 auto;
}

.billing-heading,
.billing-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.billing-heading h1,
.billing-plan-head h2 {
    color: var(--green);
    font-size: 1.15rem;
    font-weight: 550;
    margin: 0 0 6px;
}

.billing-heading p,
.billing-plan-head p {
    color: #64748b;
    font-size: .75rem;
    font-weight: 400;
    margin: 0;
}

.billing-heading .btn {
    min-height: 40px;
    padding-inline: 22px;
    border-radius: 10px;
}

.billing-current-card {
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    overflow: hidden;
}

.billing-current-head {
    min-height: 112px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    border-bottom: 1px solid #eef2f7;
    padding: 20px 24px;
}

.billing-shield,
.billing-usage-title span,
.billing-footer-info > div > span {
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f7f9fc;
    color: #8fa0b8;
}

.billing-shield {
    width: 56px;
    height: 56px;
    background: #effaf5;
    color: var(--green);
    font-size: 1.55rem;
}

.billing-current-head h2 {
    color: #111827;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 5px;
}

.billing-current-head h2 span {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #dff8eb;
    color: var(--green);
    padding: 0 12px;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.billing-current-head p {
    color: #8fa0b8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .82rem;
    font-weight: 500;
}

.billing-current-head p b {
    color: #172033;
}

.billing-usage-section {
    padding: 24px;
}

.billing-section-label {
    color: #7c8ba1;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .08em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.billing-usage-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.billing-usage-card {
    min-height: 115px;
    display: flex;
    flex-direction: column;
    border: 1px solid #edf1f6;
    border-radius: 10px;
    background: #fff;
    padding: 11px;
}

.billing-usage-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.billing-usage-title span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: .95rem;
}

.billing-usage-title strong {
    color: #172033;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 600;
}

.billing-unlimited {
    color: var(--green);
    font-size: .68rem;
    font-weight: 850;
    margin: auto 0 -2px;
}

.billing-usage-number {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.billing-usage-number strong {
    color: #111827;
    font-size: 1.35rem;
    font-weight: 850;
}

.billing-usage-number small {
    color: #9aa8bd;
    font-size: .72rem;
    font-weight: 750;
    text-align: right;
}

.billing-usage-bar {
    height: 6px;
    border-radius: 999px;
    background: #edf2f7;
    margin-top: 12px;
    overflow: hidden;
}

.billing-usage-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green);
}

.billing-footer-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    border-top: 1px solid #eef2f7;
    margin: 18px 24px 0;
    padding: 24px 0;
}

.billing-footer-info > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.billing-footer-info > div > span {
    width: 42px;
    height: 42px;
}

.billing-footer-info small {
    color: #8fa0b8;
    display: block;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.billing-footer-info strong {
    color: #172033;
    display: block;
    font-size: .9rem;
    font-weight: 850;
}

.billing-footer-info p {
    color: #64748b;
    margin: 4px 0 0;
    font-size: .78rem;
    font-weight: 700;
}

.billing-plan-list {
    margin-top: 28px;
}

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

.billing-plan-card {
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.billing-plan-card.is-current {
    border-color: rgba(7, 167, 121, .35);
    box-shadow: 0 10px 28px rgba(7, 167, 121, .10);
}

.billing-plan-card.is-disabled {
    opacity: .68;
}

.billing-plan-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.billing-plan-card h3 {
    color: #172033;
    font-size: 1rem;
    font-weight: 850;
    margin: 0;
}

.billing-plan-card-head span {
    border-radius: 999px;
    background: #dff8eb;
    color: var(--green);
    padding: 4px 10px;
    font-size: .68rem;
    font-weight: 850;
}

.billing-plan-price {
    color: #111827;
    font-size: 1.65rem;
    font-weight: 850;
    margin: 14px 0;
}

.billing-plan-price small {
    color: #8fa0b8;
    font-size: .78rem;
    margin-left: 4px;
}

.billing-plan-limits {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.billing-plan-limits div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
    color: #64748b;
    font-size: .8rem;
    font-weight: 700;
}

.billing-plan-limits strong {
    color: #172033;
}

.billing-cancel-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Checkout */
.checkout-page {
    max-width: 1380px;
    margin: -20px auto 0;
    padding-bottom: 28px;
}

.checkout-page h1 {
    color: #0f172a;
    font-size: 1.3rem;
    font-weight: 550;
    margin: 0 -20px 10px;
    padding: 14px 36px;
    background: #f8fafc;
    border-bottom: 1px solid #edf1f6;
}

.checkout-plan-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    border: 1px solid #b9efd8;
    border-radius: 14px;
    background: #f7fffb;
    box-shadow: 0 8px 20px rgba(7, 167, 121, .10);
    padding: 15px;
    overflow: hidden;
}

.checkout-plan-watermark {
    position: absolute;
    right: 48px;
    top: 34px;
    color: rgba(7, 167, 121, .10);
    font-size: 6.5rem;
}

.checkout-plan-main,
.checkout-amount {
    position: relative;
    z-index: 1;
}

.checkout-plan-main span,
.checkout-amount span {
        color: var(--green);
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.checkout-plan-main strong {
    color: #0f172a;
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.checkout-amount {
    text-align: right;
}

.checkout-amount strong {
    color: var(--green);
    display: block;
    font-size: 2.75rem;
    font-weight: 900;
    letter-spacing: .01em;
}

.checkout-feature-row {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-top: 1px solid #d9f4e8;
    margin-top: 20px;
    padding-top: 28px;
}

.checkout-feature-row div {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #090f1d;
    font-size: 0.8rem;
    font-weight: 550;
}

.checkout-feature-row i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #dff8eb;
    color: var(--green);
}

.checkout-inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 26px 0;
}

.checkout-inline-fields label {
    display: grid;
    gap: 8px;
}

.checkout-inline-fields span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 850;
}

.checkout-inline-fields .form-control {
    min-height: 40px;
    border-radius: 12px;
}

.checkout-page h2 {
    color: #8fa0b8;
    font-size: 0.9rem;
    font-weight: 450;
    margin: 20px 0 10px;
}

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

.checkout-method {
    position: relative;
    min-height: 85px;
    border: 1px solid #dfe7f0;
    border-radius: 14px;
    background: #fff;
    display: flex;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: #66758c;
    padding: 16px;
    text-align: center;
}

.checkout-method.is-active {
    border: 3px solid #72c58d;
    /* background: #f7fffb; */
    box-shadow: inset 0 0 0 2px rgba(7, 167, 121, .10);
    color: #0f172a;
}

.checkout-method.is-disabled {
    opacity: .62;
}

.checkout-selected-icon {
    position: absolute;
    top: 20px;
    right: 28px;
    color: var(--green);
    display: none;
    font-size: 1.8rem;
}

.checkout-method.is-active .checkout-selected-icon {
    display: block;
}

.checkout-method-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    /* background: #f6f8fb; */
    color: #91a1b8;
    font-size: 2rem;
}

.checkout-method.is-active .checkout-method-icon {
    /* background: var(--green); */
    color: #fff;
    box-shadow: 0 12px 26px rgba(7, 167, 121, .24);
}

.checkout-method strong {
    color: inherit;
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
}

.checkout-method small {
    color: #91a1b8;
    font-size: .75rem;
    font-weight: 400;
}

.checkout-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.checkout-actions .btn {
    min-height: 40px;
    border: 0;
    border-radius: 26px;
    font-size: 0.80rem;
    font-weight: 450;
    letter-spacing: .02em;
}

.checkout-actions .btn-light {
    color: #64748b;
    background: #eef2f7;
}

.checkout-payment-status {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 11000;
    width: min(520px, calc(100vw - 28px));
    min-height: 66px;
    transform: translate(-50%, 18px);
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #c7f1df;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
    padding: 12px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.checkout-payment-status.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.checkout-payment-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #dff8eb;
    border-top-color: var(--green);
    border-radius: 999px;
    animation: checkoutSpin .8s linear infinite;
}

.checkout-payment-status[data-state="success"] .checkout-payment-spinner {
    border-color: var(--green);
    animation: none;
}

.checkout-payment-status[data-state="expired"] {
    border-color: #fed7aa;
}

.checkout-payment-status[data-state="expired"] .checkout-payment-spinner {
    border-color: #f97316;
    animation: none;
}

.checkout-payment-status strong {
    display: block;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
}

.checkout-payment-status span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.35;
}

.checkout-payment-timer {
    min-width: 58px;
    border-radius: 999px;
    background: #edfdf6;
    color: var(--green) !important;
    padding: 7px 10px;
    text-align: center;
    font-size: .78rem !important;
    font-weight: 800 !important;
}

@keyframes checkoutSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1200px) {
    .billing-usage-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

@media (max-width: 991.98px) {
    .billing-usage-grid,
    .billing-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-footer-info {
        grid-template-columns: 1fr;
    }

    .checkout-plan-card {
        grid-template-columns: 1fr;
    }

    .checkout-amount {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .billing-heading,
    .billing-plan-head {
        display: grid;
    }

    .billing-heading .btn,
    .billing-plan-head .btn,
    .billing-cancel-form .btn {
        width: 100%;
    }

    .billing-current-head {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .billing-usage-section {
        padding: 18px;
    }

    .billing-usage-grid,
    .billing-plan-grid {
        grid-template-columns: 1fr;
    }

    .billing-footer-info {
        margin-inline: 18px;
    }

    .checkout-page h1 {
        font-size: 1.7rem;
        margin-inline: -14px;
        padding: 24px 18px;
    }

    .checkout-plan-card {
        padding: 26px 20px;
    }

    .checkout-amount strong {
        font-size: 2.1rem;
    }

    .checkout-feature-row,
    .checkout-inline-fields,
    .checkout-method-grid,
    .checkout-actions {
        grid-template-columns: 1fr;
    }

    .checkout-method {
        min-height: 210px;
    }

    .checkout-actions {
        gap: 14px;
        margin-top: 32px;
    }

    .checkout-actions .btn {
        min-height: 62px;
    }
}

.agents-page {
    display: grid;
    gap: 16px;
}

.agent-create-panel {
    padding: 18px;
}

.agent-create-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr)) max-content;
    gap: 12px;
    align-items: end;
}

.agent-create-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.agent-create-form label span {
    font-weight: 700;
    color: #1f2937;
}

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

    .agent-create-form .btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .agent-create-form {
        grid-template-columns: 1fr;
    }
}

/* Inbox chat section refresh */
.team-chat-panel {
    position: relative;
}

.team-chat-panel .team-chat-header {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 70px;
}

.team-chat-header .chat-controls {
    grid-column: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
}

.team-chat-header .chat-timer-pill {
    min-width: 0;
    max-width: min(360px, 34vw);
}

.team-chat-header .chat-timer-pill span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-hidden-controls {
    display: none;
}

.chat-header-icon {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    display: grid;
    place-items: center;
    font-size: 1.32rem;
}

.chat-header-icon:hover,
.chat-header-icon:focus,
.chat-header-icon.is-active {
    background: var(--green-soft);
    color: var(--green);
}

.chat-resolve-btn {
    min-width: 106px;
    background: #f1f7fd;
    border-color: #cbdced;
    color: var(--green);
    font-weight: 700;
}

.chat-resolve-btn.is-unresolve {
    color: #b45309;
    background: #fff7ed;
    border-color: #fed7aa;
}

.chat-timer-pill {
    min-height: 34px;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.chat-timer-pill.is-open {
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #047857;
    width: 250px;
}

.chat-timer-pill.is-closed {
    border-color: #fecaca;
    background: #fff1f2;
    color: #e11d48;
}

.message-date-chip {
    width: max-content;
    margin: 0 auto 22px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef2f7;
    color: #64748b;
    font-size: .75rem;
    font-weight: 600;
}

.message-search-panel {
    display: none;
    position: relative;
    z-index: 30;
    min-height: 40px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    align-items: center;
    grid-template-columns: 38px minmax(0, 1fr) 42px;
    gap: 10px;
    padding: 0 22px;
    color: #8fa0b8;
}

.message-search-panel.is-open {
    display: grid;
}

.message-search-panel i {
    font-size: 0.95rem;
}

.message-search-panel input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: #111827;
    font-size: 0.85rem;
    font-weight: 400;
}

.message-search-panel input::placeholder {
    color: #9aa7ba;
}

.message-search-panel button {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 1.15rem;
}

.chat-filter-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
}

.chat-filter-modal.is-open {
    display: block;
}

.chat-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .24);
}

.chat-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(92vw, 460px);
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    overflow: hidden;
}

.chat-modal-head {
    min-height: 40px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 28px;
}

.chat-modal-head h2 {
    color: var(--green);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.90rem;
    font-weight: 700;
    margin: 0;
}

.chat-modal-close {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

.chat-modal-body {
    display: grid;
    gap: 22px;
    padding: 28px;
}

.chat-modal-body label {
    display: grid;
    gap: 10px;
}

.chat-modal-body label span {
    color: #111827;
    font-weight: 500;
}

.chat-modal-body .form-control {
    min-height: 52px;
    border-radius: 14px;
    background: #f8fafc;
    font-weight: 400;
}

.chat-modal-actions {
    border-top: 1px solid var(--border);
    background: #fbfcfd;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px 28px;
}

.chat-modal-actions .btn {
    min-height: 52px;
    border-radius: 14px;
    font-size: .98rem;
}

.contact-overview-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 100%);
    height: 100%;
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: -18px 0 42px rgba(15, 23, 42, .12);
    transform: translateX(104%);
    transition: transform .22s ease;
    z-index: 25;
    overflow-y: auto;
}

.contact-overview-panel.is-open {
    transform: translateX(0);
}

.contact-overview-head {
    min-height: 40px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}

.contact-overview-head h2 {
    color: #172033;
    font-size: .85rem;
    font-weight: 600;
    margin: 0;
}

.contact-overview-head button,
.contact-delete-btn {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.95rem;
}

.contact-overview-profile {
    position: relative;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 26px 24px 30px;
    border-bottom: 1px solid var(--border);
}

.contact-overview-profile .conversation-avatar {
    width: 60px;
    height: 60px;
    font-size: 0.95rem;
}

.contact-overview-profile strong {
    color: #172033;
    font-size: 0.90rem;
    font-weight: 700;
}

.contact-overview-profile > span {
    color: #64748b;
    font-size: 1rem;
}

.contact-delete-btn {
    position: absolute;
    right: 22px;
    top: 18px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff1f2;
    color: #e11d48;
    display: grid;
    place-items: center;
}

.overview-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

.overview-badges span,
.overview-badges button {
    min-height: 40px;
    border-radius: 14px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.overview-badges span {
    border: 1px solid #183a68;
    color: #183a68;
    background: #f8fbff;
}

.overview-badges button {
    border: 1px dashed #d7dce4;
    background: #fff;
}

.overview-section {
    padding: 28px 24px;
    border-bottom: 1px solid var(--border);
}

.overview-section-title {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.overview-section-title i {
    color: var(--green);
    font-size: 1.35rem;
}

.overview-section-title strong {
    color: #090909;
    font-size: 0.75rem;
    font-weight: 700;
}

.overview-section-title button {
    border: 0;
    border-radius: 8px;
    background: #f0faf5;
    color: var(--green);
    padding: 7px 10px;
    font-weight: 600;
    font-size: 0.75rem;
}

.overview-select-wrap {
    display: grid;
}

.overview-select-wrap span {
    width: fit-content;
    transform: translate(16px, 10px);
    background: #fff;
    color: #94a3b8;
    padding: 0 8px;
    font-size: .82rem;
    font-weight: 700;
    z-index: 1;
}

.overview-select-wrap .form-select {
    min-height: 45px;
    border-radius: 14px;
    background-color: #f8fafc;
    color: #111827;
    font-size: .76rem;
}

.overview-link-action {
    margin-top: 12px;
    border: 0;
    background: transparent;
    color: var(--green);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.overview-muted {
    color: var(--muted);
    font-size: .9rem;
}

.clear-chat-action {
    color: #e11d48;
}

.chat-reply.is-hidden {
    display: none;
}

.reply-input-wrap {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 38px 38px 38px minmax(0, 1fr);
    align-items: center;
    border: 1px solid #dfe7f0;
    border-radius: 16px;
    background: #fff;
    overflow: visible;
}

.reply-input-wrap .form-control {
    border: 0;
    box-shadow: none;
    min-height: 44px;
    padding-left: 6px;
}

.reply-tool-btn {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #64748b;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.reply-tool-btn:hover,
.reply-tool-btn.is-active {
    color: var(--green);
}

.reply-tool-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}

.reply-media-input {
    display: none;
}

.reply-media-preview {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 100%;
    border: 1px solid #dbe8f2;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
    padding: 7px 10px;
    font-size: .82rem;
}

.reply-media-preview.is-hidden {
    display: none;
}

.reply-media-preview span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-media-preview button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    display: grid;
    place-items: center;
}

.emoji-picker {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 60;
    width: min(300px, calc(100vw - 40px));
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    border: 1px solid #e4eaf2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
    padding: 10px;
}

.emoji-picker.is-open {
    display: grid;
}

.emoji-picker button {
    width: 44px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #f8fafc;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

.emoji-picker button:hover {
    background: #e9f8f1;
}

.template-reengage-bar.is-hidden {
    display: none;
}

.team-chat-panel .reply-note {
    min-height: 0;
    padding: 0;
    color: #75849a;
    font-weight: 650;
}

.chat-template-footer-btn {
    display: none;
    position: static;
    flex: 0 0 auto;
    min-height: 35px;
    min-width: 120px;
    border-radius: 14px;
    font-size: 0.75rem;
    letter-spacing: .03em;
}

.chat-template-footer-btn.is-visible {
    display: inline-flex;
}

@media (max-width: 575.98px) {
    .team-chat-panel .team-chat-header {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .team-chat-header .chat-controls {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .chat-modal-dialog {
        width: calc(100vw - 18px);
    }

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

    .template-reengage-bar {
        align-items: stretch;
        flex-direction: column;
        padding: 12px 18px;
    }

    .chat-template-footer-btn {
        width: 100%;
        justify-content: center;
    }
}

.super-admin-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 4px 0 32px;
}

.super-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.super-head h1 {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
}

.super-head p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: .80rem;
    font-weight: 400;
}

.super-btn,
.super-icon-btn {
    border: 0;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(16, 163, 127, .16);
}

.super-btn.is-light,
.super-icon-btn {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    box-shadow: none;
}

.super-icon-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
}

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

.super-row-actions form {
    margin: 0;
}

.super-icon-btn.is-danger {
    color: #dc2626;
}

.super-icon-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    opacity: .6;
}

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

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

.super-stat-card,
.super-card {
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.super-stat-card {
    min-height: 100px;
    padding: 15px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.super-stat-card > span {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: var(--green);
    font-size: 1.25rem;
}

.super-stat-card strong {
        display: block;
    color: #0f172a;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 650;
}

.super-stat-card p,
.super-card h2 {
    margin: 5px 0 0;
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 500;
}

.super-stat-card small,
.super-table small {
    display: block;
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 400;
}

.super-card {
    margin-top: 18px;
    padding: 15px;
}

.super-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.super-card-head h2 {
    margin: 0;
}

.super-card-head a {
    color: var(--green);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

.super-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.super-filter-tab {
    border: 1px solid #dbe4ef;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    min-height: 34px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.super-filter-tab.is-active {
    border-color: #9ee7c4;
    background: #ecfdf5;
    color: var(--green);
}

.super-form label {
    color: #334155;
    font-size: .85rem;
    font-weight: 700;
}

.super-form .form-control,
.super-form .form-select,
.super-inline-form .form-control,
.super-inline-form .form-select {
    min-height: 30px;
    border-color: #dbe4ef;
    border-radius: 12px;
    color: #0f172a;
    font-size: .7rem;
    font-weight: 500;
    min-width: 0px;
}

.super-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.super-checks,
.super-module-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.super-checks label,
.super-module-grid label {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    min-height: 36px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: .82rem;
}

.super-module-grid {
    margin-top: 16px;
}

.super-table-wrap {
    width: 100%;
    overflow: auto;
}

.super-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
}

.super-table-wide {
    min-width: 1280px;
}

.super-table th {
    height: 40px;
    padding: 0 14px;
    border-bottom: 1px solid #e7edf5;
    color: #475569;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.super-table td {
    height: 40px;
    padding: 5px 14px;
    border-bottom: 1px solid #eef2f7;
    color: #1f2937;
    font-size: .75rem;
    font-weight: 500;
    vertical-align: middle;
}

.super-table td strong,
.super-table td span {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.super-table .super-message-cell {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.super-badge {
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 11px;
    font-size: .70rem;
    font-weight: 500;
    width: fit-content;
    text-transform: capitalize;
}

.super-badge.is-good {
    background: #dcfce7;
    color: #059669;
}

.super-badge.is-danger {
    background: #fee2e2;
    color: #dc2626;
}

.super-badge.is-warn {
    background: #fff7ed;
    color: #c2410c;
}

.super-divider {
    border: 0;
    border-top: 1px solid #edf2f7;
    margin: 18px 0;
}

.super-hint-box {
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    background: #f0fdf4;
    color: #166534;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: .82rem;
}

.super-mini-status {
    border: 1px solid #e7edf5;
    border-radius: 12px;
    background: #f8fafc;
    min-height: 58px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.super-mini-status strong {
    color: #1f2937;
    font-size: .82rem;
    font-weight: 600;
}

.super-code-block {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: #334155;
    font-size: .82rem;
    line-height: 1.7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.super-muted {
    color: #64748b;
    font-size: .82rem;
    margin: 0 0 12px;
}

.super-inline-form {
    min-width: 410px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 40px;
    gap: 8px;
    align-items: center;
}

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

.impersonation-banner {
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: #f0fdf4;
    color: #047857;
    min-height: 48px;
    margin-bottom: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .9rem;
    font-weight: 700;
}

.impersonation-banner button {
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    min-height: 34px;
    padding: 0 12px;
    font-size: .82rem;
    font-weight: 700;
}

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

@media (max-width: 991.98px) {
    .super-head,
    .impersonation-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .super-grid-2,
    .super-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .super-stats-grid,
    .super-grid-4 {
        grid-template-columns: 1fr;
    }

    .super-head h1 {
        font-size: 1.45rem;
    }

    .super-card {
        padding: 16px;
    }
}

/* Branding logo behavior: expanded sidebar uses main logo, collapsed uses sidebar logo. */
.sidebar-head .brand {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: left;
}

.sidebar-head .brand-logo-main {
    display: block;
    width: auto;
    max-width: 154px;
    height: 58px;
    object-fit: contain;
    object-position: left center;
    flex: 0 1 auto;
}

.sidebar-head .brand-logo-collapsed {
    display: none;
}

.sidebar-head .brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.sidebar-collapsed .sidebar-head {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-head .brand {
    justify-content: center;
    width: 58px;
    flex: 0 0 58px;
}

body.sidebar-collapsed .sidebar-head .brand-logo-main {
    display: none;
}

body.sidebar-collapsed .sidebar-head .brand-logo-collapsed {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
    object-position: center;
}

/* Landing page refresh using real product screenshots. */
body.wamax-body {
    background: #f7faf9;
    color: #13201c;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
}

.wamax-body h1,
.wamax-body h2,
.wamax-body h3,
.wamax-body h4,
.wamax-body h5,
.wamax-body h6 {
    color: #101827;
    font-weight: 700;
    letter-spacing: 0;
}

.wamax-body .btn {
    border-radius: 12px;
    min-height: 40px;
    padding: 6px 14px;
    font-size: .75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wamax-body .btn-success {
    background: #059669;
    border-color: #059669;
    box-shadow: 0 10px 22px rgba(5, 150, 105, .18);
}

.wamax-body .btn-outline-success {
    color: #047857;
    border-color: #bfdfd3;
    background: #fff;
}

.wamax-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 72px;
    max-width: 100%;
    margin: 0;
    padding: 12px clamp(18px, 4vw, 48px);
    border-bottom: 1px solid #e7edf5;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    display: grid;
    grid-template-columns: minmax(140px, 190px) 1fr auto;
    align-items: center;
    gap: 22px;
}

.wamax-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

.wamax-brand img {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 48px;
    object-fit: contain;
}

.wamax-nav nav,
.wamax-footer nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.4vw, 30px);
}

.wamax-nav nav a,
.wamax-footer nav a {
    color: #000;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
}

.wamax-nav nav a:hover,
.wamax-footer nav a:hover {
    color: #059669;
}

.wamax-nav > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.wamax-hero {
    /* width: min(1240px, calc(100% - 48px)); */
    margin: 0 auto;
    min-height: auto;
    padding: 40px 40px 40px;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: clamp(26px, 5vw, 64px);
}

.wamax-hero-copy {
    max-width: 540px;
    animation: none;
}

.wamax-pill,
.wamax-eyebrow {
    width: fit-content;
    border: 1px solid #cce9df;
    border-radius: 999px;
    background: #eefaf5;
    color: #047857;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wamax-hero h1 {
    max-width: 680px;
    margin: 18px 0 14px;
    color: #0f172a;
    font-size: 1.8rem;
    line-height: 1.25;
    font-weight: 600;
}

.wamax-hero p,
.wamax-section p,
.wamax-dashboard-band p,
.wamax-contact p {
    color: #64748b;
    font-size: .90rem;
    font-weight: 400;
    line-height: 1.5;
}

.wamax-hero-actions,
.wamax-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.wamax-stat-strip {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wamax-stat-strip span {
    min-height: 72px;
    border: 1px solid #e4ecef;
    border-radius: 14px;
    background: #fff;
    padding: 8px 14px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.wamax-stat-strip strong,
.wamax-stat-strip small {
    display: block;
}

.wamax-stat-strip strong {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 700;
}

.wamax-stat-strip small {
    margin-top: 2px;
    color: #7b8ba0;
    font-size: .78rem;
    font-weight: 500;
}

.wamax-hero-art,
.feature-visual,
.wamax-dashboard-band img {
    border: 1px solid #e3ebf0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .12);
    overflow: hidden;
}

.wamax-hero-art {
    animation: wamaxFloat 8s ease-in-out infinite;
}

.wamax-animate {
    opacity: 0;
    transform: translateY(26px) scale(.985);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease;
    will-change: opacity, transform;
}

.wamax-animate.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wamax-animate.wamax-hero-art.is-visible {
    animation: wamaxFloat 8s ease-in-out infinite;
}

.wamax-hero-art img,
.feature-visual img,
.wamax-dashboard-band img {
    display: block;
    width: 100%;
    height: auto;
}

.wamax-section {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 30px 0 15px;
    text-align: center;
}

.wamax-section.addon-intro {
    padding-top: 0;
}

.wamax-section.intro {
    padding-top: 46px;
}

.wamax-section h2,
.wamax-showcase h2,
.wamax-dashboard-band h2,
.wamax-contact h2 {
    margin: 12px auto 10px;
    max-width: 1000px;
    font-size: 2rem;
    line-height: 1.16;
    font-weight: 600;
}

.wamax-section p {
    max-width: 1000px;
    margin: 0 auto;
}

.wamax-feature-list {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 22px 0 0px;
    display: grid;
    gap: 28px;
}

.wamax-feature-row,
.wamax-feature-row.reverse {
    min-height: 0;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid #e4ecef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
    display: grid;
    grid-template-columns: .74fr 1.26fr;
    align-items: center;
    gap: clamp(20px, 4vw, 46px);
}

.wamax-feature-row.reverse {
    grid-template-columns: 1.26fr .74fr;
}

.wamax-feature-row.reverse .feature-copy {
    order: 2;
}

.feature-copy span {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #e9f8f1;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.feature-copy h3 {
    margin: 16px 0 8px;
    color: #0f172a;
    font-size: clamp(1.28rem, 2vw, 1.72rem);
    font-weight: 700;
}

.feature-copy p {
    margin: 0;
    color: #64748b;
    font-size: .94rem;
    font-weight: 500;
    line-height: 1.7;
}

.feature-copy a {
    margin-top: 18px;
    color: #059669;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.wamax-showcase,
.wamax-developer-band,
.wamax-dashboard-band,
.wamax-contact {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto 64px;
    border: 1px solid #e4ecef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}

.wamax-showcase {
    padding: clamp(22px, 4vw, 38px);
    display: grid;
    grid-template-columns: .62fr 1.38fr;
    gap: 28px;
}

.wamax-showcase h2,
.wamax-showcase p {
    margin-left: 0;
    text-align: left;
}

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

.wamax-step-grid article {
    min-height: 150px;
    border: 1px solid #e8eef3;
    border-radius: 16px;
    background: #f8fbfa;
    padding: 18px;
}

.wamax-step-grid strong {
    color: #059669;
    font-size: .82rem;
    font-weight: 700;
}

.wamax-step-grid h3 {
    margin: 9px 0 7px;
    font-size: 1.05rem;
    font-weight: 700;
}

.wamax-step-grid p {
    margin: 0;
    color: #66778b;
    font-size: .86rem;
    font-weight: 500;
}

.wamax-module-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    text-align: left;
}

.wamax-module-grid article {
    min-height: 190px;
    border: 1px solid #e4ecef;
    border-radius: 18px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

.wamax-module-grid i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eefaf5;
    color: #059669;
    font-size: 1.08rem;
}

.wamax-module-grid h3 {
    margin: 13px 0 7px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
}

.wamax-module-grid p {
    margin: 0;
    color: #66778b;
    font-size: .84rem;
    line-height: 1.55;
}

.wamax-addon-band,
.wamax-ops-board,
.wamax-security-band {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto 64px;
}

.wamax-addon-band {
    position: relative;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid #dceee8;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(236, 253, 245, .95), rgba(255, 255, 255, .98)),
        radial-gradient(circle at 92% 12%, rgba(5, 150, 105, .12), transparent 28%);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
    overflow: hidden;
}

.wamax-addon-band::before {
    content: "\F6B1  \F3ED  \F47B  \F1E7";
    position: absolute;
    right: 22px;
    top: 18px;
    color: rgba(5, 150, 105, .08);
    font-family: "bootstrap-icons";
    font-size: clamp(3rem, 9vw, 7rem);
    letter-spacing: 14px;
    pointer-events: none;
}

.wamax-addon-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.wamax-addon-grid article,
.wamax-ops-list article,
.wamax-security-grid article,
.wamax-module-grid article,
.wamax-usecase-grid article,
.wamax-plan-grid article {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.wamax-addon-grid article:hover,
.wamax-ops-list article:hover,
.wamax-security-grid article:hover,
.wamax-module-grid article:hover,
.wamax-usecase-grid article:hover,
.wamax-plan-grid article:hover {
    transform: translateY(-4px);
    border-color: #bfe8d8;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .09);
}

.wamax-addon-grid article {
    position: relative;
    min-height: 214px;
    border: 1px solid #e4ecef;
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    padding: 20px;
    overflow: hidden;
}

.wamax-addon-grid article::after {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, #059669, rgba(5, 150, 105, .12));
    transform: scaleX(.35);
    transform-origin: left;
    transition: transform .24s ease;
}

.wamax-addon-grid article:hover::after {
    transform: scaleX(1);
}

.wamax-addon-grid i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e9f8f1;
    color: #059669;
    font-size: 1.14rem;
}

.wamax-addon-grid h3 {
    margin: 15px 0 8px;
    color: #0f172a;
    font-size: 1.04rem;
    font-weight: 700;
}

.wamax-addon-grid p {
    margin: 0;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.62;
    font-weight: 500;
}

.wamax-addon-grid span {
    display: inline-flex;
    margin-top: 14px;
    border-radius: 999px;
    background: #f0fdf4;
    color: #047857;
    padding: 6px 10px;
    font-size: .72rem;
    font-weight: 700;
}

.wamax-ops-board,
.wamax-security-band {
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid #e4ecef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(20px, 4vw, 44px);
    align-items: start;
}

.wamax-ops-visual {
    margin-top: 18px;
    border: 1px solid #e4ecef;
    border-radius: 18px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.wamax-ops-visual img {
    display: block;
    width: 100%;
    border-radius: 14px;
    border: 1px solid #edf2f7;
}

.wamax-ops-visual div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.wamax-ops-visual span,
.wamax-security-visual span {
    min-height: 38px;
    border-radius: 12px;
    background: #f0fdf4;
    color: #047857;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 9px;
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
}

.wamax-security-visual {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wamax-ops-board h2,
.wamax-ops-board p,
.wamax-security-band h2,
.wamax-security-band p {
    margin-left: 0;
    text-align: left;
}

.wamax-ops-board h2,
.wamax-security-band h2 {
    margin-top: 12px;
    color: #0f172a;
    font-size: 2rem;
    line-height: 1.16;
    font-weight: 600;
}

.wamax-ops-board p,
.wamax-security-band p {
    color: #64748b;
    font-size: .94rem;
    line-height: 1.7;
    font-weight: 500;
}

.wamax-ops-list,
.wamax-security-grid {
    display: grid;
    gap: 12px;
}

.wamax-ops-list article {
    min-height: 112px;
    border: 1px solid #e8eef3;
    border-radius: 17px;
    background: #f8fbfa;
    padding: 16px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
}

.wamax-ops-list i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e9f8f1;
    color: #059669;
    font-size: 1.08rem;
}

.wamax-ops-list h3,
.wamax-security-grid strong {
    margin: 0 0 5px;
    color: #0f172a;
    font-size: .98rem;
    font-weight: 700;
}

.wamax-ops-list p,
.wamax-security-grid p {
    margin: 0;
    color: #66778b;
    font-size: .84rem;
    line-height: 1.58;
    font-weight: 500;
}

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

.wamax-security-grid article {
    min-height: 132px;
    border: 1px solid #e8eef3;
    border-radius: 16px;
    background: #f8fbfa;
    padding: 17px;
}

.wamax-security-grid strong {
    display: block;
}

.wamax-developer-band {
    padding: clamp(22px, 4vw, 38px);
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    align-items: center;
    gap: clamp(20px, 4vw, 42px);
}

.wamax-developer-band h2,
.wamax-developer-band p {
    margin-left: 0;
    text-align: left;
}

.wamax-mini-list {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wamax-mini-list span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #526176;
    font-size: .88rem;
    font-weight: 600;
}

.wamax-mini-list i {
    color: #059669;
}

.wamax-developer-card {
    border: 1px solid #d7efe4;
    border-radius: 20px;
    background: #f5fffa;
    padding: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.wamax-developer-card strong {
    display: block;
    margin-bottom: 12px;
    color: #0f172a;
    font-size: 1.05rem;
}

.wamax-developer-card p {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 10px 0;
    color: #526176;
    font-size: .9rem;
}

.wamax-developer-card i {
    color: #059669;
}

.wamax-dashboard-band {
    padding: clamp(22px, 4vw, 38px);
    display: grid;
    grid-template-columns: .64fr 1.36fr;
    align-items: center;
    gap: clamp(20px, 4vw, 44px);
}

.wamax-dashboard-band h2,
.wamax-dashboard-band p {
    margin-left: 0;
    text-align: left;
}

.wamax-plan-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    text-align: left;
}

.wamax-plan-grid article {
    position: relative;
    border: 1px solid #e4ecef;
    border-radius: 18px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

.wamax-plan-grid h3 {
    margin: 0 0 12px;
    font-size: 1.08rem;
}

.wamax-plan-grid .plan-ribbon {
    position: absolute;
    top: 16px;
    right: 16px;
    border-radius: 999px;
    background: #e9f8f1;
    color: #047857;
    padding: 5px 10px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.wamax-plan-grid strong {
    display: block;
    margin-bottom: 14px;
    color: #059669;
    font-size: 1.85rem;
    line-height: 1;
    font-weight: 700;
}

.wamax-plan-grid small {
    color: #7b8ba0;
    font-size: .85rem;
    font-weight: 600;
}

.wamax-plan-grid em {
    display: block;
    margin: -5px 0 12px;
    color: #64748b;
    font-size: .82rem;
    font-style: normal;
    font-weight: 600;
}

.wamax-plan-grid p {
    margin: 7px 0;
    color: #66778b;
    font-size: .9rem;
    font-weight: 500;
}

.wamax-plan-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 12px;
}

.wamax-plan-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 5px 10px;
    background: #f2f7f5;
    color: #475569;
    font-size: .78rem;
    font-weight: 700;
}

.wamax-plan-grid .btn {
    width: 100%;
    margin-top: 14px;
}

.wamax-empty-pricing {
    margin: 26px auto 0;
    max-width: 560px;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #fff;
    padding: 28px;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #64748b;
}

.wamax-empty-pricing i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eefaf5;
    color: #059669;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}

.wamax-empty-pricing strong {
    color: #0f172a;
    font-size: 1rem;
}

.faq-list {
    margin: 24px auto 0;
    max-width: 860px;
    display: grid;
    gap: 12px;
    text-align: left;
}

.faq-list details {
    border: 1px solid #e4ecef;
    border-radius: 16px;
    background: #fff;
    padding: 16px 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .05);
}

.faq-list summary {
    cursor: pointer;
    color: #0f172a;
    font-size: .98rem;
    font-weight: 700;
}

.faq-list p {
    margin: 10px 0 0;
    color: #66778b;
    font-size: .9rem;
    font-weight: 500;
}

.wamax-contact {
    padding: clamp(24px, 4vw, 42px);
    background: linear-gradient(135deg, #ffffff 0%, #eefaf5 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.wamax-contact h2 {
    max-width: 760px;
    margin-left: 0;
    text-align: left;
}

.wamax-contact p {
    margin: 0;
}

.wamax-footer {
    /* width: min(1240px, calc(100% - 48px)); */
    margin: 0 auto;
    padding: 10px 40px 10px;
    border-top: 1px solid #e4ecef;
    color: #7b8ba0;
    display: grid;
    grid-template-columns: minmax(130px, 180px) 1fr auto;
    align-items: center;
    gap: 18px;
    font-size: .86rem;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    .wamax-nav {
        grid-template-columns: 1fr auto;
    }

    .wamax-nav nav {
        display: none;
        order: 3;
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .wamax-hero,
    .wamax-feature-row,
    .wamax-feature-row.reverse,
    .wamax-showcase,
    .wamax-developer-band,
    .wamax-dashboard-band,
    .wamax-ops-board,
    .wamax-security-band {
        grid-template-columns: 1fr;
    }

    .wamax-feature-row.reverse .feature-copy {
        order: 0;
    }

    .wamax-hero-copy {
        max-width: 720px;
    }

    .wamax-step-grid,
    .wamax-module-grid,
    .wamax-mini-list,
    .wamax-addon-grid,
    .wamax-security-grid,
    .wamax-plan-grid {
        grid-template-columns: 1fr;
    }

    .wamax-contact,
    .wamax-footer {
        align-items: flex-start;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .wamax-footer nav {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .wamax-nav,
    .wamax-hero,
    .wamax-section,
    .wamax-feature-list,
    .wamax-showcase,
    .wamax-addon-band,
    .wamax-ops-board,
    .wamax-security-band,
    .wamax-dashboard-band,
    .wamax-contact,
    .wamax-footer {
        /* width: calc(100% - 28px); */
    }

    .wamax-nav {
        width: 100%;
        padding: 10px 14px;
        display: flex;
        flex-wrap: wrap;
    }

    .wamax-brand img {
        max-width: 132px;
        max-height: 42px;
    }

    .wamax-nav > div {
        margin-left: auto;
    }

    .wamax-nav > div .btn {
        min-height: 38px;
        padding: 8px 11px;
        font-size: .8rem;
    }

    .wamax-hero {
        padding-top: 34px;
    }

    .wamax-hero h1 {
        font-size: 2.05rem;
    }

    .wamax-stat-strip {
        grid-template-columns: 1fr;
    }

    .wamax-ops-visual div,
    .wamax-security-visual {
        grid-template-columns: 1fr;
    }

    .wamax-feature-row,
    .wamax-feature-row.reverse,
    .wamax-showcase,
    .wamax-developer-band,
    .wamax-dashboard-band,
    .wamax-addon-band,
    .wamax-ops-board,
    .wamax-security-band,
    .wamax-contact {
        border-radius: 18px;
    }
}

@keyframes wamaxFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes wamaxRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wamax-hero-art,
    .wamax-animate,
    .wamax-addon-grid article,
    .wamax-ops-list article,
    .wamax-security-grid article,
    .wamax-module-grid article,
    .wamax-usecase-grid article,
    .wamax-plan-grid article {
        opacity: 1;
        animation: none;
        transition: none;
        transform: none;
    }

    .wamax-addon-grid article:hover,
    .wamax-ops-list article:hover,
    .wamax-security-grid article:hover,
    .wamax-module-grid article:hover,
    .wamax-usecase-grid article:hover,
    .wamax-plan-grid article:hover {
        transform: none;
    }
}

/* Public site pages and refreshed auth screens. */
.wamax-check-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.wamax-check-list li,
.wamax-plan-grid p {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wamax-check-list i,
.wamax-plan-grid i {
    color: #059669;
}

.wamax-usecase-grid {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto 64px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wamax-usecase-grid article {
    min-height: 196px;
    border: 1px solid #e4ecef;
    border-radius: 18px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.wamax-usecase-grid i {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #e9f8f1;
    color: #059669;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.wamax-usecase-grid h3 {
    margin: 16px 0 8px;
    font-size: 1.08rem;
}

.wamax-usecase-grid p {
    margin: 0;
    color: #64748b;
    font-size: .92rem;
    font-weight: 500;
}

.wamax-page-hero {
    width: min(980px, calc(100% - 48px));
    margin: 0 auto;
    padding: 68px 0 30px;
    text-align: center;
}

.wamax-page-hero h1 {
    margin: 14px auto 12px;
    max-width: 760px;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.1;
    font-weight: 700;
}

.wamax-page-hero p {
    max-width: 760px;
    margin: 0 auto;
    color: #64748b;
    font-size: 1rem;
    font-weight: 500;
}

.wamax-contact-page {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto 70px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 24px;
    align-items: start;
}

.wamax-contact-form,
.wamax-contact-info,
.wamax-legal-card {
    border: 1px solid #e4ecef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}

.wamax-contact-form {
    padding: clamp(20px, 4vw, 34px);
    display: grid;
    gap: 18px;
}

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

.wamax-contact-form label {
    color: #0f172a;
    font-size: .88rem;
    font-weight: 650;
}

.wamax-contact-form .form-control,
.wamax-contact-form .form-select {
    min-height: 48px;
    margin-top: 7px;
    border-color: #dfe7ef;
    border-radius: 12px;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 500;
}

.phone-country-field {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.phone-country-field .form-control,
.phone-country-field .form-select {
    margin-top: 0;
}

.form-help {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 500;
}

.wamax-contact-form textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.wamax-contact-form .demo-schedule-field {
    display: none;
}

.wamax-contact-form .demo-schedule-field.is-visible {
    display: grid;
}

.wamax-contact-info {
    padding: 18px;
    display: grid;
    gap: 14px;
}

.wamax-contact-info img {
    width: 100%;
    border: 1px solid #e4ecef;
    border-radius: 16px;
}

.wamax-contact-info article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 16px;
    background: #f8fbfa;
}

.wamax-contact-info article > i {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #e9f8f1;
    color: #059669;
    display: grid;
    place-items: center;
}

.wamax-contact-info h2 {
    margin: 0 0 4px;
    font-size: .98rem;
    font-weight: 700;
}

.wamax-contact-info p {
    margin: 0;
    color: #64748b;
    font-size: .86rem;
    font-weight: 500;
}

.wamax-legal-card {
    width: min(980px, calc(100% - 48px));
    margin: 0 auto 72px;
    padding: clamp(22px, 4vw, 40px);
}

.legal-updated {
    margin: 0 0 18px;
    color: #7b8ba0;
    font-size: .86rem;
    font-weight: 600;
}

.wamax-legal-card article {
    padding: 18px 0;
    border-top: 1px solid #edf2f7;
}

.wamax-legal-card h2 {
    margin: 0 0 8px;
    font-size: 1.08rem;
}

.wamax-legal-card p {
    margin: 0;
    color: #64748b;
    font-size: .94rem;
    font-weight: 500;
    line-height: 1.75;
}

.legal-note {
    margin-top: 18px;
    border: 1px solid #cce9df;
    border-radius: 16px;
    background: #eefaf5;
    padding: 16px;
    display: flex;
    gap: 12px;
    color: #047857;
}

.legal-note p {
    color: #047857;
}

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 10%, rgba(5, 150, 105, .12), transparent 26%),
        linear-gradient(145deg, #f7fbfa, #eef6f3);
    padding: 24px;
    display: grid;
    place-items: center;
}

.auth-shell {
    width: min(1060px, 100%);
    min-height: 640px;
    border: 1px solid #e3ebf0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .12);
    overflow: hidden;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
}

.auth-story {
    padding: clamp(28px, 5vw, 54px);
    background: linear-gradient(160deg, #064e3b, #059669);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-logo {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 46px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
}

.auth-logo img {
    width: auto;
    max-width: 150px;
    max-height: 44px;
    object-fit: contain;
}

.auth-pill {
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.auth-story h2 {
    max-width: 440px;
    margin: 18px 0 12px;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1.13;
    font-weight: 700;
}

.auth-story p {
    max-width: 440px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .96rem;
    font-weight: 500;
}

.auth-benefits {
    margin-top: 28px;
    display: grid;
    gap: 10px;
}

.auth-benefits span {
    width: fit-content;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    font-weight: 600;
}

.auth-card {
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(28px, 5vw, 58px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-brand {
    margin-bottom: 22px;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 700;
}

.auth-brand img {
    width: auto;
    max-width: 138px;
    height: 40px;
}

.auth-card h1 {
    margin: 6px 0 8px;
    color: #0f172a;
    font-size: 1.85rem;
    line-height: 1.15;
    font-weight: 700;
}

.auth-form-eyebrow {
    color: #059669;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.auth-form-copy {
    margin: 0 0 24px;
    color: #64748b;
    font-size: .94rem;
    font-weight: 500;
}

.auth-field label {
    color: #1f2937;
    font-size: .84rem;
    font-weight: 650;
}

.auth-field > div {
    min-height: 48px;
    border: 1px solid #dfe7ef;
    border-radius: 13px;
    background: #f8fafc;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
}

.auth-field i {
    color: #8ca0b5;
    text-align: center;
}

.auth-field .form-control {
    min-height: 46px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 500;
}

.auth-links a {
    color: #059669;
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .wamax-usecase-grid,
    .wamax-contact-page,
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        min-height: 0;
    }

    .auth-story {
        min-height: 360px;
    }
}

@media (max-width: 575.98px) {
    .wamax-usecase-grid,
    .wamax-page-hero,
    .wamax-contact-page,
    .wamax-legal-card {
        width: calc(100% - 28px);
    }

    .wamax-contact-form .form-grid {
        grid-template-columns: 1fr;
    }

    .phone-country-field {
        grid-template-columns: 1fr;
    }

    .auth-body {
        padding: 12px;
    }

    .auth-shell {
        border-radius: 20px;
    }

    .auth-story {
        min-height: auto;
        padding: 24px;
    }

    .auth-logo {
        margin-bottom: 26px;
    }

    .auth-card {
        padding: 24px;
    }

    .auth-card h1 {
        font-size: 1.55rem;
    }
}

/* Responsive public header/footer navigation. */
.wamax-menu-toggle {
    display: none;
    border: 1px solid #dfe7ef;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.wamax-nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

@media (min-width: 992px) {
    .wamax-nav-menu {
        display: flex !important;
    }
}

@media (max-width: 991.98px) {
    .wamax-nav {
        width: 100%;
        min-height: 68px;
        padding: 10px 18px;
        display: grid;
        grid-template-columns: minmax(118px, 1fr) 42px auto;
        gap: 10px;
        align-items: center;
    }

    .wamax-menu-toggle {
        display: inline-flex;
    }

    .wamax-nav-menu {
        grid-column: 1 / -1;
        display: none;
        width: 100%;
        border: 1px solid #e4ecef;
        border-radius: 16px;
        background: #fff;
        padding: 8px;
        box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
        overflow: visible;
    }

    .wamax-nav-menu.is-open {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .wamax-nav-menu a {
        min-height: 42px;
        border-radius: 11px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #334155;
        background: #f8fafc;
        font-size: .88rem;
        font-weight: 650;
    }

    .wamax-nav-menu a:hover {
        color: #047857;
        background: #eefaf5;
    }

    .wamax-nav-actions {
        gap: 8px;
    }

    .wamax-footer {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 16px;
    }

    .wamax-footer nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .wamax-footer nav a {
        min-height: 38px;
        border: 1px solid #e4ecef;
        border-radius: 10px;
        background: #fff;
        padding: 8px 10px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 575.98px) {
    .wamax-nav {
        padding: 10px 14px;
        grid-template-columns: minmax(108px, 1fr) 40px;
    }

    .wamax-nav-actions {
        grid-column: 1 / -1;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wamax-nav-actions .btn {
        width: 100%;
        min-height: 40px;
    }

    .wamax-nav-menu.is-open,
    .wamax-footer nav {
        grid-template-columns: 1fr;
    }
}

/* Keep inbox conversation search compact when opened. */
.team-chat-panel.chat-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.team-chat-panel > .team-chat-header {
    grid-row: 1;
}

.team-chat-panel .message-search-panel {
    grid-row: 2;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 20px;
    align-self: start;
}

.team-chat-panel > .team-chat-body {
    grid-row: 3;
    min-height: 0;
}

.team-chat-panel > .chat-reply {
    grid-row: 4;
}

.team-chat-panel > .template-reengage-bar {
    grid-row: 5;
}

.team-chat-panel .message-search-panel.is-open {
    display: grid;
}

.team-chat-panel .message-search-panel input {
    height: 38px;
    max-height: 38px;
    font-size: .84rem;
}

.team-chat-panel .message-search-panel button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
}

/* Closed service-window inbox layout: keep the template prompt compact at bottom. */
.team-chat-panel.is-service-closed.chat-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.team-chat-panel.is-service-closed .team-chat-body {
    min-height: 0;
    background-image: url('../image/chat-bg.png');
    background-size: 420px auto;
    background-repeat: repeat;
    background-position: top left;
}

.team-chat-panel.is-service-closed .chat-messages {
    height: 100%;
    min-height: 0;
    background: transparent;
    padding-bottom: 18px;
}

.team-chat-panel.is-service-closed .template-reengage-bar:not(.is-hidden) {
    min-height: 64px;
    max-height: 88px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 10px 26px;
    background: #fff;
    border-top: 1px solid #dfe7ef;
    overflow: hidden;
}

.team-chat-panel.is-service-closed .template-reengage-bar .reply-note {
    align-self: center;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 650;
}

.team-chat-panel.is-service-closed .chat-template-footer-btn.is-visible {
    min-height: 38px;
    min-width: 150px;
    padding: 0 22px;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .team-chat-panel.is-service-closed .template-reengage-bar:not(.is-hidden) {
        max-height: none;
        grid-template-columns: 1fr;
        padding: 12px 16px;
    }

    .team-chat-panel.is-service-closed .chat-template-footer-btn.is-visible {
        width: 100%;
    }
}

/* Developer portal */
.developer-page {
    display: grid;
    gap: 20px;
    color: #172033;
}

.developer-hero,
.developer-card,
.developer-secret-card {
    border: 1px solid #e5edf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.developer-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 15px;
}

.developer-hero span {
    color: #06976d;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.developer-hero h1 {
    margin: 3px 0 4px;
    font-size: 1.4rem;
    font-weight: 600;
}

.developer-hero p,
.developer-card p {
    margin: 0;
    color: #64748b;
    font-size: .82rem;
}

.developer-actions,
.developer-quick,
.developer-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

.developer-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.developer-nav a {
    white-space: nowrap;
    border: 1px solid #dfe8f2;
    border-radius: 999px;
    padding: 5px 10px;
    background: #fff;
    color: #526176;
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
}

.developer-nav a:hover,
.developer-nav a.is-active {
    border-color: #10a37f;
    color: #057a5e;
    background: #effbf6;
}

.developer-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.developer-stat-card {
    min-height: 126px;
    border: 1px solid #e5edf5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
    padding: 18px;
    display: grid;
    gap: 8px;
}

.developer-stat-card i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf8f2;
    color: #079669;
    font-size: 1.1rem;
}

.developer-stat-card span {
    color: #64748b;
    font-size: .86rem;
    font-weight: 700;
}

.developer-stat-card strong {
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 750;
    color: #111827;
}

.developer-overview-stat-grid .developer-stat-card {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
}

.developer-overview-stat-grid .developer-stat-card i {
    grid-row: 1 / span 2;
    grid-column: 1;
}

.developer-overview-stat-grid .developer-stat-card span,
.developer-overview-stat-grid .developer-stat-card strong {
    grid-column: 2;
}

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

.developer-card,
.developer-secret-card {
    padding: 22px;
}

.developer-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.developer-card h2,
.developer-card-head h2 {
    margin: 0 0 14px;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 750;
}

.developer-card-head h2 {
    margin: 0;
}

.developer-form {
    display: grid;
    gap: 16px;
}

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

.developer-form label,
.developer-form-inline label {
    display: grid;
    gap: 7px;
    color: #334155;
    font-size: .86rem;
    font-weight: 700;
}

.developer-api-key-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, .9fr) minmax(180px, .9fr) auto;
    align-items: center;
}

.developer-api-key-form .form-select,
.developer-api-key-form .form-control {
    width: 100%;
}

.developer-otp-settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.developer-application-grid {
    align-items: start;
    column-gap: 22px;
    row-gap: 18px;
}

.developer-application-grid .developer-field {
    align-self: start;
    min-width: 0;
    gap: 8px;
    line-height: 1.25;
}

.developer-application-grid .form-control,
.developer-application-grid .form-select {
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 9px 14px;
    line-height: 1.35;
    font-size: .86rem;
}

.developer-application-grid textarea.form-control {
    height: auto;
    min-height: 88px;
    resize: vertical;
}

.developer-application-grid small {
    color: #64748b;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
}

.developer-form .form-control,
.developer-form .form-select,
.developer-form-inline .form-control,
.developer-form-inline .form-select {
    min-height: 44px;
    border-color: #dfe8f2;
    border-radius: 12px;
    font-size: .92rem;
}

.developer-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.developer-checks label {
    border: 1px solid #dfe8f2;
    border-radius: 999px;
    padding: 9px 13px;
    background: #f8fafc;
}

.developer-table-wrap {
    overflow: auto;
}

.developer-table {
    min-width: 820px;
    margin: 0;
    font-size: .88rem;
}

.developer-table th {
    color: #526176;
    font-weight: 750;
    background: #f8fafc;
}

.developer-table td,
.developer-table th {
    padding: 13px 14px;
    vertical-align: middle;
}

.developer-log-card {
    padding: 16px;
}

.developer-log-table {
    min-width: 980px;
    font-size: .78rem;
}

.developer-log-table td,
.developer-log-table th {
    padding: 9px 10px;
}

.developer-log-table code {
    color: #334155;
    font-size: .74rem;
    word-break: break-word;
}

.developer-pagination {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border-top: 1px solid #edf2f7;
    padding-top: 12px;
    color: #64748b;
    font-size: .78rem;
}

.developer-pagination > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.developer-pagination .btn {
    min-height: 30px;
    padding: 4px 9px;
    font-size: .76rem;
}

.developer-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 4px 10px;
    background: #edf2f7;
    color: #475569;
    font-size: .78rem;
    font-weight: 750;
}

.developer-secret-card {
    display: grid;
    gap: 10px;
    border-color: #9ee4c7;
    background: #f2fff8;
}

.developer-secret-card div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.developer-secret-card code,
.developer-code-block {
    border: 1px solid #dfe8f2;
    border-radius: 12px;
    background: #0f172a;
    color: #e5edf5;
}

.developer-secret-card code {
    flex: 1;
    overflow: auto;
    padding: 9px 11px;
}

.developer-secret-card button {
    border: 0;
    border-radius: 10px;
    background: #06976d;
    color: #fff;
    padding: 9px 13px;
    font-weight: 750;
}

.developer-code-block {
    min-height: 160px;
    margin: 0;
    padding: 16px;
    font-size: .86rem;
    white-space: pre-wrap;
}

.developer-log-list {
    display: grid;
    gap: 10px;
}

.developer-log-list > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 12px;
}

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

.developer-domain-card {
    border: 1px solid #e5edf5;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
    display: grid;
    gap: 14px;
}

.developer-domain-card.is-verified {
    border-color: #a7e8cb;
    background: #f7fffb;
}

.developer-domain-top,
.developer-domain-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.developer-domain-top div {
    display: grid;
    gap: 3px;
}

.developer-domain-top strong {
    color: #172033;
    font-size: 1rem;
}

.developer-domain-top span,
.developer-domain-actions small,
.developer-dns-box span {
    color: #64748b;
    font-size: .84rem;
}

.developer-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 800;
    text-transform: capitalize;
}

.developer-status-pill.is-success {
    background: #dcfce7;
    color: #047857;
}

.developer-status-pill.is-warning {
    background: #fff7ed;
    color: #c2410c;
}

.developer-dns-box {
    display: grid;
    gap: 10px;
    border: 1px dashed #dbe6f1;
    border-radius: 14px;
    background: #f8fafc;
    padding: 14px;
}

.developer-dns-box div {
    display: grid;
    gap: 5px;
}

.developer-dns-box code {
    overflow-x: auto;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5edf5;
    color: #172033;
    padding: 8px 10px;
}

.developer-empty-state {
    grid-column: 1 / -1;
    min-height: 180px;
    border: 1px dashed #dbe6f1;
    border-radius: 16px;
    color: #64748b;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
}

.developer-empty-state i {
    color: #0f9f75;
    font-size: 1.8rem;
}

.developer-empty-state strong {
    color: #172033;
}

.developer-info-note {
    border: 1px solid #bfecd8;
    border-radius: 14px;
    background: #f2fff8;
    color: #315d51;
    padding: 13px 15px;
    font-size: .9rem;
}

.developer-locked-limits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    border: 1px solid #dfe8f2;
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px 14px;
    color: #475569;
    font-size: .88rem;
}

.developer-locked-limits strong {
    color: #172033;
    margin-right: 6px;
}

.developer-locked-limits span {
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5edf5;
    padding: 6px 10px;
    font-weight: 700;
}

.developer-docs {
    max-width: 1280px;
}

.developer-docs-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f1fff8 100%);
}

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

.developer-doc-panel {
    display: grid;
    gap: 10px;
}

.developer-doc-eyebrow {
    color: #079669;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.developer-doc-panel code,
.developer-endpoint-list code,
.developer-flow-card code {
    border-radius: 8px;
    background: #eefaf5;
    color: #046c4e;
    padding: 3px 7px;
}

.developer-flow-card {
    min-height: 260px;
    border: 1px solid #e5edf5;
    border-radius: 16px;
    background: #fff;
    padding: 20px;
    display: grid;
    gap: 10px;
}

.developer-flow-card.is-selected {
    border-color: #7bd9b6;
    background: #f5fffa;
}

.developer-flow-card i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e6f7ef;
    color: #079669;
    font-size: 1.15rem;
}

.developer-flow-card h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
}

.developer-flow-card ol {
    margin: 0;
    padding-left: 18px;
    color: #526176;
    font-size: .88rem;
}

.developer-endpoint-list {
    display: grid;
    gap: 10px;
}

.developer-endpoint-list > div {
    display: grid;
    grid-template-columns: 78px minmax(180px, .8fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid #edf2f7;
    border-radius: 13px;
    padding: 13px;
}

.developer-endpoint-list span {
    display: inline-flex;
    justify-content: center;
    border-radius: 999px;
    background: #0f9f75;
    color: #fff;
    padding: 5px 9px;
    font-size: .75rem;
    font-weight: 800;
}

.developer-endpoint-list p {
    margin: 0;
}

.developer-doc-examples {
    display: grid;
    gap: 14px;
}

.developer-doc-examples article,
.developer-code-sample {
    border: 1px solid #e5edf5;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.developer-doc-examples article > div {
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e5edf5;
}

.developer-doc-examples pre,
.developer-code-sample pre {
    margin: 0;
    padding: 15px;
    background: #0f172a;
    color: #e5edf5;
    font-size: .84rem;
    overflow: auto;
}

.developer-code-sample strong {
    display: block;
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e5edf5;
}

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

@media (max-width: 767.98px) {
    .developer-hero,
    .developer-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .developer-grid-2,
    .developer-form-grid,
    .developer-doc-grid,
    .developer-flow-grid,
    .developer-domain-grid,
    .developer-stat-grid {
        grid-template-columns: 1fr;
    }

    .developer-api-key-form {
        grid-template-columns: 1fr;
    }

    .developer-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .developer-endpoint-list > div {
        grid-template-columns: 1fr;
    }

    .developer-card,
    .developer-secret-card,
    .developer-hero {
        padding: 18px;
    }
}
.lead-capture-page .developer-hero {
    align-items: center;
}

.lead-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.lead-form-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lead-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.lead-card-head h2 {
    margin: 0;
}

.lead-card-head p {
    margin: 4px 0 0;
    color: #64748b;
}

.lead-mini-list {
    display: grid;
    gap: 10px;
}

.lead-mini-list div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid #e7edf5;
    border-radius: 10px;
    background: #f8fafc;
}

.lead-mini-list span {
    color: #64748b;
}

.lead-mini-list strong {
    color: #0f172a;
    text-align: right;
}

.lead-code,
.lead-pre {
    display: block;
    width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    border: 1px solid #e7edf5;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    padding: 12px;
    font-size: 13px;
}

.lead-fields {
    display: grid;
    gap: 10px;
}

.lead-field-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr 1.2fr 1.2fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e7edf5;
    border-radius: 12px;
    background: #f8fafc;
}

.lead-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin: 0;
}

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

@media (max-width: 640px) {
    .lead-field-row {
        grid-template-columns: 1fr;
    }
}