/* Datei: /public/css/admin.css */
/* Setzt theme.css voraus (--ct-* Variablen). 1:1 aus SCCs bewährtem
   Admin-Look portiert (reset/typography/layout/scc-layout/buttons/forms/
   cards/tables/badges/alerts/utilities), nur --dst- zu --ct- umbenannt. */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700;900&display=swap');

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; }

/* Typography */
body {
    background: var(--ct-bg);
    color: var(--ct-text);
    font-family: var(--ct-font);
    font-size: 14px;
    line-height: 1.45;
}
h1, h2, h3 { margin-top: 0; line-height: 1.15; }
h1 { font-size: 26px; font-weight: 700; margin-bottom: 16px; }
h2 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
p { margin: 0 0 8px; }
a { color: var(--ct-primary); text-decoration: none; }
a:hover { color: var(--ct-primary-hover); }

/* Layout */
.admin-page { max-width: 1200px; margin: 0 auto; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Zwei Varianten für Formular-Seiten, auf denen Speichern IMMER rechts stehen soll (mit
   Abbrechen direkt links davon), egal ob oben oder unten auf der Seite:
   --split: linke Gruppe (z.B. "Übersicht") und rechte Aktionsgruppe (Abbrechen+Speichern) an
            den jeweiligen Rand der Zeile - für die Aktionsleiste ganz oben.
   --end:   die ganze Gruppe (Abbrechen+Speichern) an den rechten Rand - für die Aktionsleiste
            unten, wo sonst nichts anderes in der Zeile steht. */
.admin-actions--split { justify-content: space-between; align-items: center; }
.admin-actions--end { justify-content: flex-end; }

/* Shell (Sidebar + Main) */
.scc-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.scc-sidebar {
    position: sticky; top: 0; height: 100vh; background: var(--ct-bg-soft);
    border-right: 1px solid var(--ct-border); padding: 24px; display: flex; flex-direction: column;
}
.scc-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.scc-brand-icon {
    width: 44px; height: 44px; border-radius: var(--ct-radius-md);
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.scc-brand strong { display: block; font-size: 22px; line-height: 1; }
.scc-brand span { display: block; color: var(--ct-text-muted); font-size: 13px; }
.scc-nav { display: flex; flex-direction: column; gap: 8px; }
.scc-nav a {
    display: flex; align-items: center; gap: 10px; color: var(--ct-text-muted);
    padding: 6px 14px; border-radius: var(--ct-radius-md); text-decoration: none; font-weight: 300;
}
.scc-nav a:hover, .scc-nav a.is-active { background: var(--ct-bg-card); color: var(--ct-primary); }
.scc-nav-heading { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ct-text-muted); margin: 14px 14px 4px; }
.scc-main { padding: 22px; }
.scc-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.scc-topbar h1 { margin-bottom: 6px; }
.scc-topbar p { color: var(--ct-text-muted); margin: 0; }

.ct-user-menu { position: relative; }
.ct-user-menu-trigger {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
    background: var(--ct-bg-card); border: 1px solid var(--ct-border); color: var(--ct-text);
    font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s ease;
}
.ct-user-menu-trigger:hover { border-color: var(--ct-primary); }
.ct-user-menu-trigger i.fa-chevron-down { font-size: 10px; color: var(--ct-text-muted); }

.ct-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ct-user-avatar--fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--ct-badge-bg); color: var(--ct-text-muted); font-size: 12px; }

.ct-user-dropdown {
    display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; z-index: 20;
    background: var(--ct-bg-card); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md);
    box-shadow: var(--ct-shadow); padding: 6px;
}
.ct-user-dropdown.is-open { display: block; }
.ct-user-dropdown a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
    color: var(--ct-text); font-size: 13px; text-decoration: none;
}
.ct-user-dropdown a:hover { background: var(--ct-bg-soft); color: var(--ct-primary); }
.ct-user-dropdown a i { width: 16px; color: var(--ct-text-muted); }
.ct-user-dropdown-divider { height: 1px; background: var(--ct-border-soft); margin: 6px 4px; }
.scc-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.scc-module-card { background: var(--ct-bg-card); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); padding: 22px; box-shadow: var(--ct-shadow); }
.scc-module-card i { font-size: 28px; color: var(--ct-primary); margin-right: 14px; float: left; }
.scc-module-card h2 { margin-bottom: 6px; }
.scc-module-card p { color: var(--ct-text-muted); }

.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.admin-stat-tile {
    display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ct-text);
    padding: 8px 0;
}
.admin-stat-tile i { font-size: 26px; color: var(--ct-primary); width: 32px; text-align: center; }
.admin-stat-tile strong { display: block; font-size: 28px; font-weight: 700; line-height: 1.1; }
.admin-stat-tile span { display: block; color: var(--ct-text-muted); font-size: 13px; margin-top: 2px; }
a.admin-stat-tile:hover strong { color: var(--ct-primary); }

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

    .scc-sidebar {
        position: relative; height: auto; flex-direction: row; align-items: center;
        flex-wrap: wrap; padding: 12px 16px; gap: 12px 20px;
    }
    .scc-brand { margin-bottom: 0; }
    .scc-brand span { display: none; } /* Untertitel raubt auf schmalen Screens nur Platz */
    .scc-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .scc-nav a { padding: 6px 10px; font-size: 13px; }
    .scc-nav-heading { display: none; }

    .scc-main { padding: 16px; }
    .scc-topbar { flex-wrap: wrap; gap: 12px; }
    .scc-topbar h1 { font-size: 20px; }
}

@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .ct-form-actions { flex-direction: column; align-items: stretch; }
    .ct-form-actions .btn, .ct-form-actions button { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .admin-stat-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .ct-user-menu-trigger span { display: none; } /* nur Avatar+Pfeil, Name raubt sonst zu viel Platz */
    .scc-module-grid { grid-template-columns: 1fr; }
    .ct-connection-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ct-connection-row__action { width: 100%; justify-content: space-between; }
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 6px; background: var(--ct-primary); color: var(--ct-black);
    padding: 7px 12px; border-radius: var(--ct-radius-sm); border: 0; cursor: pointer; text-decoration: none;
    font-weight: 600; font-size: 13px; line-height: 1;
}
.btn:hover { background: var(--ct-primary-hover); color: var(--ct-black); }
.btn-secondary { background: var(--ct-bg-card); color: var(--ct-text); border: 1px solid var(--ct-border); }
.btn-secondary:hover { background: var(--ct-bg-card-hover); color: var(--ct-text); }
.btn-danger { background: var(--ct-danger); color: var(--ct-white); }
.btn-danger:hover { background: var(--ct-danger-hover); color: var(--ct-white); }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-toggle-row { display: flex; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; }
.ct-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; }
.ct-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ct-toggle-track {
    position: absolute; inset: 0; background: var(--ct-border); border-radius: 999px;
    transition: background 0.15s ease;
    /* .ct-toggle-track liegt optisch ÜBER dem (unsichtbaren) Checkbox-Input - ohne eigenen
       cursor:pointer zeigt die Maus hier trotz cursor:pointer auf Input/Label den normalen Pfeil,
       weil sie tatsächlich über diesem Element schwebt, nicht über dem Input selbst. */
    cursor: pointer;
}
.ct-toggle-track::before {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    background: var(--ct-white); border-radius: 50%; transition: transform 0.15s ease;
}
.ct-toggle input:checked + .ct-toggle-track { background: var(--ct-primary); }
.ct-toggle input:checked + .ct-toggle-track::before { transform: translateX(18px); }
.ct-toggle input:focus-visible + .ct-toggle-track { outline: 2px solid var(--ct-primary); outline-offset: 2px; }
.ct-toggle input:disabled { cursor: default; }
.ct-toggle:has(input:disabled) { cursor: default; }
.ct-toggle:has(input:disabled) .ct-toggle-track { cursor: default; }
.ct-toggle-row:has(input:disabled) { cursor: default; }
.form-section { margin-bottom: 18px; }
label { display: block; font-weight: 400; margin-bottom: 4px; font-size: 13px; }
input, select, textarea {
    width: 100%; background: var(--ct-bg-soft); color: var(--ct-text); border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-sm); padding: 7px 10px; font-size: 13px;
}
input[type="checkbox"] { width: auto; margin-right: 8px; }

/* Cards */
.card, .box { background: var(--ct-bg-card); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); padding: 16px; box-shadow: var(--ct-shadow); margin-bottom: 14px; }
.card-title { margin-bottom: 6px; }
.card-meta, .meta { color: var(--ct-text-muted); font-size: 12px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px; border-bottom: 1px solid var(--ct-border); text-align: left; }
.table th { color: var(--ct-text-muted); font-weight: 600; }

/* Badges */
.badge, .status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ct-badge-bg); color: var(--ct-text); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.status.is-on { background: rgba(74, 222, 128, .12); color: var(--ct-success); border: 1px solid rgba(74, 222, 128, .3); }
.status.is-off { background: rgba(255, 255, 255, .06); color: var(--ct-text-muted); border: 1px solid var(--ct-border-soft); }

/* Alerts */
.alert { padding: 12px 14px; border-radius: var(--ct-radius-md); margin-bottom: 18px; }
.alert-success { background: var(--ct-success-bg); color: var(--ct-success); border: 1px solid var(--ct-success-border); }
.alert-danger { background: var(--ct-danger-bg); color: var(--ct-danger); border: 1px solid var(--ct-danger-border); }
.alert-warning { background: var(--ct-warning-bg); color: var(--ct-warning); border: 1px solid var(--ct-warning-border); }
.alert-info { background: var(--ct-info-bg); color: var(--ct-info); border: 1px solid var(--ct-info-border); }

/* Utilities */
.text-muted { color: var(--ct-text-muted); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mt-2 { margin-top: 16px; }
.flex { display: flex; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }

/* ToDo-/Devlog-Karten - als Kachel-Raster, nicht als lange Liste */
.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.todo-card { border: 1px solid var(--ct-border-soft); border-radius: var(--ct-radius-md); background: rgba(255,255,255,.04); padding: 12px; }
.todo-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.todo-card__head input { font-size: 14px; font-weight: 500; padding: 4px 6px; }
.todo-card__badges { display: flex; gap: 4px; flex-wrap: wrap; }
.todo-badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--ct-badge-bg); border: 1px solid var(--ct-border-soft); color: var(--ct-text-muted); }
.todo-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.todo-card textarea { font-size: 12px; }
.todo-card__saved { color: var(--ct-success); font-size: 12px; font-weight: 600; }

.ct-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 22px; border-top: 1px solid var(--ct-border-soft);
    font-size: 12px; color: var(--ct-text-muted);
}
.ct-footer a { color: var(--ct-text-muted); text-decoration: none; }
.ct-footer a:hover { color: var(--ct-primary); }

.ct-filter-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
    background: var(--ct-bg-card); border: 1px solid var(--ct-border); font-size: 13px; cursor: pointer;
    text-transform: capitalize;
}
.ct-filter-chip:has(input:checked) { border-color: var(--ct-primary); background: rgba(168, 216, 11, 0.08); color: var(--ct-primary); }
.ct-filter-chip input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Öffentliche Rechtsseiten (Datenschutz/Nutzungsbedingungen) */
body.ct-legal-body { background: var(--ct-bg); }
.legal-page { max-width: 780px; margin: 40px auto; padding: 0 20px 60px; line-height: 1.65; }
.legal-page h1 { margin-bottom: 4px; }
.legal-page h2 { margin-top: 36px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.legal-page table th, .legal-page table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ct-border); vertical-align: top; }
.legal-page .updated { color: var(--ct-text-muted); font-size: 0.9em; margin-bottom: 24px; }
.legal-page a { color: var(--ct-primary); }
.legal-page__back { display: inline-block; margin-bottom: 20px; color: var(--ct-text-muted) !important; font-size: 13px; }
.legal-page__back:hover { color: var(--ct-primary) !important; }
.legal-page__table-scroll { overflow-x: auto; margin: 12px 0; }
.legal-page__table-scroll table { margin: 0; min-width: 520px; }

/* Login-Methoden auf profile.php - bewusst als kompakte Liste statt großer Kacheln
   (die .ct-plan-card-Kacheln gehören der Preisübersicht auf login.php und sind dafür
   bewusst prominent - auf dem Profil sollen die verknüpften Accounts NICHT das Hauptthema
   der Seite dominieren). */
.ct-connections-list { display: flex; flex-direction: column; }
.ct-connection-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--ct-border-soft);
}
.ct-connection-row:last-child { border-bottom: 0; }
.ct-connection-row__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ct-connection-row__info i { font-size: 17px; width: 20px; text-align: center; color: var(--ct-text-muted); flex-shrink: 0; }
.ct-connection-row__info strong { font-size: 13.5px; font-weight: 600; }
.ct-connection-row__action { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ct-connection-row__action form { margin: 0; }
.ct-connection-row__date { white-space: nowrap; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Kleines, dezentes Label direkt neben einer Login-Methode (z.B. "Hauptkonto") -
   bewusst unauffälliger als .badge/.status, die auf profile.php mehr Gewicht als nötig hätten. */
.ct-mini-badge {
    display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 7px;
    border-radius: 999px; background: var(--ct-badge-bg); border: 1px solid var(--ct-border-soft);
    color: var(--ct-text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase;
    vertical-align: middle;
}

/* Account-Zusammenführung/-Trennung (profile.php, connections/split.php) */
.ct-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ct-form-actions form { margin: 0; }
.ct-radio-row { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-bottom: 0; }
.ct-radio-row input[type="radio"] { width: auto; }
.ct-table-scroll { overflow-x: auto; margin: 12px 0; }
.ct-table-scroll table { min-width: 480px; }
/* Nur ein schmaler Hinweistext statt eigener Karte/Box - soll nicht mehr auffallen als nötig. */
.ct-connections-footnote { margin: 14px 0 0; font-size: 12.5px; }
.ct-connections-footnote a { color: var(--ct-text-muted); text-decoration: underline; }
.ct-connections-footnote a:hover { color: var(--ct-primary); }

/* Profilbild-Karte (profile.php) - Vorschaubild + kleine Icon-Buttons (Von Plattform übernehmen)
   links, Upload-Feld rechts daneben. Bisher ohne jede Regel hier ausgeliefert -> lief
   unstyled/roh im Browser-Standardfluss. */
.ct-account-edit-row { display: flex; align-items: flex-start; gap: 16px; }
.ct-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.ct-avatar-preview {
    width: 64px; height: 64px; border-radius: var(--ct-radius-md); object-fit: cover;
    border: 1px solid var(--ct-border); background: var(--ct-bg-soft);
}
.ct-account-edit-row__body { flex: 1; min-width: 0; padding-top: 2px; }
/* Icon-only Buttons statt "Von Twitch/Google/Facebook übernehmen"-Textbuttons - Icon reicht,
   spart Platz. */
.ct-avatar-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ct-avatar-actions__form { margin: 0; }
.btn-icon { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.ct-avatar-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ct-avatar-upload-form input[type="file"] { width: auto; flex: 1; min-width: 180px; }

/* Zwei Formularfelder nebeneinander (Stammdaten: Vorname/Nachname, PLZ/Stadt) - bricht auf
   Mobile untereinander um. */
.ct-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ct-field-row > div { flex: 1; min-width: 140px; }

/* Persistente Stammdaten-Warnung (topbar.php) - erscheint auf jeder Seite, bis Vorname/
   Nachname/Adresse vollständig sind. */
.ct-stammdaten-banner { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.ct-stammdaten-banner a { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* Stammdaten (2/3) links, Profilbild + Passwort (1/3) rechts übereinander gestapelt - alle drei
   Karten sind kurz genug, dass sie nicht die ganze Breite brauchen. */
.ct-profile-columns { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.ct-profile-columns > .card { margin-bottom: 0; }
.ct-profile-columns__side { display: flex; flex-direction: column; gap: 14px; }
.ct-profile-columns__side > .card { margin-bottom: 0; }
@media (max-width: 800px) {
    .ct-profile-columns { grid-template-columns: 1fr; }
}

/*
 * Bestätigungs-Modal (public/js/ct-modal.js) - für ALLE "bist Du sicher?"-Fragen im Projekt,
 * nicht nur Account-Merge/Split. Ersetzt Browser-confirm() (zu unauffällig) und normale
 * Inline-Karten (fallen zwischen anderen Karten nicht auf genug auf).
 */
.ct-modal-backdrop {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(6, 6, 10, .72); backdrop-filter: blur(2px);
    align-items: center; justify-content: center; padding: 20px;
}
.ct-modal-backdrop.is-open,
.ct-modal-backdrop[data-autoopen="1"] { display: flex; }
.ct-modal {
    width: 100%; max-width: 460px; background: var(--ct-bg-card); border: 1px solid var(--ct-border);
    border-top-width: 4px; border-radius: var(--ct-radius-lg); padding: 26px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
    animation: ct-modal-in .15s ease-out;
}
.ct-modal--warning { border-top-color: var(--ct-warning); }
.ct-modal--danger { border-top-color: var(--ct-danger); }
.ct-modal-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 19px; }
.ct-modal--warning .ct-modal-title { color: var(--ct-warning); }
.ct-modal--danger .ct-modal-title { color: var(--ct-danger); }
.ct-modal-text, .ct-modal p { color: var(--ct-text); }
.ct-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ct-modal-actions form { margin: 0; }
@keyframes ct-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
    .ct-modal { padding: 20px; }
    .ct-modal-actions { flex-direction: column; align-items: stretch; }
    .ct-modal-actions .btn, .ct-modal-actions button { width: 100%; justify-content: center; }
}

/* Icon-Picker (ct-icon-picker.js) - 1:1 aus SCC portiert (assets/css/scc-components.css),
   nur --dst- zu --ct- umbenannt. Für JEDES Modul mit FontAwesome-Icon-Feld nutzbar. */
.icon-picker { position: relative; }
.icon-picker__trigger {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
    border: 1px solid var(--ct-border-soft); border-radius: var(--ct-radius-md);
    background: rgba(255, 255, 255, .03); color: inherit; cursor: pointer; text-align: left; font: inherit;
}
.icon-picker__trigger:hover { border-color: var(--ct-primary); }
.icon-picker__trigger i { width: 20px; text-align: center; font-size: 16px; }
.icon-picker__panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    background: var(--ct-bg-panel, var(--ct-bg-card)); border: 1px solid var(--ct-border-soft);
    border-radius: var(--ct-radius-md); padding: 10px; box-shadow: var(--ct-shadow);
}
.icon-picker__search { width: 100%; margin-bottom: 8px; }
.icon-picker__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px;
    max-height: 240px; overflow-y: auto;
}
.icon-picker__item {
    display: flex; align-items: center; justify-content: center; height: 38px;
    border: 1px solid transparent; border-radius: 8px; background: rgba(255, 255, 255, .03);
    cursor: pointer; font-size: 15px; color: inherit;
}
.icon-picker__item:hover { border-color: var(--ct-primary); background: rgba(255, 255, 255, .08); }
.icon-picker__empty { grid-column: 1 / -1; padding: 10px; text-align: center; color: var(--ct-text-muted); font-size: 13px; }

/* Tag-Eingabe (ct-tag-input.js) - Chips statt Freitext-Kommaliste. Für JEDES Formularfeld
   nutzbar, das eine kurze Liste von Schlagwörtern braucht (aktuell: Twitch-Tags bei den
   Presets). */
.ct-tag-input__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ct-tag-input__chips:empty { margin-bottom: 0; }
.ct-tag-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
    border-radius: 999px; background: var(--ct-badge-bg); color: var(--ct-text); font-size: 13px;
}
.ct-tag-chip__remove {
    display: flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, .1); color: inherit;
    cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
}
.ct-tag-chip__remove:hover { background: var(--ct-danger-bg); color: var(--ct-danger); }
.ct-tag-input__row { display: flex; gap: 8px; }
.ct-tag-input__row input[type="text"] { flex: 1; min-width: 0; }
.ct-tag-input small { display: block; margin-top: 4px; color: var(--ct-text-muted); font-size: 12px; }

/* Farb-Karte (ct-color-picker.js) - einzelnes Farbfeld, öffnet den Picker-Modal-Dialog.
   Auch als kompakte Palette nutzbar (siehe .ct-palette-picker weiter unten), 1:1 aus
   SCCs .theme-color-card portiert. */
.theme-color-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.theme-color-card {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--ct-radius-lg);
    border: 1px solid var(--ct-border-soft); background: rgba(255, 255, 255, .045);
    cursor: pointer; transition: 160ms ease;
}
.theme-color-card:hover { border-color: color-mix(in srgb, var(--ct-primary) 58%, transparent); background: color-mix(in srgb, var(--ct-primary) 8%, transparent); }
.theme-color-card__swatch {
    width: 48px; height: 48px; border-radius: var(--ct-radius-md); border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); flex: 0 0 48px;
}
.theme-color-card__meta { min-width: 0; }
.theme-color-card__meta strong { display: block; font-size: 15px; line-height: 1.1; color: var(--ct-text); }
.theme-color-card__meta span {
    display: block; margin-top: 5px; font-size: 12px; color: var(--ct-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}

/* Farbwähler-Modal (ct-color-picker.js) - ein einziges, geteiltes Modal für die ganze
   Seite, öffnet sich für die zuletzt angeklickte .theme-color-card. */
.ct-color-picker-modal { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .62); align-items: center; justify-content: center; padding: 24px; }
.ct-color-picker-modal.is-open { display: flex; }
.ct-color-picker-dialog {
    width: min(760px, 96vw); background: linear-gradient(135deg, rgba(90, 90, 90, 1), rgba(62, 62, 62, 1));
    border-radius: var(--ct-radius-lg); border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .65); color: var(--ct-white); overflow: hidden;
}
.ct-color-picker-title { height: 34px; display: flex; align-items: center; gap: 8px; justify-content: center; background: rgba(216, 216, 216, 1); color: rgba(51, 51, 51, 1); font-size: 14px; }
.ct-color-picker-body { display: grid; grid-template-columns: 256px 22px 72px 1fr; gap: 16px; padding: 34px 16px 18px; }
.ct-color-area-wrap, .ct-color-hue-wrap { position: relative; }
.ct-color-area-cursor {
    position: absolute; width: 12px; height: 12px; border: 2px solid var(--ct-white); border-radius: 50%;
    box-shadow: 0 0 0 1px var(--ct-black); transform: translate(-50%, -50%); pointer-events: none;
}
.ct-color-hue-cursor {
    position: absolute; left: -5px; width: 32px; height: 0; border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; border-left: 8px solid var(--ct-white);
    filter: drop-shadow(0 0 1px var(--ct-black)); transform: translateY(-6px); pointer-events: none;
}
.ct-color-preview-column { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; }
.ct-color-preview-new, .ct-color-preview-current { width: 54px; height: 42px; border: 1px solid rgba(0, 0, 0, .7); }
.ct-color-fields { display: flex; flex-direction: column; gap: 14px; }
.ct-color-buttons { display: flex; flex-direction: column; gap: 8px; }
.ct-color-buttons button {
    height: 32px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .10); color: var(--ct-white); cursor: pointer;
    font-weight: 700; font-family: var(--ct-font);
}
.ct-color-buttons button:hover { background: rgba(255, 255, 255, .18); }
.ct-color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; margin-top: 8px; }
.ct-color-grid label, .ct-color-hex { display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: 13px; }
.ct-color-grid input, .ct-color-hex input {
    width: 54px; height: 24px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .25);
    color: var(--ct-white); padding: 0 5px; box-sizing: border-box;
}
.ct-color-hex { justify-content: flex-start; margin-left: 6px; }
.ct-color-hex input { width: 92px; }
.ct-color-rgba-output { font-size: 12px; opacity: .8; word-break: break-all; }

/* Font-Picker (ct-font-picker.js) - eigenständig entwickelt (kein Google-Fonts-API-Key
   in CUBETOOL vorhanden, siehe Kommentar im JS), Optik an .icon-picker angelehnt. */
.font-picker { position: relative; }
.font-picker__trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 10px 14px; border: 1px solid var(--ct-border-soft); border-radius: var(--ct-radius-md);
    background: rgba(255, 255, 255, .03); color: inherit; cursor: pointer; text-align: left; font: inherit;
}
.font-picker__trigger:hover { border-color: var(--ct-primary); }
.font-picker__panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    background: var(--ct-bg-card); border: 1px solid var(--ct-border-soft);
    border-radius: var(--ct-radius-md); padding: 10px; box-shadow: var(--ct-shadow);
}
.font-picker__search { width: 100%; margin-bottom: 8px; }
.font-picker__list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.font-picker__item {
    text-align: left; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px;
    background: rgba(255, 255, 255, .03); cursor: pointer; font-size: 16px; color: inherit;
}
.font-picker__item:hover { border-color: var(--ct-primary); background: rgba(255, 255, 255, .08); }
.font-picker__empty { padding: 10px; text-align: center; color: var(--ct-text-muted); font-size: 13px; }
.font-picker__item--custom {
    display: flex; align-items: center; gap: 8px; color: var(--ct-primary);
    border-color: color-mix(in srgb, var(--ct-primary) 40%, transparent);
    background: color-mix(in srgb, var(--ct-primary) 8%, transparent);
    font-size: 13px !important; font-family: inherit !important;
}
.font-picker__item--custom:hover { background: color-mix(in srgb, var(--ct-primary) 16%, transparent); }
.ct-font-preview {
    margin-top: 8px; padding: 14px; border: 1px solid var(--ct-border-soft); border-radius: var(--ct-radius-md);
    background: rgba(255, 255, 255, .03); font-size: 18px; color: var(--ct-text);
}

/* Gruppierte Eigenschaften als Kacheln - ursprünglich für den Design-Editor entstanden (eine
   Kachel pro Gruppe wie Schriften/Farben/Hintergründe statt alles nur mit einer h3 getrennt
   untereinander), mittlerweile das allgemeine Muster für jede Seite, auf der zusammengehörige
   Formularfelder auf einen Blick erkennbar gruppiert werden sollen (z.B. auch presets.php).
   Jede Kachel ist ganz normal .card (kein eigens erfundener Rahmen/Hintergrund) - .tile-card
   ergänzt nur noch die Icon+Titel-Zeile, den Look liefert .card wie überall sonst. Bewusst kein
   normales Grid (das lässt jede Zeile so hoch werden wie ihre höchste Kachel - eine kurze Kachel
   reißt darunter eine Lücke auf, obwohl in der Nachbarspalte noch Platz wäre). Stattdessen ein
   Mehrspalten-Layout: die Kacheln fließen wie bei einer Pinnwand direkt hintereinander in die
   jeweils nächste freie Spalte - kurze Kacheln lassen keine Lücke, die nächste Kachel rückt
   einfach nach. */
.tile-grid {
    columns: 340px;
    column-gap: 18px;
}

.tile-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 18px;
}

.tile-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 15px;
}

.tile-card h3 i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    color: var(--ct-primary);
    background: color-mix(in srgb, var(--ct-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ct-primary) 40%, transparent);
    font-size: 13px;
}

.tile-card .form-grid,
.tile-card .theme-color-card-grid {
    margin: 0;
}

/* Variante für eine feste Anzahl gleich kurzer Gruppen (z.B. Allgemein/Twitch/Sonstiges beim
   Preset-Formular): statt der Pinnwand mit einzelnen .card-Kacheln stehen die Gruppen in einem
   echten 3er-Grid nebeneinander, nur durch eine dünne Trennlinie statt eigenem Rahmen/Hintergrund
   abgesetzt - wirkt bei wenigen, ähnlich kurzen Gruppen aufgeräumter als drei separate Kacheln. */
.tile-grid--thirds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 20px;
}

.tile-card--plain {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    break-inside: auto;
}

.tile-grid--thirds .tile-card--plain:not(:first-child) {
    border-left: 1px solid var(--ct-border-soft);
    padding-left: 28px;
}

@media (max-width: 780px) {
    .tile-grid--thirds {
        grid-template-columns: 1fr;
    }

    .tile-grid--thirds .tile-card--plain:not(:first-child) {
        border-left: none;
        padding-left: 0;
        padding-top: 20px;
        border-top: 1px solid var(--ct-border-soft);
    }
}

/* Gruppen mit gemischtem Inhalt (z.B. "Rahmen, Ecken & Schatten"): Farbfelder bleiben über die
   volle Kartenbreite (eine Spalte statt sich mit Text-Feldern ein Grid zu teilen - dafür sind sie
   zu breit angelegt), die restlichen Text-/Zahlenfelder (z.B. Eckenrundung) stehen zu dritt
   nebeneinander, damit sie nicht unnötig viel Platz beanspruchen. */
.theme-color-card-grid--full {
    grid-template-columns: 1fr;
}

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

/* In den schmalen Drittel-Spalten kann ein Label mal zweizeilig umbrechen (z.B.
   "Eckenrundung mittel" neben "Eckenrundung klein"), während die Nachbarn einzeilig bleiben -
   ohne feste Mindesthöhe rutscht dann nur dieses eine Eingabefeld tiefer und die Felder stehen
   nicht mehr auf einer Höhe. Feste Mindesthöhe für zwei Zeilen reserviert den Platz immer,
   Text unten ausgerichtet, damit die Eingabefelder darunter garantiert bündig starten. */
.form-grid--thirds label {
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
}

@media (max-width: 640px) {
    .form-grid--thirds { grid-template-columns: 1fr; }
    .form-grid--thirds label { min-height: 0; display: block; }
}

/* Je Schriftrolle (Body/Headline/Mono) ein Block - Schriftart, Vorschau und Schriftgröße bleiben
   sichtbar zusammen (siehe edit-design.php), statt wie vorher in getrennten Listen quer über den
   Grid-Zeilenumbruch verteilt zu sein. Kein eigener Rahmen (dieselbe Lektion wie bei den
   Gruppen-Kacheln) - nur ein dezenter Trenner zur nächsten Rolle. Bewusst IMMER eine Spalte
   (kein Nebeneinander mehrerer Rollen): die Hinweistexte sind unterschiedlich lang und würden bei
   mehreren Spalten je nach Zeilenumbruch unterschiedlich hoch werden - Font-Picker/Größe/Gewicht
   der Rollen stünden dann nicht mehr auf gleicher Höhe. */
.font-role-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.font-role-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--ct-border-soft);
}

.font-role-block:first-child {
    padding-top: 0;
    border-top: none;
}

.font-role-block__title {
    font-size: 13px;
    color: var(--ct-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.font-role-block__hint {
    display: block;
    margin-top: -4px;
    font-size: 12px;
}

.font-role-block .ct-font-preview {
    margin-top: 0;
}

/* Schriftgewicht je Rolle als 4 Buttons statt einer Zahl im Textfeld - jeder Button zeigt sein
   eigenes Gewicht direkt in der Schriftstärke des Labels, damit auch ohne Fachwissen sofort
   erkennbar ist, was "Light"/"Regular"/"Bold"/"Black" bedeutet (siehe edit-design.php). */
.font-weight-group { display: flex; flex-wrap: wrap; gap: 6px; }
.font-weight-group__option {
    flex: 1 1 auto; min-width: 64px; padding: 8px 10px; border-radius: var(--ct-radius-sm);
    border: 1px solid var(--ct-border-soft); background: rgba(255, 255, 255, .03);
    color: var(--ct-text-muted); cursor: pointer; font-size: 13px; text-align: center;
    transition: 140ms ease;
}
.font-weight-group__option:hover { border-color: var(--ct-primary); color: var(--ct-text); }
.font-weight-group__option.is-active {
    border-color: var(--ct-primary); color: var(--ct-primary);
    background: color-mix(in srgb, var(--ct-primary) 14%, transparent);
}