/*
============================================================
 KLEINANZEIGEN – ZENTRALES UI THEME
 Helles, modernes Verkaufs-/Inventar-Interface
============================================================
*/

:root {
    --ka-bg: #eef1f5;
    --ka-bg-soft: #f5f7fa;

    --ka-surface: #ffffff;
    --ka-surface-soft: #f8fafc;
    --ka-surface-muted: #f1f3f6;

    --ka-border: #d8dde5;
    --ka-border-strong: #c7ced8;

    --ka-text: #17202a;
    --ka-text-soft: #53606f;
    --ka-text-muted: #748092;

    --ka-primary: #168447;
    --ka-primary-hover: #116f3b;

    --ka-danger: #c52b32;
    --ka-danger-hover: #a92229;

    --ka-warning: #b97800;
    --ka-info: #2563eb;

    --ka-radius: 14px;
    --ka-radius-small: 9px;

    --ka-shadow:
        0 2px 8px rgba(20, 30, 45, .06),
        0 10px 30px rgba(20, 30, 45, .05);
}

/* ---------------------------------------------------------
   BASIS
--------------------------------------------------------- */

html {
    background: var(--ka-bg) !important;
}

body {
    background: var(--ka-bg) !important;
    color: var(--ka-text) !important;
}

/* ---------------------------------------------------------
   LINKS
--------------------------------------------------------- */

a {
    color: inherit;
}

a:hover {
    opacity: .92;
}

/* ---------------------------------------------------------
   HAUPTCONTAINER
--------------------------------------------------------- */

main,
.container,
.page,
.content,
.page-content {
    color: var(--ka-text) !important;
}

/* ---------------------------------------------------------
   CARDS / PANELS
--------------------------------------------------------- */

.card,
.panel,
.box,
section,
article,
.device-card,
.photo-card,
.import-card,
.form-card,
.editor-card {
    background: var(--ka-surface) !important;
    color: var(--ka-text) !important;
    border-color: var(--ka-border) !important;
    box-shadow: var(--ka-shadow);
}

/* Keine riesigen dunklen Flächen mehr */

.card *,
.panel *,
.box *,
section *,
article *,
.device-card *,
.photo-card *,
.import-card *,
.form-card *,
.editor-card * {
    color: inherit;
}

/* ---------------------------------------------------------
   ÜBERSCHRIFTEN
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ka-text) !important;
}

p,
label,
small {
    color: var(--ka-text-soft);
}

/* ---------------------------------------------------------
   SEKUNDÄRTEXT
--------------------------------------------------------- */

.muted,
.subtitle,
.description,
.help,
.meta,
.text-muted {
    color: var(--ka-text-muted) !important;
}

/* ---------------------------------------------------------
   FORMULARE
--------------------------------------------------------- */

input,
textarea,
select {
    background: #ffffff !important;
    color: var(--ka-text) !important;
    border: 1px solid var(--ka-border-strong) !important;
    border-radius: var(--ka-radius-small);
}

input::placeholder,
textarea::placeholder {
    color: #8a95a3 !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #7aa9d8 !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

button,
.btn,
.button {
    border-radius: var(--ka-radius-small);
    font-weight: 600;
    border: 1px solid transparent;
}

/* Primär */

button[type="submit"],
.btn-primary,
.button-primary,
.primary {
    background: var(--ka-primary) !important;
    color: #ffffff !important;
}

button[type="submit"]:hover,
.btn-primary:hover,
.button-primary:hover,
.primary:hover {
    background: var(--ka-primary-hover) !important;
}

/* Danger */

.btn-danger,
.button-danger,
.danger,
button.danger {
    background: var(--ka-danger) !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.button-danger:hover,
.danger:hover,
button.danger:hover {
    background: var(--ka-danger-hover) !important;
}

/* Sekundär */

.btn-secondary,
.button-secondary,
.secondary {
    background: #e8ebef !important;
    color: var(--ka-text) !important;
    border-color: var(--ka-border) !important;
}

/* ---------------------------------------------------------
   STATUS BADGES
--------------------------------------------------------- */

.badge,
.status,
.tag,
.chip {
    background: var(--ka-surface-muted) !important;
    color: var(--ka-text-soft) !important;
    border: 1px solid var(--ka-border) !important;
}

/* ---------------------------------------------------------
   TABELLEN
--------------------------------------------------------- */

table {
    background: var(--ka-surface) !important;
    color: var(--ka-text) !important;
    border-color: var(--ka-border) !important;
}

th {
    background: #eef1f5 !important;
    color: var(--ka-text) !important;
}

td {
    background: #ffffff !important;
    color: var(--ka-text) !important;
    border-color: var(--ka-border) !important;
}

tr:nth-child(even) td {
    background: #fafbfc !important;
}

/* ---------------------------------------------------------
   FOTO / IMPORT
--------------------------------------------------------- */

.dropzone,
.upload-zone,
.drop-area,
.import-dropzone {
    background: #f8fafc !important;
    color: var(--ka-text) !important;
    border: 2px dashed #b8c1cd !important;
    border-radius: var(--ka-radius);
}

.dropzone:hover,
.upload-zone:hover,
.drop-area:hover,
.import-dropzone:hover {
    background: #f0f6ff !important;
    border-color: #7aa9d8 !important;
}

/* ---------------------------------------------------------
   FOTO-KARTEN
--------------------------------------------------------- */

.photo-card img,
.device-card img {
    background: #eef1f5;
}

/* ---------------------------------------------------------
   PROGRESS
--------------------------------------------------------- */

progress {
    background: #dfe4ea;
}

progress::-webkit-progress-bar {
    background: #dfe4ea;
    border-radius: 999px;
}

progress::-webkit-progress-value {
    background: var(--ka-primary);
    border-radius: 999px;
}

/* ---------------------------------------------------------
   CODE / TECHNISCHE AUSGABEN
--------------------------------------------------------- */

pre,
code {
    background: #f1f3f6 !important;
    color: #27313d !important;
    border-color: var(--ka-border) !important;
}

/* ---------------------------------------------------------
   ALERTS
--------------------------------------------------------- */

.alert,
.notice,
.message {
    background: #ffffff !important;
    color: var(--ka-text) !important;
    border-color: var(--ka-border) !important;
}

.alert-error,
.error {
    background: #fff1f1 !important;
    color: #9d2026 !important;
    border-color: #efb4b7 !important;
}

.alert-success,
.success {
    background: #effaf3 !important;
    color: #176b3d !important;
    border-color: #b8dfc8 !important;
}

.alert-warning,
.warning {
    background: #fff8e8 !important;
    color: #825900 !important;
    border-color: #ead39c !important;
}

/* ---------------------------------------------------------
   HEADER / NAVIGATION
--------------------------------------------------------- */

header,
nav,
.site-header,
.topbar,
.navbar {
    color: var(--ka-text) !important;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {
    .card,
    .panel,
    .box,
    section,
    article {
        border-radius: 11px;
    }

    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.4rem;
    }
}

/* ============================================================
   FOTOIMPORT – SAUBERES LAYOUT
   ============================================================ */

body {
    min-height: 100vh;
}

/*
   Import-Seite:
   vorhandene Elemente nicht mehr durch globale
   Card-Regeln ineinander laufen lassen.
*/

.import-card,
.import-container,
.import-batch,
.bulk-import,
.photo-import {
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   Dropzone
------------------------------------------------------------ */

.dropzone,
.upload-zone,
.drop-area,
.import-dropzone {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 180px !important;
    width: 100% !important;

    box-sizing: border-box !important;

    margin: 20px 0 !important;
    padding: 35px !important;

    background: #f7f9fc !important;

    border: 2px dashed #b8c3d1 !important;
    border-radius: 14px !important;

    color: #17202a !important;

    text-align: center !important;

    overflow: hidden !important;
}

/* Dropzone-Text */

.dropzone *,
.upload-zone *,
.drop-area *,
.import-dropzone * {
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------
   Fortschrittsbalken
------------------------------------------------------------ */

.dropzone progress,
.upload-zone progress,
.drop-area progress,
.import-dropzone progress {
    position: absolute !important;

    left: 25px !important;
    right: 25px !important;
    bottom: 20px !important;

    width: calc(100% - 50px) !important;

    height: 10px !important;

    margin: 0 !important;

    z-index: 1 !important;
}

/* ------------------------------------------------------------
   Import-Zähler
------------------------------------------------------------ */

.import-count,
.photo-count,
.upload-count,
.progress-label {
    color: #17202a !important;
    font-weight: 700 !important;
}

/* ------------------------------------------------------------
   Neuer Stapel
------------------------------------------------------------ */

.import-card button,
.import-container button,
.import-batch button,
.bulk-import button {
    box-sizing: border-box;
}

.import-card button[type="button"],
.import-container button[type="button"],
.import-batch button[type="button"],
.bulk-import button[type="button"] {
    background: #168447 !important;
    color: #ffffff !important;

    border: 1px solid #168447 !important;

    padding: 11px 18px !important;

    border-radius: 9px !important;

    font-weight: 700 !important;

    cursor: pointer !important;
}

.import-card button[type="button"]:hover,
.import-container button[type="button"]:hover,
.import-batch button[type="button"]:hover,
.bulk-import button[type="button"]:hover {
    background: #116f3b !important;
}

/* ------------------------------------------------------------
   Import-Card allgemein
------------------------------------------------------------ */

.import-card,
.import-container,
.import-batch,
.bulk-import {
    background: #ffffff !important;
    color: #17202a !important;

    border: 1px solid #d8dde5 !important;

    border-radius: 16px !important;

    box-shadow:
        0 2px 8px rgba(20,30,45,.06),
        0 12px 30px rgba(20,30,45,.06) !important;

    padding: 30px !important;

    box-sizing: border-box !important;
}

/* ------------------------------------------------------------
   Import-Seitentext
------------------------------------------------------------ */

.import-card h1,
.import-card h2,
.import-card h3,
.import-container h1,
.import-container h2,
.import-container h3,
.import-batch h1,
.import-batch h2,
.import-batch h3 {
    color: #17202a !important;
}

/* ------------------------------------------------------------
   Drag & Drop Hover
------------------------------------------------------------ */

.dropzone:hover,
.upload-zone:hover,
.drop-area:hover,
.import-dropzone:hover {
    background: #f0f6ff !important;
    border-color: #78a7d8 !important;
}

/* ------------------------------------------------------------
   Mobile
------------------------------------------------------------ */

@media (max-width: 700px) {

    .dropzone,
    .upload-zone,
    .drop-area,
    .import-dropzone {
        min-height: 160px !important;
        padding: 25px !important;
    }

    .import-card,
    .import-container,
    .import-batch,
    .bulk-import {
        padding: 20px !important;
    }
}


/* Neuer Stapel – Text explizit weiß */
.import-card button[type="button"],
.import-container button[type="button"],
.import-batch button[type="button"],
.bulk-import button[type="button"] {
    color: #ffffff !important;
    background: #168447 !important;
    border-color: #168447 !important;
}

.import-card button[type="button"]:hover,
.import-container button[type="button"]:hover,
.import-batch button[type="button"]:hover,
.bulk-import button[type="button"]:hover {
    color: #ffffff !important;
    background: #116f3b !important;
}


/* ============================================================
   NEUER STAPEL – ABSOLUTER OVERRIDE
   ============================================================ */

a.new-batch-button,
button.new-batch-button,
.new-batch-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #168447 !important;
    background-color: #168447 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid #168447 !important;

    text-decoration: none !important;

    padding: 11px 18px !important;
    border-radius: 9px !important;

    font-weight: 700 !important;

    opacity: 1 !important;
}

a.new-batch-button *,
button.new-batch-button *,
.new-batch-button * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

a.new-batch-button:hover,
button.new-batch-button:hover,
.new-batch-button:hover {
    background: #116f3b !important;
    background-color: #116f3b !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ============================================================
   FOTOIMPORT – ECHTE BILDVORSCHAU
   ============================================================ */

.kleinanzeigen-import-preview {
    display: block !important;

    width: 100% !important;
    height: 180px !important;

    object-fit: cover !important;

    background: #ffffff !important;

    border-radius: 10px !important;

    margin: 0 0 10px 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   FOTOIMPORT – ECHTE FOTO-KARTEN
   ============================================================ */

.kleinanzeigen-import-photo-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d8dee7;

    border-radius: 12px;

    box-shadow: 0 2px 8px rgba(20, 30, 45, 0.08);
}

.kleinanzeigen-import-photo-image {
    width: 100%;
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f1f4f8;

    overflow: hidden;
}

.kleinanzeigen-import-photo-preview {
    display: block !important;

    width: 100% !important;
    height: 190px !important;

    object-fit: contain !important;

    background: #f1f4f8 !important;
}

.kleinanzeigen-import-photo-info {
    padding: 10px 12px 12px;
}

.kleinanzeigen-import-photo-name {
    color: #17212f;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.kleinanzeigen-import-photo-size {
    margin-top: 4px;

    color: #6b7788;

    font-size: 13px;
}


/* ============================================================
   IMPORT REVIEW – ECHTE FOTO-VORSCHAU
   ============================================================ */

.kleinanzeigen-review-photo-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d8dee7;

    border-radius: 12px;

    box-shadow: 0 2px 8px rgba(20, 30, 45, 0.08);
}

.kleinanzeigen-review-photo-image {
    width: 100%;
    height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f1f4f8;

    overflow: hidden;
}

.kleinanzeigen-review-photo-image img {
    display: block !important;

    width: 100% !important;
    height: 220px !important;

    object-fit: contain !important;

    background: #f1f4f8 !important;
}

.kleinanzeigen-review-photo-info {
    padding: 11px 13px 13px;
}

.kleinanzeigen-review-photo-name {
    color: #17212f;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.kleinanzeigen-review-photo-meta {
    margin-top: 5px;

    color: #6b7788;

    font-size: 13px;
}


/* ============================================================
   BULKIMPORT – HAUPTNAVIGATION
   ============================================================ */

.kleinanzeigen-bulk-import-button {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 18px;

    margin-left: 8px;

    border-radius: 9px;

    background: #168a4a !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 15px;

    font-weight: 700;

    line-height: 1;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.kleinanzeigen-bulk-import-button:hover {
    background: #11733d !important;

    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-1px);
}

.kleinanzeigen-bulk-import-secondary {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 17px;

    margin: 10px 0 20px 0;

    border-radius: 9px;

    background: #e8f5ee !important;

    border: 1px solid #b8dec7 !important;

    color: #126b3b !important;

    text-decoration: none !important;

    font-size: 15px;

    font-weight: 700;

    box-sizing: border-box;
}

.kleinanzeigen-bulk-import-secondary:hover {
    background: #d9efe2 !important;

    color: #0d5a31 !important;

    text-decoration: none !important;
}

.kleinanzeigen-bulk-import-fallback {
    margin: 0 0 24px 0;
}


/* ============================================================
   KI-GRUPPIERUNG
   ============================================================ */

.kleinanzeigen-ai-start-box {
    margin: 0 0 28px 0;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #cfd8e3;

    border-radius: 14px;

    box-shadow: 0 3px 12px rgba(20, 30, 45, 0.08);
}

.kleinanzeigen-ai-start-title {
    color: #17212f;

    font-size: 21px;

    font-weight: 800;

    margin-bottom: 7px;
}

.kleinanzeigen-ai-start-text {
    color: #667386;

    font-size: 15px;

    line-height: 1.5;

    margin-bottom: 16px;

    max-width: 720px;
}

.kleinanzeigen-start-ai-analysis {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 9px;

    background: #1769aa !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 15px;

    font-weight: 800;
}

.kleinanzeigen-start-ai-analysis:hover {
    background: #125788 !important;

    color: #ffffff !important;
}


/* ============================================================
   KI-GRUPPEN REVIEW
   ============================================================ */

.kg-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 24px 80px;
}

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

.kg-kicker {
    color: #1769aa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.kg-header h1 {
    margin: 4px 0;
    color: #17212f;
}

.kg-header p {
    margin: 5px 0 0;
    color: #687587;
}

.kg-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 17px 19px;
    margin-bottom: 24px;
    background: #eef6ff;
    border: 1px solid #c9def2;
    border-radius: 12px;
    color: #30455b;
}

.kg-group {
    margin-bottom: 26px;
    background: #fff;
    border: 1px solid #d5dde7;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(20,30,45,.07);
}

.kg-group-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    background: #f7f9fc;
    border-bottom: 1px solid #dfe5ec;
}

.kg-group-number {
    color: #1769aa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.kg-group-header h2 {
    margin: 5px 0 7px;
    color: #17212f;
}

.kg-device-identification {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #667386;
}

.kg-device-identification span,
.kg-device-identification strong {
    padding: 5px 9px;
    background: #edf1f5;
    border-radius: 6px;
}

.kg-group-confidence {
    flex: 0 0 100px;
    text-align: right;
}

.kg-group-confidence span {
    display: block;
    color: #7a8797;
    font-size: 12px;
}

.kg-group-confidence strong {
    display: block;
    margin-top: 4px;
    color: #1769aa;
    font-size: 25px;
}

.kg-group-body {
    padding: 22px;
}

.kg-section-title {
    margin-bottom: 12px;
    color: #283647;
    font-size: 14px;
    font-weight: 800;
}

.kg-photo-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(180px, 1fr)
    );
    gap: 14px;
}

.kg-photo-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7dee7;
    border-radius: 10px;
}

.kg-photo-image {
    height: 190px;
    background: #f0f3f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kg-photo-image img {
    display: block !important;
    width: 100% !important;
    height: 190px !important;
    object-fit: contain !important;
}

.kg-photo-info {
    padding: 10px;
}

.kg-photo-name {
    color: #253244;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-photo-meta {
    margin-top: 6px;
}

.kg-photo-relation {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
}

.kg-photo-relation.main {
    background: #e6f4eb;
    color: #167044;
}

.kg-photo-relation.accessory {
    background: #fff1dc;
    color: #955b00;
}

.kg-photo-relation.unknown {
    background: #edf0f4;
    color: #697687;
}

.kg-photo-action {
    width: 100%;
    margin-top: 9px;
    padding: 7px 8px;
    border: 1px solid #cbd4df;
    border-radius: 6px;
    background: #fff;
    color: #344457;
    cursor: pointer;
    font-weight: 700;
}

.kg-photo-action:hover {
    background: #f2f5f8;
}

.kg-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e5eb;
}

.kg-accessories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kg-accessory {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    background: #f3f6f9;
    border: 1px solid #d7dfe8;
    border-radius: 8px;
}

.kg-accessory label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #273547;
}

.kg-accessory-delete {
    border: 0;
    background: transparent;
    color: #9a4d4d;
    font-size: 18px;
    cursor: pointer;
}

.kg-no-accessories {
    color: #7a8795;
    font-style: italic;
}

.kg-add-accessory {
    margin-top: 11px;
    border: 0;
    background: transparent;
    color: #1769aa;
    font-weight: 800;
    cursor: pointer;
}

.kg-reasoning {
    padding: 12px 14px;
    background: #f7f9fb;
    border-radius: 8px;
    color: #536173;
    line-height: 1.5;
}

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

.kg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none !important;
    border: 1px solid transparent;
}

.kg-button.primary {
    background: #1769aa !important;
    color: #fff !important;
}

.kg-button.primary:hover {
    background: #125788 !important;
}

.kg-button.secondary {
    background: #fff !important;
    border-color: #cbd4df !important;
    color: #344457 !important;
}

.kg-button.secondary:hover {
    background: #f2f5f8 !important;
}

.kg-button.large {
    min-height: 48px;
    padding: 0 21px;
}

.kg-unassigned {
    border-color: #e0c7a3;
}

.kg-final-bar {
    position: sticky;
    bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding: 17px 20px;
    background: rgba(255,255,255,.97);
    border: 1px solid #ccd6e1;
    border-radius: 13px;
    box-shadow: 0 5px 22px rgba(20,30,45,.14);
}

.kg-final-bar div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kg-final-bar span {
    color: #687587;
    font-size: 13px;
}

.kg-empty {
    padding: 50px;
    text-align: center;
    background: #fff;
    border: 1px solid #d5dde7;
    border-radius: 14px;
}

.kg-empty h2 {
    color: #17212f;
}

.kg-empty p {
    color: #697687;
    margin-bottom: 20px;
}

.kg-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15,25,38,.48);
}

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

.kg-modal-inner {
    width: min(520px, 100%);
    padding: 22px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 15px 50px rgba(0,0,0,.22);
}

.kg-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kg-modal-header h2 {
    margin: 0;
    color: #17212f;
}

.kg-modal-header button {
    border: 0;
    background: transparent;
    color: #5b6878;
    font-size: 28px;
    cursor: pointer;
}

.kg-move-groups {
    display: grid;
    gap: 8px;
    margin: 20px 0;
}

.kg-move-groups button {
    padding: 12px;
    text-align: left;
    border: 1px solid #d0d8e2;
    border-radius: 8px;
    background: #f8fafc;
    color: #263548;
    font-weight: 700;
    cursor: pointer;
}

.kg-move-groups button:hover {
    background: #edf3f8;
}

@media (max-width: 700px) {

    .kg-page {
        padding: 18px 12px 60px;
    }

    .kg-header,
    .kg-final-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .kg-group-header {
        flex-direction: column;
    }

    .kg-group-confidence {
        text-align: left;
    }

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

    .kg-photo-image,
    .kg-photo-image img {
        height: 150px !important;
    }

    .kg-group-actions {
        flex-direction: column;
    }

    .kg-button {
        width: 100%;
    }
}