.swvp-shell,
.swvp-dashboard,
.swvp-submission-form,
.swvp-notice,
.swvp-login-form {
    font: inherit;
}

.swvp-shell {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.swvp-map-shell {
    grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
}

.swvp-panel,
.swvp-map-workspace,
.swvp-route-detail,
.swvp-request-form,
.swvp-dashboard,
.swvp-submission-form,
.swvp-notice {
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    padding: 16px;
    background: #fff;
}

.swvp-volunteer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em 1.25em;
    margin: 0 0 1em;
}

.swvp-volunteer-links a {
    text-decoration: none;
}

.swvp-dashboard-account {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid #cfe2d2;
    border-radius: 4px;
    background: #f2f8f3;
}

.swvp-dashboard-account p {
    display: grid;
    gap: 2px;
    margin: 0;
}

.swvp-dashboard-account span {
    color: #555;
    font-size: 0.92em;
}

.swvp-dashboard-widget ul {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}

.swvp-dashboard-widget li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 0;
}

.swvp-dashboard-widget strong {
    min-width: 2ch;
    font-size: 1.25em;
}

.swvp-route-list {
    margin: 0 0 12px;
}

.swvp-route-list h3 {
    margin: 12px 0 6px;
    font-size: 1em;
}

.swvp-route-summary,
.swvp-route-list-empty {
    margin: 0;
    color: #555;
}

.swvp-route-chip {
    width: 100%;
    display: grid;
    gap: 2px;
    text-align: left;
    border: 1px solid #d1a83a;
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 8px;
    background: #fff8e5;
    color: #222;
    cursor: pointer;
}

.swvp-route-chip small {
    color: #715615;
    font-weight: 600;
}

.swvp-route-chip:hover,
.swvp-route-chip:focus,
.swvp-route-chip.is-selected {
    background: #eef6ef;
    border-color: #005ea8;
}

.swvp-route-chip.is-unavailable {
    background: #f3f3f3;
    border-color: #b8b8b8;
}

.swvp-route-chip.is-unavailable small {
    color: #666;
}

.swvp-route-search,
.swvp-route-length,
.swvp-layer-select {
    display: grid;
    gap: 5px;
    margin: 0 0 12px;
}

.swvp-route-source-toggles,
.swvp-route-status-toggles,
.swvp-route-debug-toggles {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #d6d6d6;
}

.swvp-route-source-toggles legend,
.swvp-route-status-toggles legend,
.swvp-route-debug-toggles legend {
    padding: 0 4px;
    font-weight: 600;
}

.swvp-route-debug-toggles {
    border-color: #d1a83a;
    background: #fffaf0;
}

.swvp-route-debug-toggles p {
    margin: 0 0 4px;
    color: #715615;
    font-size: 0.9em;
}

.swvp-route-search input,
.swvp-route-length select {
    width: 100%;
}

.swvp-map-workspace {
    padding: 0;
    overflow: hidden;
}

.swvp-map-frame {
    position: relative;
}

.swvp-map {
    width: 100%;
    height: min(68vh, 680px);
    min-height: 420px;
    background: #e7ecef;
}

.swvp-map-reset {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 4px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.96);
    color: #222;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

.swvp-map-reset:hover,
.swvp-map-reset:focus {
    background: #eef6ef;
}

.swvp-furniture-popup {
    position: absolute;
    z-index: 8;
    min-width: 220px;
    max-width: min(360px, calc(100% - 32px));
    max-height: 320px;
    overflow: auto;
    transform: translate(12px, -12px);
    border: 1px solid #1f2937;
    border-radius: 4px;
    padding: 10px;
    background: #fff;
    color: #111827;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

.swvp-furniture-popup[hidden] {
    display: none;
}

.swvp-furniture-popup-title {
    margin: 0 0 8px;
    font-weight: 700;
}

.swvp-furniture-popup article + article {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.swvp-furniture-popup strong {
    display: block;
    margin: 0 0 6px;
}

.swvp-furniture-popup dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 8px;
    margin: 0;
    font-size: 0.9em;
}

.swvp-furniture-popup dt {
    color: #4b5563;
    font-weight: 600;
}

.swvp-furniture-popup dd {
    margin: 0;
}

.swvp-route-detail {
    border-width: 1px 0 0;
    border-radius: 0;
}

.swvp-route-detail dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 12px;
    margin: 12px 0 0;
}

.swvp-route-detail dt {
    font-weight: 600;
}

.swvp-route-detail dd {
    margin: 0;
}

.swvp-route-action {
    margin: 16px 0 0;
}

.swvp-route-action .swvp-action-button {
    max-width: 100%;
    white-space: normal;
}

.swvp-status-note {
    border-left: 4px solid #d1a83a;
    padding: 8px 10px;
    background: #fff8e5;
}

.swvp-status-note.is-unavailable {
    border-left-color: #8a8a8a;
    background: #f3f3f3;
}

.swvp-request-form button[disabled] {
    cursor: progress;
    opacity: 0.72;
}

.swvp-request-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.swvp-request-form[hidden],
.swvp-message[hidden] {
    display: none;
}

.swvp-request-form label,
.swvp-submission-form label {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

.swvp-login-form {
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    padding: 16px;
    background: #fff;
}

.swvp-login-form label {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

.swvp-checkbox {
    display: flex !important;
    gap: 8px;
    align-items: center;
}

.swvp-upload-guidance {
    margin: -4px 0 12px;
    padding: 10px 12px;
    border-left: 4px solid #005ea8;
    background: #f0f6fb;
    color: #1d2327;
}

.swvp-upload-guidance p {
    margin: 0 0 6px;
}

.swvp-upload-guidance p:last-child {
    margin-bottom: 0;
}

.swvp-message {
    margin: 10px 0;
    padding: 10px;
    border-left: 4px solid #427a46;
    background: #eef6ef;
}

.swvp-message-error {
    border-left-color: #b32d2e;
    background: #fcf0f1;
}

.swvp-dashboard table {
    width: 100%;
    border-collapse: collapse;
}

.swvp-dashboard th,
.swvp-dashboard td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.swvp-dashboard td:nth-child(4) {
    text-align: left;
}

.swvp-dashboard td:nth-child(4) > *,
.swvp-dashboard td:nth-child(4) form {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 8px;
}

.swvp-dashboard td:nth-child(4) ul,
.swvp-dashboard td:nth-child(4) li {
    list-style: none !important;
    margin-left: 0;
    padding-left: 0;
}

.swvp-dashboard td:nth-child(4) a {
    display: inline-block;
    border: 1px solid #1769aa;
    border-radius: 3px;
    padding: 7px 10px;
    background: #1769aa;
    color: #fff;
    font: inherit;
    line-height: 1.25;
    text-decoration: none;
}

.swvp-dashboard td:nth-child(4) a:hover,
.swvp-dashboard td:nth-child(4) a:focus {
    background: #0f4f82;
    color: #fff;
}

.swvp-action-button {
    appearance: none;
    border: 1px solid #1769aa;
    border-radius: 3px;
    padding: 7px 10px;
    background: #1769aa;
    color: #fff;
    font: inherit;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
}

.swvp-action-button:hover,
.swvp-action-button:focus {
    background: #0f4f82;
    color: #fff;
}

.swvp-action-button-danger {
    border-color: #a12622;
    background: #fff;
    color: #a12622;
}

.swvp-action-button-danger:hover,
.swvp-action-button-danger:focus {
    background: #fcf0f1;
    color: #8a1d1a;
}

.swvp-link-button {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: #a12622;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.swvp-inline-file-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.swvp-inline-file-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.swvp-dashboard .swvp-inline-file-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.swvp-submission-panel {
    display: grid;
    gap: 18px;
}

.swvp-upload-section {
    border-top: 1px solid #e1e1e1;
    padding-top: 16px;
}

.swvp-upload-section h3 {
    margin: 0 0 6px;
    font-weight: 700;
}

.swvp-survey-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 16px 0; }
.swvp-survey-filters > input[type="search"] { max-width: 100%; min-height: 34px; }
.swvp-multiselect { position: relative; min-width: 160px; max-width: 100%; }
.swvp-multiselect summary { cursor: pointer; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; padding: 6px 10px; min-height: 20px; }
.swvp-multiselect summary span { margin-left: 8px; color: #50575e; }
.swvp-multiselect-options { position: absolute; top: 100%; left: 0; z-index: 20; background: #fff; border: 1px solid #8c8f94; padding: 10px; width: 240px; max-width: calc(100vw - 65px); max-height: 330px; overflow: auto; box-sizing: border-box; }
.swvp-multiselect-options label { display: block; padding: 5px 0; overflow-wrap: anywhere; }
.swvp-multiselect-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.swvp-survey-pagination { display: flex; gap: 12px; align-items: center; margin-top: 14px; }

.swvp-upload-help {
    margin: 0 0 12px;
    color: #555;
}

.swvp-submit-files-button {
    justify-self: start;
}

.swvp-assigned-surveys {
    border-left: 4px solid #c99720;
    background: #fff8e5;
    padding: 12px 14px;
}

.swvp-assigned-surveys h2 {
    margin-top: 0;
}

.swvp-upload-ready-surveys {
    border-left-color: #1769aa;
    background: #f1f7fc;
}

.swvp-upload-ready-surveys .swvp-assigned-survey {
    border-top-color: #c9ddeb;
}

.swvp-offered-surveys {
    border-left-color: #6b7280;
    background: #f5f6f7;
}

.swvp-offered-surveys .swvp-assigned-survey {
    border-top-color: #d5d8dc;
}

.swvp-assigned-survey {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    border-top: 1px solid #e5d8ae;
    padding: 10px 0 0;
    margin-top: 10px;
}

.swvp-active-submissions,
.swvp-previous-submissions {
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    padding: 16px;
    background: #fff;
}

.swvp-upload-status {
    border-left: 4px solid #1769aa;
    padding: 4px 0 4px 14px;
}

.swvp-upload-status h2 {
    margin: 0 0 8px;
}

.swvp-upload-status p,
.swvp-submission-history-help {
    margin: 0;
}

.swvp-submission-history-help {
    color: #555;
}

.swvp-finish-submission-form {
    border-top: 1px solid #d6d6d6;
    padding-top: 16px;
}

.swvp-submission-record {
    border-top: 1px solid #e1e1e1;
    margin-top: 12px;
}

.swvp-submission-record summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    cursor: pointer;
    padding: 12px 0;
}

.swvp-submission-record summary::marker {
    color: #1769aa;
}

.swvp-submission-record summary strong {
    flex: 1 1 360px;
}

.swvp-submission-summary-status {
    font-weight: 600;
}

.swvp-submission-record-body {
    padding: 0 0 12px 24px;
}

.swvp-muted {
    color: #666;
    margin-left: 8px;
}

.swvp-file-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.swvp-photo-recovery-warning,
.swvp-photo-recovery-warning code {
    overflow-wrap: anywhere;
    white-space: normal;
}

.swvp-file-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    border-top: 1px solid #eee;
    padding: 8px 0;
}

.swvp-file-thumbnail {
    width: 96px;
    height: 72px;
    flex: 0 0 96px;
    object-fit: cover;
    border: 1px solid #d6d6d6;
    border-radius: 3px;
    background: #f5f5f5;
}

.swvp-file-category {
    padding: 3px 7px;
    border: 1px solid #c9d7e3;
    border-radius: 3px;
    background: #f0f6fb;
    color: #244b68;
    font-size: 0.9em;
}

.swvp-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.swvp-admin-box {
    margin-top: 18px;
}

.swvp-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.swvp-history-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.swvp-history-scroll table {
    min-width: 900px;
    table-layout: fixed;
}

.swvp-history-scroll .check-column {
    width: 32px;
}

.swvp-admin-box.swvp-history table th {
    width: auto;
}

.swvp-history-scroll td,
.swvp-history-scroll th {
    overflow-wrap: anywhere;
}

.swvp-history-scroll .swvp-history-note {
    white-space: pre-wrap;
}

.swvp-history-hidden {
    border-left: 3px solid #646970;
    padding-left: 8px;
    font-size: 12px;
}

.wp-core-ui .swvp-history .swvp-history-action .dashicons {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1;
}

.wp-core-ui .swvp-history .swvp-history-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    line-height: 1;
}

.swvp-add-survey-box {
    margin: 18px 0 24px;
    padding: 0 14px 14px;
    border: 1px solid #dcdcde;
    background: #fff;
}

.swvp-add-survey-box > summary {
    display: block;
    margin: 0 -14px;
    padding: 12px 14px;
    color: #1d2327;
    font-size: 1.05em;
    cursor: pointer;
}

.swvp-add-survey-box[open] > summary {
    margin-bottom: 12px;
    border-bottom: 1px solid #dcdcde;
}

.swvp-add-survey-box > p {
    margin-top: 0;
}

.swvp-add-survey-box .swvp-filter-form {
    margin-top: 12px;
}

.swvp-settings-section {
    margin: 0 0 14px;
    border: 1px solid #dcdcde;
    background: #fff;
}

.swvp-settings-section > summary {
    padding: 12px 14px;
    color: #1d2327;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
}

.swvp-settings-section > summary::marker {
    color: #1769aa;
}

.swvp-settings-section > .form-table,
.swvp-settings-section > .description {
    margin-left: 14px;
    margin-right: 14px;
}

.swvp-duplicate-notice ul {
    margin: 0 0 10px 18px;
}

.swvp-duplicate-notice a {
    display: inline-block;
    margin-left: 8px;
}

.swvp-admin-muted {
    color: #646970;
}

.swvp-admin-box table th {
    width: 180px;
}

.swvp-surveyor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #dcdcde;
}

.swvp-surveyor-row form {
    margin: 0;
}

.swvp-file-metadata {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 8px;
    margin: 0;
}

.swvp-file-metadata dt {
    font-weight: 600;
}

.swvp-file-metadata dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.swvp-file-list {
    display: grid;
    gap: 10px;
}

.swvp-file-item {
    border: 1px solid #dcdcde;
    background: #fff;
    padding: 12px;
}

.swvp-file-main {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.swvp-file-title {
    min-width: 0;
}

.swvp-file-title strong,
.swvp-file-title span {
    display: block;
    overflow-wrap: anywhere;
}

.swvp-file-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.swvp-status-pill {
    border: 1px solid #8fbd92;
    background: #f2f8f3;
    color: #1f6f28;
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
    padding: 2px 7px;
    white-space: nowrap;
}

.swvp-status-pill.is-piwigo {
    border-color: #72aee6;
    background: #f0f6fc;
    color: #135e96;
}

.swvp-status-pill.is-muted {
    border-color: #dcdcde;
    background: #f6f7f7;
    color: #646970;
}

.swvp-file-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.swvp-file-actions form {
    margin: 0;
}

.swvp-file-details {
    margin-top: 10px;
}

.swvp-file-details summary {
    cursor: pointer;
    font-weight: 600;
}

.swvp-workflow-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.swvp-workflow-guide li {
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    padding: 10px;
    background: #fff;
}

.swvp-workflow-guide li.is-current {
    border-color: #005ea8;
    box-shadow: inset 0 0 0 2px #005ea8;
}

.swvp-workflow-guide strong,
.swvp-workflow-guide span,
.swvp-status-form label {
    display: block;
}

.swvp-workflow-guide span {
    margin-top: 5px;
    color: #50575e;
}

.swvp-workflow-exception-heading {
    font-size: 14px;
    margin: 16px 0 8px;
}

.swvp-workflow-exceptions {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
}

@media (max-width: 900px) {
    .swvp-workflow-exceptions {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}

.swvp-status-form {
    display: grid;
    gap: 10px;
    max-width: 720px;
    margin-top: 14px;
}

.swvp-status-controls,
.swvp-status-message-fields {
    display: grid;
    gap: 10px;
}

.swvp-status-controls[hidden],
.swvp-status-message-fields[hidden] {
    display: none;
}

.swvp-status-form.is-deleting [data-swvp-status-submit] {
    justify-self: start;
    color: #b32d2e;
    border-color: #b32d2e;
}

.swvp-status-form select {
    min-width: 220px;
}

.swvp-status-form textarea[data-swvp-volunteer-message] {
    border-left: 4px solid #2271b1;
}

.swvp-status-final {
    border-left: 4px solid #d1a83a;
    padding: 8px 10px;
    background: #fff8e5;
}

.swvp-ris-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
    align-items: center;
}

.swvp-ris-actions form {
    margin: 0;
}

.swvp-inline-form {
    display: inline-block;
    margin: 6px 0 0;
}

.swvp-ris-status {
    background: #f6f7f7;
    border-left: 4px solid #646970;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 10px 0 14px;
    padding: 12px;
}

.swvp-ris-status span {
    color: #646970;
    font-weight: 600;
    text-transform: uppercase;
}

.swvp-ris-status strong {
    font-size: 16px;
}

.swvp-ris-status em {
    color: #50575e;
    font-style: normal;
}

.swvp-ris-status-released {
    background: #edf7ed;
    border-left-color: #008a20;
}

.swvp-ris-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.swvp-ris-checklist li {
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    padding: 9px 10px;
    background: #fff;
}

.swvp-ris-checklist li.is-complete {
    border-color: #8fbd92;
    background: #f2f8f3;
}

.swvp-ris-checklist span {
    display: block;
    margin-bottom: 3px;
    color: #646970;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.swvp-button-warning {
    border-color: #b32d2e !important;
    color: #b32d2e !important;
}

.swvp-ris-map {
    width: 100%;
    height: 560px;
    min-height: 560px;
    background: #e7ecef;
}

.swvp-ris-map-export {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.swvp-ris-map-export-status {
    color: #50575e;
}

.swvp-ris-map-export-status.is-error {
    color: #b32d2e;
}

.swvp-admin-check {
    display: block;
    margin: 10px 0;
}

.swvp-review-summary {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, max-content);
}

.swvp-review-summary span {
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 22px;
    line-height: 20px;
    padding: 0 5px;
}

.swvp-review-summary b {
    color: #2271b1;
}

.swvp-ris-furniture {
    border: 1px solid #dcdcde;
    margin: 14px 0;
    padding: 10px 12px;
}

.swvp-ris-furniture legend {
    font-weight: 600;
    padding: 0 6px;
}

.swvp-ris-furniture-count {
    color: #50575e;
    font-size: 12px;
    font-weight: 400;
}

.swvp-ris-map-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.swvp-ris-last-saved {
    font-style: italic;
}

.swvp-color-input {
    width: 44px;
    height: 32px;
    padding: 2px;
    vertical-align: middle;
}

.swvp-color-input + code {
    margin-left: 8px;
}

.swvp-ris-style-settings-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.4fr);
    gap: 24px;
    align-items: start;
}

.swvp-ris-style-settings-controls,
.swvp-ris-style-settings-preview {
    min-width: 0;
}

.swvp-ris-style-settings-controls {
    padding-left: 16px;
}

.swvp-ris-style-settings-controls .form-table {
    margin-top: 0;
}

.swvp-ris-style-preview {
    position: sticky;
    top: 32px;
    max-width: none;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid #dcdcde;
}

.swvp-ris-style-preview h3 {
    margin: 0;
}

.swvp-ris-style-preview-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 6px;
}

.swvp-ris-style-preview-map {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 720px;
    margin-top: 12px;
    background-color: #dbeef3;
    background-position: center;
    background-size: 180% auto;
    border: 1px solid #8c8f94;
    overflow: hidden;
}

.swvp-ris-style-preview-basemap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.swvp-ris-style-preview-basemap .ol-viewport {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.swvp-ris-style-preview-map svg {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.swvp-ris-style-preview-basemap-active + svg {
    visibility: hidden;
}

.swvp-ris-style-preview-map path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.swvp-ris-style-preview-map circle {
    stroke: #fff;
    stroke-width: 3;
}

.swvp-ris-style-preview-key {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 8px;
}

.swvp-ris-style-preview-key span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.swvp-ris-style-preview-key i {
    display: inline-block;
    width: 22px;
    height: 5px;
    border-radius: 3px;
}

.swvp-ris-style-preview-key i[data-swvp-preview-key="furniture"] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
}

@media (max-width: 1100px) {
    .swvp-ris-style-settings-layout {
        grid-template-columns: 1fr;
    }

    .swvp-ris-style-settings-controls {
        padding-left: 0;
    }

    .swvp-ris-style-preview {
        position: static;
        margin-top: 18px;
    }
}

.swvp-piwigo-image-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.swvp-piwigo-image {
    position: relative;
    border: 1px solid #dcdcde;
    background: #fff;
    padding: 8px;
}

.swvp-piwigo-image img {
    aspect-ratio: 1;
    background: #f0f0f1;
    display: block;
    height: auto;
    margin-bottom: 8px;
    object-fit: cover;
    width: 100%;
}

.swvp-piwigo-gallery {
    margin-top: 18px;
}

.swvp-piwigo-gallery h4 {
    margin: 0 0 10px;
}

.swvp-piwigo-image {
    margin: 0;
}

.swvp-piwigo-image figcaption {
    overflow-wrap: anywhere;
    font-size: 0.9em;
}

.swvp-piwigo-image-credit {
    display: block;
    color: #666;
    font-size: 0.9em;
}

.swvp-piwigo-remove-form {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    margin: 0;
}

.swvp-piwigo-remove-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 1px solid #9b1c1c;
    border-radius: 4px;
    background: #fff;
    color: #9b1c1c;
    cursor: pointer;
}

.swvp-piwigo-remove-form button:hover {
    background: #fce8e8;
}

.swvp-piwigo-remove-form button:focus-visible {
    outline: 2px solid #135e96;
    outline-offset: 2px;
}

.swvp-piwigo-image strong,
.swvp-piwigo-image span,
.swvp-piwigo-image a {
    display: block;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .swvp-shell {
        grid-template-columns: 1fr;
    }

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

    .swvp-file-main {
        display: block;
    }

    .swvp-file-status {
        justify-content: flex-start;
        margin-top: 8px;
    }
}