* {
    box-sizing: border-box;
}

:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
    --dark: #111827;
    --soft-dark: #1f2937;
    --success: #0f8a5f;
    --danger: #b42318;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
}

a {
    color: inherit;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, #ffffff 0, transparent 40%),
        var(--bg);
}

.auth-card {
    width: min(440px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 18px 60px rgba(17, 24, 39, 0.08);
}

.auth-card.wide {
    width: min(560px, 100%);
}

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

.brand h1,
.brand p {
    margin: 0;
}

.brand p,
.brand span {
    color: var(--muted);
    font-size: 14px;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--dark);
    color: #fff;
    font-weight: 800;
    font-size: 22px;
}

.brand.compact {
    margin: 0;
}

.brand.compact .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 18px;
}

.brand.compact div:last-child {
    display: flex;
    flex-direction: column;
}

label {
    display: block;
    font-weight: 650;
    margin: 18px 0;
}

input {
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}

input:focus {
    outline: 2px solid rgba(17, 24, 39, 0.12);
    border-color: #6b7280;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 10px;
    padding: 12px 18px;
    background: var(--dark);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button.full {
    width: 100%;
}

.alert {
    border-radius: 10px;
    padding: 13px 15px;
    margin-bottom: 20px;
    line-height: 1.45;
}

.alert.error {
    color: #7a271a;
    background: #fef3f2;
    border: 1px solid #fecdca;
}

.alert.success {
    color: #05603a;
    background: #ecfdf3;
    border: 1px solid #abefc6;
}

.alert ul {
    margin-bottom: 0;
}

.security-note {
    padding-top: 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 28px 0;
}

.topbar {
    height: 68px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.user-area {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.user-area .role {
    background: #f3f4f6;
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--muted);
}

.user-area a {
    color: var(--muted);
}

.app-layout {
    min-height: calc(100vh - 68px);
    display: grid;
    grid-template-columns: 220px 1fr;
}

.sidebar {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 24px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar a,
.sidebar span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 12px;
    border-radius: 9px;
    text-decoration: none;
    color: #4b5563;
    font-weight: 600;
    font-size: 14px;
}

.sidebar .active {
    background: var(--dark);
    color: #fff;
}

.sidebar small {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
}

.content {
    padding: 30px;
    max-width: 1500px;
    width: 100%;
}

.page-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.page-title h1 {
    margin: 0 0 5px;
    font-size: 29px;
}

.page-title p {
    margin: 0;
    color: var(--muted);
}

.status-pill {
    padding: 8px 12px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-weight: 700;
    font-size: 13px;
}

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

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
}

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

.card p {
    color: var(--muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.card-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    font-size: 11px;
}

.metric {
    font-weight: 750;
    font-size: 14px;
}

.metric.muted {
    color: var(--muted);
}

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

.check-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.check-list div {
    background: #f9fafb;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 12px;
    font-weight: 650;
}

@media (max-width: 900px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

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

    .check-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .topbar {
        padding: 0 14px;
    }

    .brand.compact span,
    .user-area .role {
        display: none;
    }

    .user-area > span:first-child {
        display: none;
    }

    .content {
        padding: 20px 14px;
    }

    .page-title {
        flex-direction: column;
    }

    .check-list {
        grid-template-columns: 1fr;
    }

    .auth-card {
        padding: 24px;
    }
}


.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.button.secondary {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
}

.text-link {
    color: #111827;
    font-weight: 700;
    text-decoration: none;
}

.grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 220px 220px auto;
    gap: 10px;
    margin-bottom: 18px;
}

select,
textarea {
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}

.filters input,
.filters select {
    margin-top: 0;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

.data-table th,
.data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

.data-table th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f9fafb;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.subtle {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

.badge-yes {
    background: #ecfdf3;
    color: #067647;
}

.badge-no {
    background: #f2f4f7;
    color: #667085;
}

.empty-cell {
    text-align: center !important;
    color: var(--muted);
    padding: 40px !important;
}

.editor-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
}

.editor-card h2 {
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 18px;
}

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

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

.choice-card {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: #fafafa;
}

.choice-card input,
.style-row input {
    width: auto;
    margin: 0;
}

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

.style-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 12px;
}

.style-row label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.primary-radio {
    color: var(--muted);
    font-size: 12px;
}

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

.inline-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 18px;
}

.inline-form input {
    margin-top: 0;
}

.code-sample {
    padding: 13px;
    overflow-x: auto;
    border-radius: 9px;
    background: #111827;
    color: #f9fafb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

@media (max-width: 900px) {
    .grid-two,
    .form-grid,
    .styles-editor {
        grid-template-columns: 1fr;
    }

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

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

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


.google-account-card { min-height: 285px; }
.google-status {
    display: inline-flex; align-items: center; border-radius: 999px;
    padding: 6px 10px; margin: 8px 0 14px; font-size: 13px; font-weight: 800;
}
.google-status.connected { background: #ecfdf3; color: #067647; }
.google-status.disconnected { background: #f2f4f7; color: #667085; }
.google-metrics {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px; margin: 18px 0;
}
.google-metrics > div {
    background: #f9fafb; border: 1px solid var(--line);
    border-radius: 10px; padding: 12px;
}
.google-metrics strong, .google-metrics span { display: block; }
.google-metrics span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.account-email { word-break: break-word; }
.inline-action { display: inline-flex; margin: 0; }
.button-link { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 700; padding: 10px 4px; }
.danger-link { color: #b42318; }
.mini-error { margin-top: 16px; padding: 10px; background: #fef3f2; color: #b42318; border-radius: 8px; font-size: 12px; }
.calendar-filter { grid-template-columns: minmax(240px,1fr) auto; }
.calendars-table { min-width: 800px; }


.mapping-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.mapping-filters {
    display: grid;
    grid-template-columns: 190px 170px minmax(240px, 1fr) auto;
    gap: 10px;
    flex: 1;
}

.mapping-filters select,
.mapping-filters input {
    margin-top: 0;
}

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

.mapping-stats div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}

.mapping-stats strong,
.mapping-stats span {
    display: block;
}

.mapping-stats strong {
    font-size: 22px;
}

.mapping-stats span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.mapping-table {
    min-width: 900px;
}

.assign-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.assign-form select {
    min-width: 260px;
    margin: 0;
}

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

@media (max-width: 900px) {
    .mapping-filters {
        grid-template-columns: 1fr;
        width: 100%;
    }

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


.info-alert {
    background: #eff8ff;
    border: 1px solid #b2ddff;
    color: #175cd3;
}

.sync-shop-card {
    min-height: 260px;
}

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

.sync-counts > div {
    background: #f9fafb;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
}

.sync-counts strong,
.sync-counts span {
    display: block;
}

.sync-counts strong {
    font-size: 22px;
}

.sync-counts span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.sync-progress-wrap {
    margin-top: 18px;
}

.sync-progress {
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.sync-progress-bar {
    width: 0;
    height: 100%;
    background: #111827;
    transition: width .2s ease;
}

.sync-progress-text {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
}

.sync-log {
    margin-top: 10px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}

.sync-finished {
    color: #067647;
    margin-bottom: 8px;
}

.sync-error {
    color: #b42318;
}

.availability-filter {
    grid-template-columns: 260px;
}

.availability-list-table {
    min-width: 980px;
}

.availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
}

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

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

.day-dot.free,
.calendar-day.free,
.availability-chip.free {
    background: #dcfae6;
    color: #067647;
}

.day-dot.partial,
.calendar-day.partial,
.availability-chip.partial {
    background: #fef0c7;
    color: #b54708;
}

.day-dot.full,
.calendar-day.full {
    background: #fee4e2;
    color: #b42318;
}

.day-dot.absent,
.calendar-day.absent {
    background: #f2f4f7;
    color: #667085;
}

.day-dot.closed,
.calendar-day.closed {
    background: #e4e7ec;
    color: #344054;
}

.next-available-card {
    margin-bottom: 18px;
}

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

.next-availability-list > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 9px 0;
}

.availability-chip {
    display: inline-flex;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

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

.month-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
}

.month-card h2 {
    margin: 0 0 14px;
    font-size: 17px;
}

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

.weekday-headings {
    margin-bottom: 5px;
}

.weekday-headings span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.calendar-day {
    aspect-ratio: 1;
    min-height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 12px;
    cursor: default;
    border: 1px solid transparent;
}

.calendar-day.unknown {
    background: #fff;
    border-color: var(--line);
    color: #98a2b3;
}

.calendar-day.empty {
    background: transparent;
}

.calendar-day.past {
    opacity: .35;
}

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

@media (max-width: 800px) {
    .year-calendar,
    .next-availability-list {
        grid-template-columns: 1fr;
    }
}

.deposit-card{margin-bottom:18px}.deposit-overdue{border-color:#fecdca}.deposit-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}.deposit-title h2{margin-bottom:0}.deposit-list{display:grid}.deposit-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}.deposit-row:last-child{border-bottom:0}.deposit-row>div:first-child{display:flex;flex-direction:column;gap:3px}.deposit-row span{color:var(--muted);font-size:13px}.deposit-date{text-align:right;font-weight:800;white-space:nowrap}.deposit-date small{display:block;color:var(--muted);font-weight:600;margin-top:2px}.deposit-date.overdue,.deposit-date.overdue small{color:#b42318}.stats-filters{display:grid;grid-template-columns:180px 130px 220px auto;gap:10px;margin-bottom:18px}.stats-filters select{margin-top:0}.stats-summary{margin-bottom:18px}.stats-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}.stats-explain{font-size:12px;margin-top:14px!important;margin-bottom:0!important}.embedded-table{margin-top:14px;border-radius:10px}.stats-table,.comparison-table{min-width:650px}.stats-history-note{margin-top:18px}@media(max-width:800px){.stats-filters{grid-template-columns:1fr}.deposit-row{align-items:flex-start;flex-direction:column}.deposit-date{text-align:left}}


.badge-history {
    background: #f4ebff;
    color: #6941c6;
}

.mapping-stats-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.historical-mapping-table {
    min-width: 1180px;
}

.historical-assign-form {
    align-items: flex-start;
}

.mapping-mode-select {
    min-width: 210px;
    margin: 0;
}

.history-button {
    background: #6941c6;
}

.artist-ranking-table {
    min-width: 760px;
}

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


.mapping-bulk-bar {
    position: sticky;
    top: 10px;
    z-index: 15;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .07);
}

.bulk-selection-info {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 155px;
}

.bulk-selection-info strong {
    font-size: 20px;
}

.bulk-selection-info span {
    color: var(--muted);
    font-size: 12px;
}

.mapping-bulk-bar select {
    min-width: 330px;
    margin: 0;
}

.mapping-check-col {
    width: 46px;
    text-align: center !important;
}

.mapping-check-col input,
.mapping-row-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.mapping-table tr:has(.mapping-row-check:checked) {
    background: #f9fafb;
}

@media (max-width: 900px) {
    .mapping-bulk-bar {
        position: static;
        align-items: stretch;
    }

    .mapping-bulk-bar select,
    .mapping-bulk-bar button {
        width: 100%;
    }

    .mapping-bulk-bar select {
        min-width: 0;
    }
}


.sync-actions-block {
    display: grid;
    gap: 14px;
}

.sync-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.sync-divider::before,
.sync-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.sync-divider span {
    padding: 0 10px;
}

.sync-one-box {
    padding: 14px;
    background: #f9fafb;
    border: 1px solid var(--line);
    border-radius: 11px;
}

.sync-one-box > label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
}

.sync-one-controls {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 8px;
}

.sync-calendar-select {
    width: 100%;
    margin: 0;
}

@media (max-width: 760px) {
    .sync-one-controls {
        grid-template-columns: 1fr;
    }

    .sync-one-controls .button {
        width: 100%;
    }
}


.deposit-row-action {
    align-items: center;
}

.deposit-action-side {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.deposit-action-form {
    margin: 0;
}

.deposit-action-form .button {
    min-width: 94px;
}

.deposit-processed-button {
    background: #067647;
}

.deposit-waiting-note {
    display: inline-flex;
    align-items: center;
    margin: -4px 0 18px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 800px) {
    .deposit-action-side {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
}


.status-off {
    background: #f2f4f7 !important;
    color: #667085 !important;
}

.oauth-warning {
    background: #fffaeb;
    border: 1px solid #fedf89;
    color: #93370d;
}

.autosync-shop-grid {
    margin-bottom: 18px;
}

.autosync-shop-card {
    min-height: 250px;
}

.autosync-control-card,
.autosync-cron-card {
    margin-bottom: 18px;
}

.autosync-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.cron-url-box {
    overflow-x: auto;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f9fafb;
}

.cron-url-box code {
    white-space: nowrap;
    font-size: 12px;
}

.autosync-table {
    min-width: 1050px;
}



/* ============================================================
   v1.0 / v1.0.1 — À remplir
   ============================================================ */

.form-help {
    margin: -8px 0 18px;
    color: var(--muted);
    line-height: 1.55;
}

.field-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.fill-settings-editor {
    margin-bottom: 30px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafbfc;
}

.fill-alert-toggle {
    margin-top: 0 !important;
}

.fill-settings-grid {
    margin-top: 4px;
}

.fill-page-title {
    margin-bottom: 16px;
}

.fill-filters {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.fill-filters-desktop {
    grid-template-columns:
        minmax(180px, 1.15fr)
        minmax(120px, .75fr)
        minmax(170px, 1fr)
        minmax(170px, 1fr)
        minmax(180px, 1fr)
        auto;
    align-items: end;
}

.fill-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fill-filter-group label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fill-filter-group select {
    margin: 0;
    width: 100%;
}

.fill-filter-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    height: 100%;
}

.fill-explanation {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #d1e9ff;
    border-radius: 10px;
    background: #eff8ff;
    color: #175cd3;
    font-size: 13px;
    line-height: 1.55;
}

.fill-explanation.compact {
    margin-bottom: 24px;
}

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

.fill-summary-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.fill-summary-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fill-summary-card strong {
    display: block;
    margin-top: 8px;
    font-size: 32px;
    line-height: 1;
}

.fill-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.fill-week-section {
    margin-bottom: 26px;
}

.fill-week-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.fill-week-header h2 {
    margin: 4px 0 0;
    font-size: 28px;
}

.fill-week-distance {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.fill-week-counter {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.fill-card-grid {
    display: grid;
    gap: 14px;
}

.fill-card-grid.desktop-columns {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.fill-alert-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 315px;
    padding: 18px;
    border: 1px solid var(--line);
    border-left-width: 5px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.fill-severity-urgent {
    border-left-color: #d92d20;
}

.fill-severity-warning {
    border-left-color: #f79009;
}

.fill-severity-watch {
    border-left-color: #2e90fa;
}

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

.fill-card-top-left {
    flex: 1 1 auto;
    min-width: 0;
}

.fill-card-top h3 {
    margin: 8px 0 0;
    font-size: 24px;
    line-height: 1.15;
}

.fill-subline {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
}

.fill-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fill-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
}

.fill-badge.neutral {
    background: #f2f4f7;
    color: #344054;
}

.fill-percentage-box {
    flex: 0 0 auto;
    min-width: 94px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafafa;
    text-align: right;
}

.fill-percentage-box small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.fill-percentage-box strong {
    display: block;
    margin-top: 4px;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.03em;
}

.fill-progress {
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: #f2f4f7;
}

.fill-progress-bar {
    height: 100%;
    min-width: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f172a 0%, #111827 100%);
}

.fill-kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.fill-kpi {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.fill-kpi span,
.fill-kpi strong {
    display: block;
}

.fill-kpi span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fill-kpi strong {
    margin-top: 6px;
    font-size: 23px;
    line-height: 1;
}

.fill-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 30px;
}

.fill-reason {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b54708;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.fill-reason.danger {
    background: #fef3f2;
    color: #b42318;
}

.fill-reason.good {
    background: #ecfdf3;
    color: #067647;
}

.fill-card-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.fill-card-footer.compact {
    margin-top: auto;
}

.fill-price-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fill-price-block strong {
    font-size: 17px;
}

.fill-price-block small {
    color: var(--muted);
    font-size: 11px;
}

.fill-card-actions {
    display: flex;
    gap: 8px;
}

.fill-card-actions .button {
    padding: 10px 13px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 1320px) {
    .fill-filters-desktop {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fill-filter-actions {
        justify-content: stretch;
    }

    .fill-filter-actions .button {
        width: 100%;
    }
}

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

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

@media (max-width: 820px) {
    .fill-filters-desktop,
    .fill-summary-grid,
    .fill-card-grid.desktop-columns {
        grid-template-columns: 1fr;
    }

    .fill-week-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fill-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .fill-card-actions {
        width: 100%;
    }

    .fill-card-actions .button {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 580px) {
    .fill-card-top {
        flex-direction: column;
    }

    .fill-percentage-box {
        width: 100%;
        text-align: left;
    }

    .fill-kpis-grid {
        grid-template-columns: 1fr;
    }
}


/* v1.0.3 — simplification des KPI « À remplir » */
.fill-kpis-grid.fill-kpis-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .fill-kpis-grid.fill-kpis-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .fill-kpis-grid.fill-kpis-three {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   v1.1 — Brevo / Relances clients
   ============================================================ */

.brevo-artist-settings {
    margin-bottom: 30px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafbfc;
}

.brevo-list-form {
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 760px;
}

.brevo-list-form select {
    flex: 1;
    margin: 0;
}

.brevo-sync-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.brevo-summary-grid {
    margin-top: 18px;
}

.brevo-unmatched-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.brevo-unmatched-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.brevo-unmatched-item span {
    color: var(--muted);
    white-space: nowrap;
}

.relaunch-selector-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.relaunch-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.relaunch-filter label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.relaunch-filter select {
    width: 100%;
    margin: 0;
}

.relaunch-top-grid {
    margin-bottom: 18px;
}

.relaunch-availability-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.relaunch-availability-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

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

.relaunch-availability-row > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.relaunch-contact-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.relaunch-contact-stats > div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.relaunch-contact-stats strong,
.relaunch-contact-stats span {
    display: block;
}

.relaunch-contact-stats strong {
    font-size: 28px;
}

.relaunch-contact-stats span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.relaunch-draft-card {
    margin-bottom: 18px;
}

.relaunch-draft-field {
    display: block;
    margin-top: 14px;
}

.relaunch-draft-field input,
.relaunch-draft-field textarea {
    width: 100%;
    margin-top: 6px;
}

.relaunch-draft-field textarea {
    resize: vertical;
    font-family: inherit;
    line-height: 1.55;
}

.relaunch-preview {
    max-width: 760px;
    margin-top: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.relaunch-preview-subject {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: #fafafa;
    font-weight: 800;
}

.relaunch-preview-body {
    padding: 24px;
    line-height: 1.7;
}

@media (max-width: 1050px) {
    .relaunch-selector-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .brevo-list-form,
    .brevo-sync-actions,
    .relaunch-availability-row {
        align-items: stretch;
        flex-direction: column;
    }

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

    .relaunch-availability-row > div {
        justify-content: flex-start;
    }
}


/* v1.1.1 — diagnostic Brevo */
.brevo-attribute-diagnostic {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.brevo-attribute-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.brevo-attribute-row > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.brevo-attribute-row span:not(.badge) {
    color: var(--muted);
    font-size: 12px;
}

.brevo-diagnostic-note {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f9fafb;
}


/* v1.1.2 — association manuelle Brevo -> artiste */
.brevo-mapping-table {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.brevo-mapping-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.brevo-mapping-row select {
    width: 100%;
    margin: 0;
}

.brevo-mapping-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.brevo-mapping-name span {
    color: var(--muted);
    font-size: 12px;
}

.brevo-mapping-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.brevo-existing-mappings {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.brevo-existing-artist {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.brevo-existing-artist h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.brevo-existing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.brevo-alias-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
}

.brevo-alias-tag span {
    font-size: 12px;
    font-weight: 700;
}

.brevo-alias-tag button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f4f7;
    color: #667085;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.brevo-alias-tag button:hover {
    background: #fee4e2;
    color: #b42318;
}

@media (max-width: 800px) {
    .brevo-mapping-row {
        grid-template-columns: 1fr;
    }

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


/* ============================================================
   v1.2 — Mail test + utilisateurs
   ============================================================ */

.user-name-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.user-name-link:hover {
    text-decoration: underline;
}

.brevo-sender-current {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.brevo-sender-current span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.relaunch-sender-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.relaunch-sender-line span {
    color: var(--muted);
}

.text-danger {
    color: #b42318;
}

.relaunch-test-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #d1e9ff;
    border-radius: 14px;
    background: #eff8ff;
}

.relaunch-test-box > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.relaunch-test-box > div:first-child span {
    color: #475467;
    font-size: 12px;
}

.relaunch-test-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.relaunch-test-controls input {
    min-width: 280px;
    margin: 0;
}

.relaunch-test-result {
    min-width: 180px;
    font-size: 12px;
    font-weight: 700;
}

.relaunch-test-result.success {
    color: #067647;
}

.relaunch-test-result.error {
    color: #b42318;
}

.users-role-help {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.users-role-help > div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.users-role-help strong,
.users-role-help span {
    display: block;
}

.users-role-help span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.user-edit-card {
    max-width: 1000px;
}

.narrow-card {
    max-width: 620px;
}

.narrow-card label {
    display: block;
    margin-bottom: 14px;
}

.narrow-card input {
    width: 100%;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .users-role-help {
        grid-template-columns: 1fr;
    }

    .relaunch-test-box {
        align-items: stretch;
        flex-direction: column;
    }

    .relaunch-test-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .relaunch-test-controls input {
        min-width: 0;
        width: 100%;
    }
}


/* ============================================================
   v1.3 — Envoi réel + historique
   ============================================================ */

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

.artist-relaunch-history-card {
    margin-bottom: 18px;
}

.artist-relaunch-history-list {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}

.artist-relaunch-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.artist-relaunch-history-row > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.artist-relaunch-history-row > div:last-child {
    text-align: right;
}

.artist-relaunch-history-row span {
    color: var(--muted);
    font-size: 12px;
}

.duplicate-relaunch-warning {
    margin-bottom: 18px;
}

.relaunch-live-send-box {
    margin-top: 18px;
    padding: 18px;
    border: 2px solid #101828;
    border-radius: 16px;
    background: #fff;
}

.relaunch-live-send-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.relaunch-live-send-header strong {
    display: block;
    margin-top: 4px;
    font-size: 21px;
}

.relaunch-live-send-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.live-send-eyebrow {
    color: #b42318;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.live-send-confirm {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f9fafb;
    font-weight: 600;
    line-height: 1.45;
}

.live-send-confirm input {
    margin-top: 2px;
}

.live-send-button {
    background: #b42318;
    border-color: #b42318;
}

.live-send-button:hover:not(:disabled) {
    background: #912018;
    border-color: #912018;
}

.live-send-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.relaunch-live-result {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
}

.relaunch-live-result.success {
    color: #067647;
}

.relaunch-live-result.error {
    color: #b42318;
}

.history-filter-card {
    display: flex;
    align-items: end;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.history-filter-card label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 300px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.history-filter-card select {
    width: 100%;
    margin: 0;
}

.relaunch-history-table {
    min-width: 1180px;
}

.history-subject-cell {
    max-width: 380px;
}

.history-subject-cell summary {
    cursor: pointer;
    font-weight: 700;
}

.history-message-preview {
    max-height: 260px;
    overflow: auto;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fafafa;
    white-space: normal;
    line-height: 1.5;
    font-size: 12px;
}

@media (max-width: 850px) {
    .page-title-actions,
    .artist-relaunch-history-row,
    .relaunch-live-send-header,
    .history-filter-card {
        align-items: stretch;
        flex-direction: column;
    }

    .artist-relaunch-history-row > div:last-child {
        text-align: left;
    }

    .history-filter-card label {
        min-width: 0;
    }
}


/* ============================================================
   v1.3.1 — Historique intégré à Relances clients
   ============================================================ */

.inline-history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.inline-history-heading h2 {
    margin-bottom: 4px;
}

.inline-history-count {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: 12px;
    font-weight: 800;
}

.inline-history-empty {
    padding: 20px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #fafafa;
    color: var(--muted);
    text-align: center;
}

.inline-relaunch-history-table {
    min-width: 1080px;
}

.inline-history-subject {
    max-width: 340px;
}

.inline-history-subject summary {
    cursor: pointer;
    font-weight: 700;
}

@media (max-width: 800px) {
    .inline-history-heading {
        flex-direction: column;
    }
}


/* ============================================================
   v1.4 — Statistiques Facebook / Messenger
   ============================================================ */

.messenger-summary-grid {
    margin-bottom: 18px;
}

.fill-summary-card small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.stats-positive {
    color: #067647;
    font-weight: 800;
}

.stats-negative {
    color: #b42318;
    font-weight: 800;
}

.messenger-user-table {
    min-width: 900px;
}

.messenger-matrix-table {
    min-width: 1150px;
}

.messenger-year-chart {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.messenger-chart-row {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 12px;
}

.messenger-chart-row > strong {
    color: #475467;
    font-size: 12px;
    text-transform: uppercase;
}

.messenger-chart-bars {
    display: grid;
    gap: 5px;
}

.messenger-bar-line {
    display: grid;
    grid-template-columns: 44px minmax(120px, 1fr) 70px;
    align-items: center;
    gap: 8px;
}

.messenger-bar-line > span {
    color: var(--muted);
    font-size: 11px;
}

.messenger-bar-line > b {
    font-size: 12px;
    text-align: right;
}

.messenger-bar-track {
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: #f2f4f7;
}

.messenger-bar {
    min-width: 2px;
    height: 100%;
    border-radius: inherit;
    background: #344054;
}

.messenger-bar.previous {
    opacity: .45;
}

.messenger-unmapped-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.messenger-unmapped-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafafa;
}

.messenger-unmapped-row > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.messenger-unmapped-row > div span {
    color: var(--muted);
    font-size: 11px;
}

.messenger-unmapped-row select {
    width: 100%;
    margin: 0;
}

.messenger-user-settings {
    margin-bottom: 28px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafafa;
}

.messenger-user-settings textarea {
    width: 100%;
    margin-top: 6px;
    resize: vertical;
}

@media (max-width: 800px) {
    .messenger-unmapped-row {
        grid-template-columns: 1fr;
    }
}