/**
 * DJTK – Stylesheet
 * Version: 4.2.26
 * Stand:   14. August 2026
 */

/* 1) Tabellen-Grundlayout */
.djtk-table {
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-family: inherit;
    font-size: 0.82rem;
    color: #fff;
}
.djtk-table th,
.djtk-table td {
    padding: 6px 10px;
    border: 1px solid #747678;
    vertical-align: middle;
}
/* Live/Default: Spalte 1 (Datum/Zeit) ohne Umbruch */
.djtk-table:not(.djtk-arch) thead th:nth-child(2),
.djtk-table:not(.djtk-arch) tbody td:nth-child(2) {
    white-space: nowrap;
    width: 1%;
}

/* Archiv: Spalte 2 (Datum) ohne Umbruch */
.djtk-table.djtk-arch thead th:nth-child(2),
.djtk-table.djtk-arch tbody td:nth-child(2) {
    white-space: nowrap;
}
/* Archiv: Spalte 3 (Name) ohne Umbruch – (deine Vorgabe beibehalten) */
.djtk-table.djtk-arch thead th:nth-child(3),
.djtk-table.djtk-arch tbody td:nth-child(3) {
    white-space: nowrap;
}
.djtk-table thead th {
    background: #2b2e33;
    color: #fff;
    font-weight: 600;
}
.djtk-table tbody tr:nth-child(even) { background: #3a3d42; }
.djtk-table tbody tr:nth-child(odd)  { background: #2f3237; }
.djtk-table td:last-child { text-align: center; }

.djtk-table.djtk-arch thead th:nth-child(6),
.djtk-table.djtk-arch tbody td:nth-child(6) {
    width: 64px;
    min-width: 64px;
    text-align: center;
}

.djtk-arch-meta-cell {
    position: relative;
    overflow: visible;
}

.djtk-arch-meta-trigger {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    cursor: default;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.djtk-arch-meta-cell:hover .djtk-arch-meta-trigger,
.djtk-arch-meta-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    outline: none;
}

.djtk-arch-meta-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    z-index: 20;
    min-width: 190px;
    max-width: 240px;
    padding: 10px 12px;
    display: grid;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(18, 21, 28, 0.96);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
    transform: translateY(-50%) translateX(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.djtk-arch-meta-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 12px;
    height: 12px;
    background: rgba(18, 21, 28, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    transform: translateY(-50%) rotate(45deg);
}

.djtk-arch-meta-cell:hover .djtk-arch-meta-tooltip,
.djtk-arch-meta-cell:focus-within .djtk-arch-meta-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.djtk-arch-meta-tooltip strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.djtk-live-meta-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.djtk-live-meta-anchor {
    display: inline-block;
    max-width: 100%;
}

.djtk-live-meta-tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    z-index: 20;
    min-width: 190px;
    max-width: min(240px, calc(100vw - 40px));
    padding: 10px 12px;
    display: grid;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(18, 21, 28, 0.96);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
    transform: translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.djtk-live-meta-tooltip::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: rgba(18, 21, 28, 0.96);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
}

.djtk-live-meta-wrap:hover .djtk-live-meta-tooltip,
.djtk-live-meta-wrap:focus-within .djtk-live-meta-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.djtk-live-meta-tooltip strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.djtk-live-topbar {
    display: grid;
    grid-template-columns: minmax(190px, 280px) minmax(320px, 760px) minmax(190px, 280px);
    align-items: start;
    justify-content: center;
    gap: 18px;
    margin: 0 auto 1rem;
}

.djtk-live-topbar-side {
    min-height: 94px;
    display: flex;
    align-items: flex-start;
}

.djtk-live-topbar-side-right {
    justify-content: flex-end;
}

.djtk-live-head-block {
    min-width: 0;
}

.djtk-live-title {
    margin: 0 0 0.85rem;
    text-align: center;
}

.djtk-live-search-wrap {
    display: flex;
    justify-content: center;
}

.djtk-live-search {
    width: min(100%, 420px);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #111;
    /* Keep iOS from zooming the entire live view when the search receives focus. */
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
}

.djtk-live-search::placeholder {
    color: rgba(17, 17, 17, 0.52);
}

.djtk-live-clock {
    width: fit-content;
    min-width: 236px;
    max-width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(38, 42, 49, 0.96), rgba(22, 25, 32, 0.98));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
    text-align: center;
}

.djtk-live-clock-time {
    display: block;
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.djtk-live-song-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
}

.djtk-live-dupe-badge {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.djtk-live-has-duplicates .djtk-live-dupe-badge {
    background: rgba(255, 255, 255, 0.18);
}

.djtk-pin-head,
.djtk-pin-cell {
    width: 30px;
    min-width: 30px;
    text-align: center;
}

.djtk-pin-cell {
    padding-inline: 4px;
}

.djtk-pinned-row td:first-child {
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.85);
}

.djtk-action-cell {
    white-space: nowrap;
}

.djtk-live-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.djtk-copy-request-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.djtk-copy-request-btn svg {
    width: 17px;
    height: 17px;
    display: block;
}

.djtk-copy-request-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.17);
    border-color: rgba(255, 255, 255, 0.7);
}

.djtk-copy-request-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.djtk-copy-request-btn.is-copied {
    background: #dff7e8;
    border-color: #8ed0a5;
    color: #173924;
}

.djtk-copy-request-btn.is-copied svg {
    display: none;
}

.djtk-copy-request-btn.is-copied::after {
    content: "\2713";
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.djtk-copy-request-btn.is-copy-error {
    background: #ffe8e8;
    border-color: #ef9a9a;
    color: #752020;
}

.djtk-copy-request-btn:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.djtk-live-copy-feedback {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 10020;
    max-width: min(92vw, 520px);
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 9px;
    background: rgba(20, 24, 30, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
    transform: translateX(-50%);
}

.djtk-live-copy-feedback.is-error {
    background: rgba(106, 28, 28, 0.98);
}

.djtk-live-copy-feedback[hidden] {
    display: none !important;
}

@media (hover: none), (pointer: coarse) {
    .djtk-copy-request-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
}

.djtk-pin-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.djtk-pin-btn svg {
    width: 11px;
    height: 11px;
    display: block;
}

.djtk-pin-btn:hover,
.djtk-pin-btn:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
    outline: none;
}

.djtk-pin-btn.is-active {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.djtk-live-undo-stack {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 9997;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
}

.djtk-live-undo-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(20, 23, 30, 0.96);
    color: #fff;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}

.djtk-live-undo-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.djtk-live-undo-copy strong {
    font-size: 0.86rem;
    font-weight: 800;
}

.djtk-live-undo-copy span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    line-height: 1.35;
}

.djtk-live-undo-btn {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #111;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 800;
    transition: transform .16s ease, box-shadow .16s ease;
}

.djtk-live-undo-btn:hover,
.djtk-live-undo-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    outline: none;
}

/* ========================================================================
 * 1b) Archiv-Filter genauso breit wie Tabelle
 * ====================================================================== */
/* ===========================================================================
 * Archiv-Filterleiste  (Responsive)
 * ======================================================================= */
.djtk-arch-filter{
  display:flex;
  flex-wrap:wrap;                 /* erlaubt Umbrüche */
  gap:10px;
  align-items:center;
  margin:.5rem 0;
  padding:0 .5rem;                /* 0.5 rem Rand links + rechts */
}

/* gemeinsame Optik für Inputs */
.djtk-arch-filter input[type="datetime-local"],
.djtk-arch-filter input#djtk-search{
  border:1px solid #ccc;
  border-radius:4px;
  padding:4px 8px;
  font-size:.9rem;
}

/* Datumszeile (arch-left) – Basis */
.djtk-arch-filter .arch-left{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  width:100%;
}

/* ---------- Mobiles Hochformat (≤768 px & portrait) ---------- */
@media (max-width:768px) and (orientation:portrait){
  /* Filterbereich mittig ausrichten */
  .djtk-arch-filter{ justify-content:center; }
  .djtk-arch-filter .arch-left{ justify-content:center; }

  /* zwei Datumsfelder nebeneinander, Button daneben (wrappt bei Platzmangel) */
  .djtk-arch-filter .arch-left > input[type="datetime-local"]{
    flex:1 1 calc(50% - 5px);     /* je ~50% minus halbes Gap */
    min-width:140px;
  }
  #arch-range-btn{ flex:0 0 auto; }

  /* Pager: oben "Zeilen + Select", darunter mittig die Pfeile/Seitenanzeige */
  .djtk-arch-pager{
    display:grid;
    grid-template-columns:auto minmax(160px,1fr); /* Label | Select */
    grid-auto-rows:auto;
    column-gap:8px; row-gap:6px;
    align-items:center; justify-items:start;
    width:100%;
  }
  .djtk-arch-pager label[for="arch-pp"]{ color:#fff; opacity:1; white-space:nowrap; }
  .djtk-arch-pager select{ width:100%; padding:4px 8px; font-size:.9rem; }

  /* Wenn ein Wrapper .arch-controls existiert, nutze ihn als Reihe 2 (zentriert) */
  .djtk-arch-pager .arch-controls{
    grid-column:1 / -1; justify-self:center;
    display:flex; align-items:center; gap:8px;
  }

  /* Fallback: kein .arch-controls vorhanden -> Buttons + Anzeige als Block mittig */
  .djtk-arch-pager:not(:has(.arch-controls)){
    text-align:center;
  }
  .djtk-arch-pager:not(:has(.arch-controls)) #arch-prev,
  .djtk-arch-pager:not(:has(.arch-controls)) #arch-next,
  .djtk-arch-pager:not(:has(.arch-controls)) #arch-page,
  .djtk-arch-pager:not(:has(.arch-controls)) .arch-pages{
    grid-column:1 / -1;           /* untere Zeile */
    display:inline-block;          /* nebeneinander in einer Zeile */
    margin:0 4px;
    justify-self:center;
  }
}

/* ---------- Größer / Querformat (ab 768 px ODER landscape) ---------- */
@media (min-width:768px), (orientation:landscape){
  .djtk-arch-filter{
    position:relative;
    left:50%;
    width:calc(100vw - 4rem);
    margin-left:calc(-50vw + 2rem);
    margin-right:calc(-50vw + 2rem);
    justify-content:space-between;
  }
  /* in einer Zeile: Datums-Inputs + Button links … */
  .djtk-arch-filter .arch-left{ width:auto; }
  #arch-range-btn{ margin-left:10px; }
  /* … Suchfeld rechts */
  #djtk-arch-search{
    margin-left:auto;
    width:300px;
  }

  /* Desktop-Pager: alles in einer Reihe, kein Umbruch */
  .djtk-arch-pager{
    margin-left:auto;
    display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  }
  .djtk-arch-pager label{ font-size:.9rem; opacity:1; color:#fff; white-space:nowrap; }
  .djtk-arch-pager .djtk-select{
    box-sizing:border-box; line-height:normal;
    padding-top:0; padding-bottom:0;
    width:auto; min-width:5.5rem;
  }
}

/* 2) Status-Klassen */
.djtk-table tr.djtk-grayed td {
    background: #5a5d62;
    color: #c8c8c8;
    opacity: 0.20;
}
.djtk-table tr.djtk-hidden { display: none !important; }

/* 3) Buttons */
.djtk-hide-btn {
    padding: 4px 14px;
    border: 1px solid #fff;
    border-radius: 4px;
    background: #fff;
    color: #000;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: background .5s ease, color .5s ease;
}
.djtk-hide-btn:hover { background: #555; color: #fff; }
.djtk-hide-btn:focus { outline: 2px dotted #fff; outline-offset: 2px; }

.djtk-live-dock {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9998;
    width: 52px;
    height: 52px;
}

.djtk-live-dock-trigger {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    background: #ffffff;
    color: #111;
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(0,0,0,0.22);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.djtk-live-dock-trigger:hover,
.djtk-live-dock-trigger:focus-visible,
.djtk-live-dock.is-open .djtk-live-dock-trigger,
.djtk-live-dock:focus-within .djtk-live-dock-trigger {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.28);
    outline: none;
}

.djtk-live-dock.is-active .djtk-live-dock-trigger {
    background: #111;
    border-color: #111;
    color: #fff;
}

.djtk-live-dock.is-disabled .djtk-live-dock-trigger,
.djtk-live-dock.is-warning .djtk-live-dock-trigger {
    background: #f4f4f4;
    border-color: rgba(0, 0, 0, 0.18);
    color: #111;
    opacity: 0.92;
}

.djtk-live-dock-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.djtk-live-dock-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.djtk-live-dock-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(248px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    padding: 11px;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(20, 23, 30, 0.96);
    box-shadow: 0 20px 40px rgba(0,0,0,0.32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.djtk-live-dock-panel::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -12px;
    width: 72px;
    height: 12px;
}

.djtk-live-dock:hover .djtk-live-dock-panel,
.djtk-live-dock-trigger:hover + .djtk-live-dock-panel,
.djtk-live-dock-trigger:focus-visible + .djtk-live-dock-panel,
.djtk-live-dock:focus-within .djtk-live-dock-panel,
.djtk-live-dock.is-open .djtk-live-dock-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.djtk-live-dock-head {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.djtk-live-dock-head strong {
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.djtk-live-dock-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.djtk-live-dock-section {
    padding-top: 2px;
    display: grid;
    gap: 9px;
}

.djtk-live-dock-label {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.djtk-live-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.3;
}

.djtk-live-check input {
    width: 16px;
    height: 16px;
    accent-color: #fff;
}

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

.djtk-live-segment-btn {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.djtk-live-segment-btn:hover,
.djtk-live-segment-btn:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
    outline: none;
}

.djtk-live-segment-btn.is-active {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.djtk-notify-btn {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: #ffffff;
    color: #111;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

.djtk-notify-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}

.djtk-notify-btn.is-active {
    background: #dff7e8;
    border-color: rgba(104, 180, 128, 0.45);
    color: #173924;
}

.djtk-notify-btn-secondary {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
}

.djtk-notify-btn-secondary:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.djtk-notify-btn.is-disabled,
.djtk-notify-btn:disabled {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.72);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.djtk-notify-status {
    color: rgba(255,255,255,0.82);
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
}

.djtk-live-row-new td {
    /*
     * Keep the fallback colour on browsers without CSS animations. Modern
     * engines replace it with the keyframes below and fade only the alpha
     * channel of the same colour. Animating `background` to `transparent`
     * produced different intermediate colours in Safari/WebKit.
     */
    background-color: rgba(72, 164, 107, 0.58);
    -webkit-animation: djtkRowPulse 6500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation: djtkRowPulse 6500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.djtk-live-row-focus td {
    outline: 2px solid rgba(255,255,255,0.28);
    outline-offset: -2px;
}

@media (max-width: 980px) {
    .djtk-live-topbar {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .djtk-live-topbar-side,
    .djtk-live-topbar-side-right {
        min-height: 0;
        justify-content: center;
    }

    .djtk-live-clock {
        margin: 0 auto;
    }
}

@media (max-width: 680px) {
    .djtk-live-actions {
        gap: 6px;
    }

    .djtk-live-actions .djtk-pin-btn,
    .djtk-live-actions .djtk-hide-btn {
        width: 100%;
    }

    .djtk-live-undo-toast {
        flex-direction: column;
        align-items: stretch;
    }

    .djtk-live-undo-btn {
        width: 100%;
    }
}

@-webkit-keyframes djtkRowPulse {
    0%,
    12% {
        background-color: rgba(72, 164, 107, 0.58);
    }
    100% {
        background-color: rgba(72, 164, 107, 0);
    }
}

@keyframes djtkRowPulse {
    0%,
    12% {
        background-color: rgba(72, 164, 107, 0.58);
    }
    100% {
        background-color: rgba(72, 164, 107, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .djtk-live-row-new td {
        -webkit-animation: none;
        animation: none;
        background-color: rgba(72, 164, 107, 0.46);
    }
}

.djtk-table thead th.djtk-live-sort-head {
    padding: 0;
}

.djtk-live-sort-trigger {
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.djtk-live-sort-trigger:hover {
    background: rgba(255,255,255,.09);
}

.djtk-live-sort-trigger:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #fff;
    outline-offset: -3px;
}

.djtk-live-sort-indicator {
    width: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.76);
    font-size: .9em;
    font-weight: 800;
    line-height: 1;
}

.djtk-live-sort-head[aria-sort="other"] .djtk-live-sort-indicator {
    color: #fff;
}

.djtk-vote-score-head,
.djtk-vote-score-cell {
    width: 1%;
    min-width: 54px;
    max-width: 64px;
    padding-inline: 6px !important;
    text-align: center !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.djtk-vote-score-cell {
    font-weight: 800;
}

@media (hover: none), (pointer: coarse) {
    .djtk-live-sort-trigger {
        min-height: 44px;
    }
}

/* Public song voting: semantic mobile cards, never a horizontally scrolling table. */
.djtk-guest-form-theme .djtk-voting {
    width: min(100%, 760px);
    margin: clamp(32px, 5vw, 48px) auto 10px;
    padding: clamp(16px, 4vw, 24px);
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--djtk-guest-border);
    border: 1px solid color-mix(in srgb, var(--djtk-guest-border) 72%, transparent);
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    background: color-mix(in srgb, var(--djtk-guest-field-bg) 8%, transparent);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme--clear .djtk-voting,
.djtk-guest-form-theme--champagne .djtk-voting {
    background: var(--djtk-guest-field-bg);
    background: color-mix(in srgb, var(--djtk-guest-field-bg) 86%, transparent);
    box-shadow: 0 16px 38px rgba(25, 28, 32, .08);
}

.djtk-voting__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 16px;
}

.djtk-voting::before {
    content: "";
    display: block;
    width: min(60%, 180px);
    height: 1px;
    margin: 0 auto 24px;
    background: var(--djtk-guest-border);
    opacity: .65;
}

.djtk-voting__head h2 {
    margin: 0;
    color: inherit !important;
    font-size: clamp(1.12rem, 3.8vw, 1.35rem);
    line-height: 1.25;
}

.djtk-voting__head p {
    margin: 5px 0 0;
    color: var(--djtk-guest-muted) !important;
    font-size: .88rem;
    line-height: 1.4;
}

.djtk-voting__sort {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--djtk-guest-action-bg) 88%, transparent);
}

.djtk-voting__sort button,
.djtk-voting__more {
    min-width: 44px;
    min-height: 44px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--djtk-guest-text);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.djtk-voting__sort button[aria-pressed="true"],
.djtk-voting__more {
    background: var(--djtk-guest-button-bg);
    color: var(--djtk-guest-button-text);
    outline: none;
}

.djtk-voting__sort button:not([aria-pressed="true"]):hover {
    background: var(--djtk-guest-action-bg);
    color: var(--djtk-guest-text);
}

.djtk-voting__sort button:focus-visible,
.djtk-voting__more:focus-visible,
.djtk-voting-card__vote:focus-visible,
.djtk-voting-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--djtk-guest-button-bg) 62%, #fff);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--djtk-guest-item-bg);
}

.djtk-voting__sort button:disabled,
.djtk-voting__more:disabled {
    cursor: wait;
    opacity: .55;
}

.djtk-voting__status {
    min-height: 1.25em;
    margin: 0 0 10px;
    color: var(--djtk-guest-muted);
    font-size: .84rem;
}

.djtk-voting__status:empty {
    display: none;
}

.djtk-voting__status.is-error {
    color: #d94a4a;
}

.djtk-voting__status.is-cooldown {
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, #f58043 42%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #f58043 12%, transparent);
    color: var(--djtk-guest-text, inherit);
    font-size: .8rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.djtk-voting__list {
    display: grid;
    gap: 9px;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.djtk-voting-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 8px 11px;
    box-sizing: border-box;
    border: 1px solid var(--djtk-guest-border);
    border-color: color-mix(in srgb, var(--djtk-guest-border) 58%, transparent);
    border-radius: 15px;
    background: var(--djtk-guest-item-bg);
}

.djtk-voting-card__copy {
    min-width: 0;
}

.djtk-voting-card__song,
.djtk-voting-card__artist {
    display: block;
    max-width: 100%;
    overflow-wrap: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    word-break: normal;
    white-space: normal;
}

.djtk-voting-card__song {
    color: inherit;
    font-size: .98rem;
    line-height: 1.3;
}

.djtk-voting-card__artist {
    margin-top: 3px;
    color: var(--djtk-guest-muted);
    font-size: .84rem;
}

.djtk-voting-card__controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.djtk-voting-card__vote {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--djtk-guest-border);
    border-radius: 12px;
    background: var(--djtk-guest-action-bg);
    color: inherit;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.djtk-voting-card__vote:hover:not(:disabled),
.djtk-voting-card__vote.is-selected {
    border-color: var(--djtk-guest-button-border);
    background: var(--djtk-guest-button-bg);
    color: var(--djtk-guest-button-text);
    outline: none;
}

.djtk-voting-card__vote:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.djtk-voting-card__vote.is-selected:disabled {
    opacity: .85;
}

.djtk-voting-card__score {
    min-width: 2.2ch;
    color: inherit;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.djtk-voting__empty {
    margin: 4px 0;
    color: var(--djtk-guest-muted) !important;
    text-align: center;
}

.djtk-voting__more {
    display: block;
    margin: 14px auto 0;
}

.djtk-voting__more[hidden] {
    display: none !important;
}

@media (max-width: 620px) {
    .djtk-guest-form-theme .djtk-voting {
        width: 100%;
        margin-top: 32px;
        padding: 14px;
        border-radius: 18px;
    }

    .djtk-voting__head {
        display: grid;
        justify-items: center;
    }

    .djtk-voting__sort {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: min(100%, 320px);
        box-sizing: border-box;
    }

    .djtk-voting__sort button {
        min-width: 0;
        padding-inline: 8px;
    }

    .djtk-voting-card {
        gap: 8px;
        padding: 8px 10px;
    }

    .djtk-voting-card__vote {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .djtk-voting *,
    .djtk-voting *::before,
    .djtk-voting *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

.djtk-choice-btn {
    padding: 11px 14px;
    border: 1px solid #fff;
    border-radius: 4px;
    background: #fff;
    color: #000;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: background .5s ease, color .5s ease;
}
.djtk-choice-btn:hover { background: #555; color: #fff; }
.djtk-choice-btn:focus { outline: 2px dotted #fff; outline-offset: 2px; }

/* 4) Formular */
.djtk-form {
    max-width: 900px; width: 90%; margin: 2.5rem auto;
    display: flex; flex-direction: column;
}
.djtk-form .djtk-field { margin-bottom: 1.4rem; }
.djtk-form label {
    display: block; color: #fff; font-size: 1rem;
    margin: 0 0 .35rem; font-weight: 500;
}
.djtk-form input, .djtk-form textarea {
    width: 100%; padding: .6rem .8rem;
    border: 1px solid #676b70; border-radius: 4px;
    background: #fff; font-size: 1rem; color: #000;
}

.djtk-live-quota {
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    margin: .75rem auto .35rem;
    padding: .48rem .95rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    font-size: .9rem;
    font-weight: 700;
}

.djtk-live-quota strong {
    color: #fff;
}

.djtk-live-quota__main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    flex-wrap: wrap;
}

.djtk-quota-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: .1rem;
    padding: 0;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    cursor: help;
}

.djtk-quota-info:focus {
    outline: 2px dotted rgba(255,255,255,.86);
    outline-offset: 2px;
}

.djtk-quota-info__bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 30;
    width: min(280px, calc(100vw - 36px));
    padding: .58rem .68rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(18, 21, 28, .96);
    box-shadow: 0 14px 28px rgba(0,0,0,.26);
    color: #fff;
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
    transform: translate(-50%, 6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.djtk-quota-info__bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: rgba(18, 21, 28, .96);
    border-right: 1px solid rgba(255,255,255,.14);
    border-bottom: 1px solid rgba(255,255,255,.14);
    transform: translateX(-50%) rotate(45deg);
}

.djtk-quota-info:hover .djtk-quota-info__bubble,
.djtk-quota-info:focus .djtk-quota-info__bubble,
.djtk-quota-info:focus-within .djtk-quota-info__bubble {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 600px) {
    /* Center the tooltip over the quota box, not the icon near its edge. */
    .djtk-live-quota .djtk-quota-info { position: static; }
}

.djtk-live-quota__notice {
    max-width: 42rem;
    font-size: .85rem;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}
.djtk-live-quota__notice[hidden] { display: none; }

.djtk-live-quota__fill {
    color: rgba(255,255,255,.76);
    font-size: .78rem;
    font-weight: 700;
}

.djtk-live-quota.is-empty {
    border-color: rgba(217,176,170,.42);
    background: rgba(217,176,170,.16);
}

.djtk-events-wrap > .djtk-live-quota {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    box-sizing: border-box;
}

.djtk-form-limit-block {
    width: min(90%, 540px);
    margin: 2rem auto;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(217,176,170,.42);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(48,30,24,.86), rgba(26,20,18,.94));
    box-shadow: 0 16px 34px rgba(0,0,0,.2);
    color: #fff;
    text-align: center;
}

.djtk-form-limit-block strong,
.djtk-form-limit-block span {
    display: block;
}

.djtk-form-limit-block strong {
    margin-bottom: .35rem;
    font-size: 1.05rem;
}

.djtk-form-limit-block span {
    color: rgba(255,255,255,.78);
    font-size: .92rem;
}
.djtk-form input:focus, .djtk-form textarea:focus {
    outline: none; border-color: #8fa0ff;
    box-shadow: 0 0 0 2px rgba(143,160,255,0.35);
}
.djtk-spotify-selected {
    max-width: 900px;
    width: 90%;
    margin: -.55rem auto 1rem;
    padding: .65rem .8rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    box-shadow: 0 14px 32px rgba(0,0,0,.22);
    color: #fff;
}
.djtk-spotify-selected__media {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
}
.djtk-spotify-selected__media img,
.djtk-spotify-selected__cover-fallback {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 12px;
    object-fit: cover;
}
.djtk-spotify-selected__cover-fallback {
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    text-align: center;
    line-height: 58px;
    font-size: 1.35rem;
}
.djtk-spotify-selected__body {
    min-width: 0;
    flex: 1 1 auto;
}
.djtk-spotify-selected__title {
    font-weight: 700;
    font-size: .98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.djtk-spotify-selected__meta,
.djtk-spotify-selected__album {
    color: rgba(255,255,255,.75);
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.djtk-spotify-selected__album {
    margin-top: .15rem;
    color: rgba(255,255,255,.58);
}
.djtk-spotify-selected[hidden] {
    display: none !important;
}
.djtk-spotify-selected:not([hidden]) {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.djtk-spotify-selected__clear {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.djtk-spotify-selected__clear:hover,
.djtk-spotify-selected__clear:focus {
    background: rgba(255,255,255,.22);
    transform: scale(1.04);
    outline: none;
}
.djtk-spotify-suggest[hidden] {
    display: none !important;
}
.djtk-spotify-suggest {
    max-width: 900px;
    width: 90%;
    margin: -.55rem auto 1.2rem;
    padding: .45rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(26,29,34,.98), rgba(18,20,24,.96));
    box-shadow: 0 18px 42px rgba(0,0,0,.28);
    overflow: hidden;
}
.djtk-spotify-suggest__status {
    padding: .7rem .95rem .8rem;
    color: rgba(255,255,255,.72);
    font-size: .92rem;
}
.djtk-spotify-suggest__list {
    display: grid;
    gap: .4rem;
    max-height: 396px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: .15rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.28) transparent;
}
.djtk-spotify-suggest__list::-webkit-scrollbar {
    width: 8px;
}
.djtk-spotify-suggest__list::-webkit-scrollbar-track {
    background: transparent;
}
.djtk-spotify-suggest__list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border-radius: 999px;
}
.djtk-spotify-suggest__list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.32);
}
.djtk-spotify-suggest__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 28px;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .72rem .8rem;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.djtk-spotify-suggest__item:hover,
.djtk-spotify-suggest__item:focus {
    background: rgba(255,255,255,.09);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    outline: none;
}
.djtk-spotify-suggest__cover {
    width: 56px;
    height: 56px;
}
.djtk-spotify-suggest__cover img,
.djtk-spotify-suggest__cover-fallback {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}
.djtk-spotify-suggest__cover-fallback {
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    color: #fff;
    line-height: 56px;
    text-align: center;
    font-size: 1.35rem;
}
.djtk-spotify-suggest__body {
    display: grid;
    gap: .16rem;
    min-width: 0;
}
.djtk-spotify-suggest__title {
    font-weight: 700;
    font-size: .97rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.djtk-spotify-suggest__meta {
    color: rgba(255,255,255,.72);
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.djtk-spotify-suggest__album {
    color: rgba(255,255,255,.52);
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.djtk-spotify-suggest__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.82);
    font-size: 1.35rem;
}
@media (max-width: 640px) {
    .djtk-spotify-selected,
    .djtk-spotify-suggest {
        width: 100%;
    }

    .djtk-spotify-suggest__item {
        grid-template-columns: 50px minmax(0, 1fr) 24px;
        gap: .7rem;
        padding: .7rem;
    }

    .djtk-spotify-suggest__list {
        max-height: 368px;
    }

    .djtk-spotify-suggest__cover,
    .djtk-spotify-suggest__cover img,
    .djtk-spotify-suggest__cover-fallback {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        line-height: 50px;
    }

    .djtk-spotify-selected:not([hidden]) {
        gap: .75rem;
    }

    .djtk-spotify-selected__media,
    .djtk-spotify-selected__media img,
    .djtk-spotify-selected__cover-fallback {
        width: 52px;
        height: 52px;
        border-radius: 11px;
        line-height: 52px;
    }
}
.djtk-submit {
    display: block; margin: .75rem auto 0;
    padding: .6rem 1.4rem; background: #fff; color: #000;
    font-weight: 600; border: 1px solid #fff; border-radius: 4px;
    cursor: pointer; transition: background .5s ease, color .5s ease;
}
.djtk-submit:hover { background: #cfd2d6; }

/* Zusätzlicher Button-Link unter dem Wunschformular (z.B. Trinkgeld/PayPal/Stripe) */
.djtk-extra-link {
    display: inline-block;
    margin: .65rem auto 0;
    padding: .55rem 1.25rem;
    background: transparent;
    color: #fff;
    font-weight: 600;
    border: 1px solid #fff;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background .5s ease, color .5s ease;
}
.djtk-extra-link:hover {
    background: #fff;
    color: #000;
}
.djtk-spotify-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.djtk-spotify-link:hover {
    color: #9fe0ff;
}

.djtk-sort-link {
    color: inherit;
    text-decoration: none;
    display: inline;
}

.djtk-sort-link:hover,
.djtk-sort-link:focus-visible {
    color: #9fe0ff;
    text-decoration: underline;
    text-underline-offset: 2px;
    outline: none;
}

.djtk-archive-songlist-wrap .djtk-arch-filter {
    margin-bottom: 1rem;
}

.djtk-archive-songlist-wrap .arch-right {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.djtk-archive-songlist-summary {
    color: #fff;
    font-weight: 600;
}

.djtk-songlist-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.djtk-songlist-table .djtk-songlist-col-artist {
    width: 29%;
}

.djtk-songlist-table .djtk-songlist-col-song {
    width: 29%;
}

.djtk-songlist-table .djtk-songlist-col-genre {
    width: 14%;
}

.djtk-songlist-table .djtk-songlist-col-year {
    width: 12%;
}

.djtk-songlist-table .djtk-songlist-col-count {
    width: 80px;
}

.djtk-songlist-table .djtk-songlist-col-last {
    width: 128px;
}

.djtk-songlist-table thead th {
    vertical-align: middle;
}

.djtk-songlist-table th,
.djtk-songlist-table td {
    text-align: left;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.djtk-songlist-table thead th:last-child,
.djtk-songlist-table tbody td:last-child {
    text-align: left;
}

.djtk-songlist-table thead th:nth-child(1),
.djtk-songlist-table tbody td:nth-child(1),
.djtk-songlist-table thead th:nth-child(2),
.djtk-songlist-table tbody td:nth-child(2),
.djtk-songlist-table thead th:nth-child(3),
.djtk-songlist-table tbody td:nth-child(3) {
    white-space: normal;
}

.djtk-songlist-table thead th:nth-child(4),
.djtk-songlist-table tbody td:nth-child(4),
.djtk-songlist-table thead th:nth-child(5),
.djtk-songlist-table tbody td:nth-child(5),
.djtk-songlist-table thead th:nth-child(6),
.djtk-songlist-table tbody td:nth-child(6) {
    white-space: nowrap;
}

.djtk-songlist-table thead th:nth-child(5),
.djtk-songlist-table tbody td:nth-child(5) {
    text-align: center;
}

@media (max-width: 768px) {
    .djtk-archive-songlist-wrap .djtk-arch-filter .arch-left,
    .djtk-archive-songlist-wrap .djtk-arch-filter .arch-right {
        width: 100%;
        justify-content: center;
    }

    .djtk-archive-songlist-summary {
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
 * 4.5) FOLDER-RASTER  –  Icons, Name zentriert
 * ----------------------------------------------------------------------- */
.djtk-folders{
  display:flex;flex-wrap:wrap;gap:1.6rem 2.2rem;justify-content:center;margin:2rem 0 4rem;
}
.djtk-folder{
  width:130px;font-size:.85rem;color:#fff;text-align:center;position:relative;transition: transform 0.2s ease;overflow: visible;position: relative;z-index: 1;padding-bottom:1rem; 
}
.djtk-folder:hover {
  transform: scale(1.1);
}
.djtk-folder.hover {
  transform: scale(1.1);
}
.djtk-folder:hover .fold-panel {
  z-index: 999;         /* bei Hover bleibt das ganze Folder-Element oben */
}
.djtk-folder.open,
.djtk-folder.open:hover {
  transform: scale(1.1);
}
.djtk-folder-icon {
  display: block;          /* sorgt dafür, dass margin‐auto/width wirkt */
  margin: 0 auto;          /* zentriert das Icon */
  width: 120px;             /* oder beliebige Größe */
  height: 120px;            /* 1:1-Verhältnis */
  border-radius: 10%;      /* macht’s rund */
  object-fit: cover;       /* füllt den Kreis sauber aus */
}
.djtk-folder .name{display:block;margin-top:.5rem;font-weight:600;white-space:nowrap}
.fold-opt{
  display:inline-block;margin-top:.25rem;padding:3px 8px;font-size:.75rem;
  color:#fff;background:#2b2e33;border:1px solid #747678;border-radius:4px;
  cursor:pointer;transition:background .3s ease
}
.fold-opt:hover{background:#3d3f42}

/* Dropdown */
.fold-panel{
  position:absolute; left:50%; top:100%; transform:translate(-50%,6px);
  background:#232528; border:1px solid #6b6c6e; border-radius:4px;
  padding:4px 0; width:120px; z-index:50; display:none; width:auto;z-index: 1000;top: calc(100% - 1rem);
}
.fold-panel button{
  width:100%; background:none; border:none; color:#fff;
  font-size:.78rem; line-height:1.6; cursor:pointer;
}
.fold-panel button:hover{ background:#333; }
.djtk-breadcrumb{
  font-size:1rem;
  position: relative;
  right: auto;
  width: calc(100vw - 20rem);
  margin-left:calc(-50vw + 2rem);
  text-align:left;
  margin:0.5rem 0;
  margin-top: .8rem;
  display: flex;
  justify-content: flex-start;
  gap: 0.3rem;
}
/* -------------------------------------------------------------------------
 * 4.6) MODAL  (Overlay + Box)
 * ----------------------------------------------------------------------- */
.djtk-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.62);
  display:flex; align-items:center; justify-content:center; z-index:10000;
}
.djtk-modal-box{
  background:#fff; padding:26px 32px; border-radius:8px;
  width:94%; max-width:480px; color:#000; text-align:center; position:relative;
}
.djtk-modal-box h3{ margin:0 0 18px; }
.djtk-modal-box .btn-row{ margin-top:18px; }
.djtk-modal-box .btn-row .djtk-hide-btn + .djtk-hide-btn{ margin-left:12px; }
.djtk-modal-box select,
.djtk-modal-box input{ width:100%; margin-top:4px; }

/* 5) Responsive */
@media (max-width:768px) and (orientation:portrait){
  .djtk-table { font-size: .8rem; display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 1.5rem 0;border: 0px;}
  .djtk-hide-btn { font-size: .75rem; padding: 3px 8px; }
}
@media (max-width:768px) and (orientation:landscape){
  .djtk-table { display: table; overflow-x: visible; white-space: normal; }
  .djtk-hide-btn { font-size: .85rem; padding: 4px 10px; }
}
@media (min-width:768px){
  .djtk-table {
    position: relative; left: 50%;
    width: calc(100vw - 4rem);
    margin-left: calc(-50vw + 2rem);
    margin-right: calc(-50vw + 2rem);
    overflow-x: visible; white-space: normal;
  }
}

/* 6) Overlay für Login-Countdown */
#djtk-redirect {
    position: fixed; inset: 0; display: flex;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.8); color: #fff;
    font: 600 1.25rem/1.4 system-ui, sans-serif; z-index: 9999;
}

/* 7) Auto-Refresh-Bar */
#djtk-refreshbar {
    position: fixed; bottom: 20px; left: 50%;
    transform: translateX(-50%); width: 180px; height: 8px;
    background: #333; border-radius: 4px; overflow: hidden; z-index: 9999;
}
#djtk-refreshbar .fill {
    width: 0%; height: 100%; background: #00b7ff; transition: width 1s linear;
}
#djtk-refreshbar .txt {
    position: absolute; top: -1.4rem; right: 0;
    font-size: .72rem; color: #b5b5b5; letter-spacing: .2px;
}

/* 8) Highlight verwandter Zeilen */
.djtk-related td {
    background-color: rgba(0,183,255,0.3) !important;
}

/* 9) Meldungs-Box unter Formular */
.djtk-msg {
    width: min(100%, 440px);
    margin: .85rem auto 0;
    padding: .82rem .95rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .8rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(28,31,37,.82), rgba(18,20,24,.92));
    box-shadow: 0 18px 36px rgba(0,0,0,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(255,255,255,.92);
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

.djtk-msg[hidden] {
    display: none !important;
}

.djtk-msg::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}

.djtk-msg.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.djtk-msg.is-success {
    border-color: rgba(111, 226, 182, .18);
    background: linear-gradient(180deg, rgba(18,36,31,.82), rgba(13,24,20,.94));
    color: #f3fbf8;
}

.djtk-msg.is-success::before {
    background: linear-gradient(135deg, #aaf3d3, #4ed8a0);
    box-shadow: 0 0 0 6px rgba(78,216,160,.12);
}

.djtk-msg.is-error {
    border-color: rgba(255, 184, 120, .18);
    background: linear-gradient(180deg, rgba(48,30,18,.82), rgba(28,19,12,.94));
    color: #fff8f1;
}

.djtk-msg.is-error::before {
    background: linear-gradient(135deg, #ffd7a6, #ff9f5d);
    box-shadow: 0 0 0 6px rgba(255,159,93,.12);
}

/* Veranstaltungen */
.djtk-events-wrap {
    max-width: 1180px;
    margin: 1.5rem auto;
    padding: 0 12px;
    color: #fff;
    font-size: .9rem;
    box-sizing: border-box;
}

.djtk-event-topbar-side {
    justify-content: flex-start;
}

.djtk-event-back-link,
.djtk-event-back-link:visited {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    color: #fff !important;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    opacity: .88;
}

.djtk-event-back-link:hover {
    color: #fff !important;
    opacity: 1;
    text-decoration: underline;
}

.djtk-events-wrap a:not(.djtk-choice-btn):not(.djtk-event-row) {
    color: inherit;
}

.djtk-events-wrap .djtk-choice-btn {
    color: #000;
}

.djtk-events-wrap .djtk-choice-btn:hover {
    color: #fff;
}

.djtk-events-head {
    margin: 0 0 1rem;
    text-align: center;
}

.djtk-events-kicker {
    display: block;
    margin-bottom: .25rem;
    color: rgba(255,255,255,.72);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.djtk-events-head h1,
.djtk-event-panel h2,
.djtk-event-card h2 {
    margin: 0;
    color: #fff;
    line-height: 1.15;
}

.djtk-events-head h1 {
    font-size: 1.55rem;
    font-weight: 700;
}

.djtk-event-panel,
.djtk-event-card,
.djtk-event-empty {
    border: 1px solid #747678;
    border-radius: 4px;
    background: #2f3237;
    box-shadow: none;
}

.djtk-event-panel {
    padding: 14px;
    margin-bottom: 1rem;
}

.djtk-event-create,
.djtk-event-edit {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.djtk-event-create {
    grid-template-columns: minmax(220px, 1.5fr) minmax(150px, .7fr) minmax(210px, 1fr) auto;
    align-items: end;
    margin-top: .85rem;
}

.djtk-event-create label,
.djtk-event-edit label,
.djtk-event-link {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: rgba(255,255,255,.82);
    font-size: .8rem;
    font-weight: 600;
}

.djtk-event-create input,
.djtk-event-edit input,
.djtk-event-edit select,
.djtk-event-link input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid #747678;
    border-radius: 4px;
    background: #1f2227;
    color: #fff;
    font: inherit;
}

.djtk-event-create input:focus,
.djtk-event-edit input:focus,
.djtk-event-edit select:focus,
.djtk-event-link input:focus {
    outline: 2px dotted #fff;
    outline-offset: 2px;
}

.djtk-event-grid {
    color: #fff !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.djtk-event-overview-table {
    width: 100%;
    min-width: 680px;
    border: 1px solid #747678;
    border-radius: 4px;
    border-collapse: collapse;
    background: #2f3237;
    color: #fff !important;
    overflow: hidden;
}

.djtk-event-overview-table th,
.djtk-event-overview-table td {
    padding: 0;
    border: 1px solid #747678;
    color: #fff !important;
    line-height: 1.3;
    text-align: left;
}

.djtk-event-overview-table th {
    background: #2b2e33;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.djtk-event-overview-table tbody tr {
    background: #2f3237;
    cursor: pointer;
    transition: background .16s ease;
}

.djtk-event-overview-table tbody tr:hover {
    background: #3a3d42;
}

.djtk-event-overview-table th > .djtk-event-sort,
.djtk-event-cell-link {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 9px 10px;
    color: #fff !important;
    box-sizing: border-box;
    text-decoration: none;
}

.djtk-event-sort,
.djtk-event-sort:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    color: #fff !important;
    text-decoration: none;
}

.djtk-event-sort:hover {
    color: #fff !important;
    text-decoration: underline;
}

.djtk-event-cell-link:hover {
    color: #fff !important;
    text-decoration: none;
}

.djtk-event-sort-indicator {
    flex: 0 0 auto;
    color: rgba(255,255,255,.82);
    font-size: .78rem;
    line-height: 1;
}

.djtk-event-row-name {
    font-weight: 700;
}

.djtk-event-table-scroll {
    width: 100%;
    max-width: none;
    overflow-x: visible;
}

.djtk-event-table-scroll .djtk-table {
    position: static;
    left: auto;
    width: 100%;
    min-width: 0;
    margin: 1.5rem 0;
    white-space: normal;
}

.djtk-event-card {
    padding: 0;
    display: grid;
    gap: 0;
}

.djtk-event-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px;
    align-items: start;
    padding: 12px;
    background: #3a3d42;
    border-bottom: 1px solid #747678;
}

.djtk-event-card h2 {
    font-size: 1.05rem;
    font-weight: 700;
}

.djtk-event-card p,
.djtk-event-subline,
.djtk-event-form-date {
    margin: 4px 0 0;
    color: rgba(255,255,255,.76);
    font-size: .84rem;
}

.djtk-event-status {
    display: inline-flex;
    margin-bottom: 6px;
    padding: 2px 7px;
    border: 1px solid #747678;
    border-radius: 4px;
    background: #2b2e33;
    color: rgba(255,255,255,.84);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.djtk-event-qr {
    width: 104px;
    min-height: 104px;
    padding: 6px;
    border-radius: 4px;
    background: #fff;
    line-height: 0;
}

.djtk-event-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.djtk-event-detail-panel {
    max-width: 980px;
    margin: 0 auto 1rem;
    border: 1px solid #747678;
    border-radius: 4px;
    background: #2f3237;
    box-sizing: border-box;
}

.djtk-event-detail-main {
    display: block;
    padding: 12px;
    text-align: center;
}

.djtk-event-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.djtk-event-detail-stats span {
    display: grid;
    gap: 2px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid #747678;
    border-radius: 4px;
    background: #3a3d42;
    color: rgba(255,255,255,.78);
    font-size: .78rem;
    align-content: center;
}

.djtk-event-detail-stats strong {
    color: #fff;
    font-size: 1rem;
    line-height: 1.1;
}

.djtk-event-detail-panel .djtk-event-link {
    padding: 0 0 12px;
}

.djtk-event-detail-panel .djtk-event-edit {
    width: 100%;
    max-width: 900px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    border-top: 0;
    background: transparent;
    text-align: left;
}

.djtk-event-detail-tools {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #747678;
}

.djtk-event-detail-tools .djtk-choice-btn {
    display: inline-flex;
    flex: 0 0 240px;
    align-items: center;
    justify-content: center;
    width: 240px !important;
    min-height: 42px;
    box-sizing: border-box;
    min-width: 190px;
    padding: 10px 18px;
    border-color: #fff;
    border-radius: 6px;
    background: #fff;
    color: #000 !important;
    box-shadow: 0 2px 0 rgba(0,0,0,.22);
    text-align: center;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.djtk-event-detail-tools .djtk-choice-btn:hover {
    background: #555;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(0,0,0,.2);
}

.djtk-event-copy-feedback {
    flex-basis: 100%;
    color: rgba(255,255,255,.82);
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
}

.djtk-event-card-actions,
.djtk-event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.djtk-event-actions {
    margin: 0 0 1rem;
    justify-content: center;
    text-align: center;
}

.djtk-event-list-actions {
    margin: .25rem 0 0;
}

.djtk-event-delete-actions {
    margin: .9rem 0 1rem;
}

.djtk-event-list-actions .djtk-choice-btn,
.djtk-event-delete-actions .djtk-choice-btn {
    min-height: 0;
    padding: 4px 14px;
    border-radius: 4px;
    font-size: .85rem;
    line-height: 1.25;
    box-shadow: none;
}

.djtk-event-card-actions,
.djtk-event-link {
    padding: 12px;
}

.djtk-event-card-actions {
    padding-top: 0;
}

.djtk-event-actions form,
.djtk-event-card-actions form {
    margin: 0;
}

.djtk-event-edit {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    min-width: 0;
    padding: 12px;
    border-top: 1px solid #747678;
    background: #2f3237;
}

.djtk-event-danger {
    border-color: #d9b0aa !important;
    background: #d9b0aa !important;
    color: #1e1110 !important;
}

.djtk-event-notice,
.djtk-event-empty {
    padding: 12px 14px;
    margin: 0 0 14px;
    text-align: center;
    color: #fff !important;
}

.djtk-event-empty,
.djtk-event-empty strong,
.djtk-event-empty a {
    color: #fff !important;
}

.djtk-event-notice {
    border: 1px solid #747678;
    border-radius: 4px;
    background: #3a3d42;
    color: #fff;
    font-weight: 600;
    overflow: hidden;
}

.djtk-event-notice:not(.djtk-event-notice--error) {
    animation: djtkNoticeHide 2.2s ease forwards;
}

@keyframes djtkNoticeHide {
    0%,
    74% {
        max-height: 90px;
        margin-bottom: 14px;
        padding-top: 12px;
        padding-bottom: 12px;
        border-width: 1px;
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        opacity: 0;
        transform: translateY(-6px);
    }
}

.djtk-event-form-wrap .djtk-event-form-date {
    text-align: center;
    margin: -6px 0 14px;
}

.djtk-event-form-wrap .djtk-form-head,
.djtk-event-form-wrap .djtk-form-name,
.djtk-event-form-wrap .djtk-event-form-date {
    color: #fff !important;
}

@media (max-width: 900px) {
    .djtk-event-create,
    .djtk-event-edit,
    .djtk-event-card-main,
    .djtk-event-detail-main,
    .djtk-event-detail-stats {
        grid-template-columns: 1fr;
    }

    .djtk-events-wrap {
        width: 100%;
        max-width: 100vw;
        padding-right: clamp(10px, 4vw, 16px);
        padding-left: clamp(10px, 4vw, 16px);
        overflow-x: hidden;
    }

    .djtk-event-panel {
        padding: clamp(12px, 4vw, 16px);
    }

    .djtk-event-create,
    .djtk-event-edit {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .djtk-event-create .djtk-choice-btn,
    .djtk-event-edit .djtk-choice-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .djtk-event-create input,
    .djtk-event-edit input,
    .djtk-event-edit select {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .djtk-event-create input[type="date"],
    .djtk-event-create input[type="datetime-local"],
    .djtk-event-edit input[type="date"],
    .djtk-event-edit input[type="datetime-local"] {
        -webkit-appearance: none;
        appearance: none;
        font-size: 16px;
    }

    .djtk-event-table-scroll {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .djtk-event-table-scroll .djtk-table {
        min-width: 720px;
    }

    .djtk-event-qr {
        width: min(150px, 100%);
        justify-self: center;
    }

    .djtk-event-detail-tools {
        flex-wrap: wrap;
    }

    .djtk-event-detail-tools .djtk-choice-btn {
        flex-basis: min(100%, 320px);
        width: min(100%, 320px) !important;
    }
}

@media (min-width: 901px) {
    .djtk-event-table-scroll {
        position: relative;
        left: 50%;
        width: calc(100vw - 4rem);
        margin-left: calc(-50vw + 2rem);
        margin-right: calc(-50vw + 2rem);
    }
}

/* QR-Seite: Header/Footer ausblenden */
.djtk-qr-page .header-main,
.djtk-qr-page .site-header,
.djtk-qr-page #masthead,
.djtk-qr-page header {
  display: none !important;
}
.djtk-qr-page .site-footer,
.djtk-qr-page footer {
  display: none !important;
}

.djtk-qr-inline svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.djtk-qr-inline--display {
  max-width: 560px;
}

.djtk-qr-code-slot {
  width: min(100%, 560px);
}

@media (max-width: 900px) {
  .djtk-qr-code-slot {
    flex-basis: 100% !important;
    max-width: min(100%, 520px) !important;
  }
}

/* 10) Archiv – Pager / Seitenumbruch (konsolidiert) */
.djtk-arch-pager label{ font-size:.9rem; opacity:.9; }
.djtk-arch-pager select, .djtk-arch-pager .djtk-page-input{
  padding:4px 8px; font-size:.9rem;
}
.djtk-arch-pager .djtk-page-input{ width:3.6rem; text-align:center; }
.djtk-arch-pager .djtk-pg-btn{
  padding:4px 8px; line-height:1; min-width:unset;
}
/* Zeilen außerhalb der aktuellen Seite ausblenden */
.djtk-table.djtk-arch tbody tr.pg-hide{ display:none !important; }

/* Mobile: „Zeilen + Select“ oben, Controls mittig darunter (Fallback, falls oben nicht greift) */
@media (max-width: 768px){
  .djtk-arch-filter{ gap:8px; }
  /* Falls kein Grid aus dem oberen Block greift, trotzdem rechts bündig */
  .djtk-arch-pager{ width:100%; }
}

/* Desktop: Pager-Controls in einer Zeile halten */
@media (min-width: 768px){
  .djtk-arch-pager{
    flex-wrap: nowrap;          /* NICHT umbrechen auf großen Screens */
  }
  .djtk-arch-pager .djtk-select{
    box-sizing: border-box;
    line-height: normal; 
    padding-top: 0; 
    padding-bottom: 0;
    width: auto;                /* überschreibt evtl. globales width:100% */
    min-width: 5.5rem;          /* genug Breite für 25/50/100/... */
  }
  .djtk-arch-pager label,
  .djtk-arch-pager span{
    white-space: nowrap;        /* "/" und Seitenzahl zusammenhalten */
  }
  .djtk-arch-pager .djtk-page-input{
    width: 3.6rem;              /* kompakt, verhindert unnötigen Zeilenumbruch */
  }
}
/* „Zeilen“ in Weiß */
.djtk-arch-pager label[for="arch-pp"]{
  color: #fff !important;
  opacity: 1 !important;
}

/* === Handy im Querformat: Alles in *einer* Reihe, zentriert ============ */
@media (max-width: 768px) and (orientation:landscape){
  /* Filterleiste ohne Desktop-Offset und mittig */
  .djtk-arch-filter{
    position: static;
    left: auto;
    width: calc(100vw - 2rem);
    margin: 0 auto;
    justify-content: center;
    padding: 0 .5rem;
    gap: 12px;
  }

  /* Datumszeile mittig (kann umbrechen), aber bleibt zentriert */
  .djtk-arch-filter .arch-left{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .djtk-arch-filter .arch-left > input[type="datetime-local"]{
    flex: 1 1 45%;
    min-width: 160px;
  }

  /* --- WICHTIG: Pager in *einer Zeile*, zentriert --- */
  .djtk-arch-pager{
    display: flex !important;          /* überschreibt evtl. Grid von vorher */
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;                  /* eine Zeile erzwingen */
    width: 100%;
  }
  .djtk-arch-pager label[for="arch-pp"]{
    color: #fff; opacity: 1; white-space: nowrap;
  }
  .djtk-arch-pager select{
    height: 38px;
    box-sizing: border-box;
    line-height: normal;
    padding-top: 0; padding-bottom: 0;
    min-width: 5.5rem;
  }
  .djtk-arch-pager .arch-controls{
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Falls irgendwo Grid-Spuren übrig sind, neutralisieren */
  .djtk-arch-pager .arch-controls,
  .djtk-arch-pager #arch-prev,
  .djtk-arch-pager #arch-next,
  .djtk-arch-pager #arch-page,
  .djtk-arch-pager .arch-pages{
    grid-column: auto;
    justify-self: auto;
  }
}

/* === Handy im Querformat: Datumsfelder + "Zeitraum auswählen" in 1 Reihe === */
@media (max-width: 768px) and (orientation:landscape){
  /* ganze Gruppe mittig und EINZEILIG */
  .djtk-arch-filter .arch-left{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;       /* nicht umbrechen */
    gap: 8px;
    width: 100%;
  }

  /* beide Datums-Inputs dürfen leicht schrumpfen, damit alles auf 1 Zeile passt */
  .djtk-arch-filter .arch-left input[type="datetime-local"]{
    flex: 1 1 33%;
    min-width: 120px;        /* kleiner als im Hochformat, damit es gut passt */
    max-width: 40%;
  }

  /* der Mittelstrich nimmt nur minimale Breite ein */
  .djtk-arch-filter .arch-left > span{
    flex: 0 0 auto;
    white-space: nowrap;
    opacity: .9;
  }

  /* Button kompakt halten, in der gleichen Zeile */
  #arch-range-btn{
    flex: 0 0 auto;
    white-space: nowrap;
    height: 38px;            /* gleiche optische Höhe wie Select/Inputs */
    line-height: 1.2;
    padding: 8px 14px;       /* kompakter als default */
  }
}

/* (… bestehendes CSS unverändert …) */


/* ... bestehendes CSS ... */

.djtk-rate-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  background:rgba(10,12,16,.78);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
}
.djtk-rate-modal{
  position:absolute;
  left:50%;
  top:50%;
  width:min(92vw,520px);
  padding:26px 26px 20px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  background:linear-gradient(145deg,#222832,#171b22);
  box-shadow:0 28px 80px rgba(0,0,0,.42);
  color:#f5f7fa;
  text-align:center;
}
.djtk-rate-close{
  position:absolute;
  top:11px;
  right:12px;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font-size:1.55rem;
  line-height:1;
  cursor:pointer;
  opacity:.68;
}
.djtk-rate-close:hover,
.djtk-rate-close:focus-visible{background:rgba(127,127,127,.15);opacity:1;outline:none;}
.djtk-rate-title{margin:0 34px 18px;font-size:1.2rem;font-weight:750;letter-spacing:-.01em;}
.djtk-rate-stars{display:flex;gap:.2rem;justify-content:center;margin:.2rem 0 .65rem;}
.djtk-rate-stars .djtk-star{
  padding:.2rem;
  border:0;
  background:transparent;
  color:#ffd15c;
  font-size:2.2rem;
  line-height:1;
  cursor:pointer;
  filter:drop-shadow(0 5px 10px rgba(255,209,92,.16));
  transition:transform .12s ease,filter .12s ease;
}
.djtk-rate-stars .djtk-star:hover,
.djtk-rate-stars .djtk-star:focus-visible{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 8px 14px rgba(255,209,92,.3));outline:none;}
.djtk-rate-stars .djtk-star:active{transform:scale(.92);}
.djtk-rate-actions{margin:.85rem 0 0;}
.djtk-rate-actions .djtk-rate-skip{
  padding:.42rem .8rem;
  border:0;
  background:transparent;
  color:inherit;
  font-size:.83rem;
  cursor:pointer;
  opacity:.66;
  text-decoration:underline;
  text-underline-offset:3px;
}
.djtk-rate-actions .djtk-rate-skip:hover,
.djtk-rate-actions .djtk-rate-skip:focus-visible{opacity:1;outline:none;}
.djtk-mood-barometer{display:grid;gap:12px;margin-top:4px;}
.djtk-mood-readout{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:28px;padding:10px 12px;border:1px solid rgba(127,127,127,.2);border-radius:15px;background:rgba(127,127,127,.08);text-align:left;}
.djtk-mood-icon{font-size:1.05rem;line-height:1;filter:drop-shadow(0 0 8px currentColor);transition:color .15s ease,transform .15s ease;}
.djtk-mood-label{font-size:1rem;}
.djtk-mood-value{min-width:58px;padding:4px 8px;border-radius:999px;background:rgba(127,127,127,.12);font-variant-numeric:tabular-nums;font-weight:800;text-align:center;}
.djtk-mood-track-shell{position:relative;display:flex;align-items:center;width:100%;height:52px;padding:0 6px;box-sizing:border-box;}
.djtk-mood-track-shell::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:14px;transform:translateY(-50%);border:2px solid rgba(255,255,255,.18);border-radius:999px;background:linear-gradient(90deg,#df746b 0%,#dfa45f 30%,#d9c05b 50%,#89bf79 72%,#4eb28a 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 5px 16px rgba(0,0,0,.12);}
.djtk-mood-track-shell:focus-within::before{border-color:var(--djtk-guest-focus,#8fa0ff);box-shadow:inset 0 2px 4px rgba(0,0,0,.2),0 0 0 4px var(--djtk-guest-focus-ring,rgba(143,160,255,.35)),0 8px 20px rgba(0,0,0,.14);}
.djtk-mood-range{
  --djtk-mood-position:65%;
  position:relative;
  z-index:1;
  width:100%;
  height:52px;
  margin:0;
  padding:0;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.djtk-mood-range::-webkit-slider-runnable-track{
  height:14px;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
}
.djtk-mood-range::-webkit-slider-thumb{
  width:36px;
  height:36px;
  margin-top:-11px;
  border:5px solid var(--djtk-guest-field-bg,#fff);
  border-radius:999px;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  background:var(--djtk-guest-button-bg,#fff);
  box-shadow:0 0 0 1px rgba(0,0,0,.16),0 7px 18px rgba(0,0,0,.3);
  transition:transform .12s ease,box-shadow .12s ease;
}
.djtk-mood-range::-moz-range-track{
  height:14px;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
}
.djtk-mood-range::-moz-range-thumb{
  width:36px;
  height:36px;
  border:5px solid var(--djtk-guest-field-bg,#fff);
  border-radius:999px;
  box-sizing:border-box;
  background:var(--djtk-guest-button-bg,#fff);
  box-shadow:0 0 0 1px rgba(0,0,0,.16),0 7px 18px rgba(0,0,0,.3);
}
.djtk-mood-range:focus{outline:none;}
.djtk-mood-range:active::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 0 0 1px rgba(0,0,0,.16),0 9px 22px rgba(0,0,0,.34);}
.djtk-mood-scale{display:flex;justify-content:space-between;margin-top:-5px;padding:0 4px;color:inherit;font-size:.76rem;font-weight:650;opacity:.64;}
.djtk-mood-confirm{
  justify-self:center;
  min-width:190px;
  margin-top:4px;
  padding:.72rem 1.35rem;
  border:1px solid var(--djtk-guest-button-border,#fff);
  border-radius:999px;
  background:var(--djtk-guest-button-bg,#fff);
  color:var(--djtk-guest-button-text,#111);
  font-weight:750;
  cursor:pointer;
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.djtk-mood-confirm:hover,
.djtk-mood-confirm:focus-visible{background:var(--djtk-guest-button-hover,#d8dbe0);transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.18);outline:none;}
.djtk-rate-modal button:disabled,
.djtk-rate-modal input:disabled{cursor:wait;opacity:.58;}

/* Live-Liste Durchschnittsstars */
.djtk-rating-today .djtk-stars{
  font-size:1.35rem;
}
.djtk-live-mood{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;}
.djtk-mood-summary{display:inline-block;width:110px;height:8px;border-radius:999px;background:rgba(127,127,127,.2);overflow:hidden;vertical-align:middle;}
.djtk-mood-summary>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e07a6f,#d6bd55 52%,#4fb58b);}
.djtk-feedback-current{display:grid;justify-items:center;gap:6px;width:min(100%,420px);margin:0 auto 14px;padding:14px 16px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.055);color:#fff;text-align:center;}
.djtk-feedback-current-label{font-size:.76rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;opacity:.65;}
.djtk-feedback-current-value{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.15rem;}
.djtk-feedback-current small{opacity:.72;}

/* Mobile-Optimierung: Sterne minimal kleiner + enger */
@media (max-width: 480px) {
  .djtk-rate-stars{
    gap:0rem;
  }
  .djtk-rate-stars .djtk-star{
    font-size:1.7rem;
  }
  .djtk-rate-modal{padding:24px 18px 18px;border-radius:20px;}
  .djtk-mood-confirm{width:100%;}
}

@media (max-width: 768px) {
  .djtk-live-dock {
    right: 12px;
    bottom: 12px;
    width: 52px;
    height: 52px;
  }

  .djtk-live-dock-trigger {
    align-self: flex-end;
  }

  .djtk-live-dock-panel {
    width: min(248px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .djtk-live-dock-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .djtk-notify-btn,
  .djtk-notify-status {
    width: 100%;
    text-align: center;
  }
}

/* Hinweis Modal Form Limit erreicht */
.djtk-limit-modal {
    position: fixed;
    inset: 0;
    display: none;              /* wird per JS ein-/ausgeblendet */
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
}

/* Dialog hart in die Mitte zentrieren, unabhängig von flex/block */
.djtk-limit-modal__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background: #ffffff;
    color: #000000;             /* schwarze Schrift */
    padding: 20px 24px;
    max-width: 420px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    font-family: inherit;
}

.djtk-limit-modal__dialog h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #000000;             /* falls Headlines global anders gefärbt sind */
}

.djtk-limit-message {
    margin: 0;
    color: #000000;             /* Sicherheitshalber auch hier schwarz */
}

.djtk-limit-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    color: #000000;             /* X-Button in schwarz */
}

/* Seitenweites Design der oeffentlichen Gaesteformulare */
html:has(body.djtk-guest-page-theme--clear),
body.djtk-guest-page-theme--clear {
    min-height: 100%;
    background: #f4f2ed !important;
    background-image: linear-gradient(145deg, #fff 0%, #f1efe9 100%) !important;
    color: #242931;
}

html:has(body.djtk-guest-page-theme--champagne),
body.djtk-guest-page-theme--champagne {
    min-height: 100%;
    background: #efe2ce !important;
    background-image:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.92), transparent 34%),
        linear-gradient(145deg, #fbf6ed 0%, #e8d7bc 100%) !important;
    color: #45372b;
}

body.djtk-guest-page-theme--clear :where(
    #page, .site, #content, .site-content, .content-area, main, article:not(.djtk-mg-card),
    .entry-content, .wp-site-blocks, .elementor, .elementor-section-wrap,
    .elementor-section, .elementor-container, .elementor-widget-wrap,
    .elementor-widget, .e-con, .e-con-inner
),
body.djtk-guest-page-theme--champagne :where(
    #page, .site, #content, .site-content, .content-area, main, article:not(.djtk-mg-card),
    .entry-content, .wp-site-blocks, .elementor, .elementor-section-wrap,
    .elementor-section, .elementor-container, .elementor-widget-wrap,
    .elementor-widget, .e-con, .e-con-inner
) {
    background-color: transparent !important;
    background-image: none !important;
}

body.djtk-guest-page-theme--clear :where(*):has(.djtk-guest-form-theme),
body.djtk-guest-page-theme--champagne :where(*):has(.djtk-guest-form-theme) {
    background-color: transparent !important;
    background-image: none !important;
}

body.djtk-guest-page-theme--clear :where(main, article, .entry-content),
body.djtk-guest-page-theme--clear :where(main, article, .entry-content) :where(h1, h2, h3, h4, h5, h6, p, li, summary),
body.djtk-guest-page-theme--clear :where(main, article, .entry-content) a {
    color: #242931;
}

body.djtk-guest-page-theme--champagne :where(main, article, .entry-content),
body.djtk-guest-page-theme--champagne :where(main, article, .entry-content) :where(h1, h2, h3, h4, h5, h6, p, li, summary),
body.djtk-guest-page-theme--champagne :where(main, article, .entry-content) a {
    color: #45372b;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer),
body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer) * {
    color: #111 !important;
    border-color: rgba(17, 17, 17, .34) !important;
    text-decoration-color: currentColor !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer)
    svg {
    color: #111 !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer)
    svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer)
    svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(.main-header-menu-toggle, .menu-toggle, .ast-mobile-menu-trigger-minimal, .elementor-menu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)
    :where(svg, .ast-mobile-svg) {
    color: #111 !important;
    fill: #111 !important;
    stroke: #111 !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(.main-header-menu-toggle, .menu-toggle, .ast-mobile-menu-trigger-minimal, .elementor-menu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)
    svg *:not([fill="none"]) {
    fill: #111 !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(.main-header-menu-toggle, .menu-toggle, .ast-mobile-menu-trigger-minimal, .elementor-menu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)
    svg [fill="none"] {
    fill: none !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(.main-header-menu-toggle, .menu-toggle, .ast-mobile-menu-trigger-minimal, .elementor-menu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)
    .hamburger-inner,
body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(.main-header-menu-toggle, .menu-toggle, .ast-mobile-menu-trigger-minimal, .elementor-menu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)
    .hamburger-inner::before,
body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(.main-header-menu-toggle, .menu-toggle, .ast-mobile-menu-trigger-minimal, .elementor-menu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)
    .hamburger-inner::after {
    background-color: #111 !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer)
    :where(hr, .wp-block-separator, .elementor-divider-separator) {
    border-color: #111 !important;
    background-color: #111 !important;
}

body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer)::before,
body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer)::after,
body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer) *::before,
body:is(.djtk-guest-page-theme--clear, .djtk-guest-page-theme--champagne)
    :where(#masthead, .site-header, .elementor-location-header, #colophon, .site-footer, .elementor-location-footer) *::after {
    border-color: rgba(17, 17, 17, .34) !important;
}

/* Formular-Komponenten */
.djtk-guest-form-theme {
    --djtk-guest-text: #fff;
    --djtk-guest-muted: rgba(255, 255, 255, .72);
    --djtk-guest-field-bg: #fff;
    --djtk-guest-field-text: #101216;
    --djtk-guest-border: #766c63;
    --djtk-guest-focus: #e6a878;
    --djtk-guest-focus-ring: rgba(230, 168, 120, .35);
    --djtk-guest-button-bg: #fff;
    --djtk-guest-button-text: #000;
    --djtk-guest-button-border: #fff;
    --djtk-guest-button-hover: #cfd2d6;
    --djtk-guest-selected-bg: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    --djtk-guest-suggest-bg: linear-gradient(180deg, rgba(26,29,34,.98), rgba(18,20,24,.96));
    --djtk-guest-item-bg: rgba(255,255,255,.04);
    --djtk-guest-item-hover: rgba(255,255,255,.09);
    --djtk-guest-action-bg: rgba(255,255,255,.08);
    --cf-welcome-surface: linear-gradient(155deg,#25221f,#181614);
    --cf-welcome-text: #f7f3ed;
    --cf-welcome-muted: rgba(247,243,237,.78);
    --cf-welcome-border: rgba(255,255,255,.16);
    --cf-welcome-action-bg: #fff;
    --cf-welcome-action-text: #111;
    --cf-welcome-action-hover: #e8e1d9;
    color: var(--djtk-guest-text);
    box-sizing: border-box;
}

.djtk-guest-form-theme--clear,
.djtk-guest-form-theme--champagne {
    width: min(960px, calc(100% - 24px));
    margin: 1.25rem auto;
    padding: clamp(18px, 4vw, 42px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.djtk-guest-form-theme--clear {
    --djtk-guest-text: #242931;
    --djtk-guest-muted: #666d76;
    --djtk-guest-field-bg: #fff;
    --djtk-guest-field-text: #1d2229;
    --djtk-guest-border: #c9cdd2;
    --djtk-guest-focus: #28333e;
    --djtk-guest-focus-ring: rgba(40, 51, 62, .16);
    --djtk-guest-button-bg: #242b33;
    --djtk-guest-button-text: #fff;
    --djtk-guest-button-border: #242b33;
    --djtk-guest-button-hover: #3a444f;
    --djtk-guest-selected-bg: #fff;
    --djtk-guest-suggest-bg: #fff;
    --djtk-guest-item-bg: #f1f3f4;
    --djtk-guest-item-hover: #e7eaec;
    --djtk-guest-action-bg: #e2e5e8;
    --cf-welcome-surface: #fff;
    --cf-welcome-text: #242931;
    --cf-welcome-muted: #666d76;
    --cf-welcome-border: #c9cdd2;
    --cf-welcome-action-bg: #242b33;
    --cf-welcome-action-text: #fff;
    --cf-welcome-action-hover: #3a444f;
}

.djtk-guest-form-theme--champagne {
    --djtk-guest-text: #45372b;
    --djtk-guest-muted: #786858;
    --djtk-guest-field-bg: rgba(255, 253, 248, .92);
    --djtk-guest-field-text: #392d24;
    --djtk-guest-border: #ccb995;
    --djtk-guest-focus: #9a7040;
    --djtk-guest-focus-ring: rgba(154, 112, 64, .2);
    --djtk-guest-button-bg: #765738;
    --djtk-guest-button-text: #fffaf1;
    --djtk-guest-button-border: #765738;
    --djtk-guest-button-hover: #8b6946;
    --djtk-guest-selected-bg: rgba(255, 253, 248, .82);
    --djtk-guest-suggest-bg: rgba(255, 253, 248, .98);
    --djtk-guest-item-bg: rgba(118, 87, 56, .07);
    --djtk-guest-item-hover: rgba(118, 87, 56, .13);
    --djtk-guest-action-bg: rgba(118, 87, 56, .12);
    --cf-welcome-surface: linear-gradient(145deg,#fffdf8,#f3e8d6);
    --cf-welcome-text: #45372b;
    --cf-welcome-muted: #786858;
    --cf-welcome-border: #ccb995;
    --cf-welcome-action-bg: #765738;
    --cf-welcome-action-text: #fffaf1;
    --cf-welcome-action-hover: #8b6946;
}

.djtk-guest-form-theme--clear .djtk-form,
.djtk-guest-form-theme--champagne .djtk-form {
    width: min(100%, 780px);
}

.djtk-guest-form-theme .djtk-form-head,
.djtk-guest-form-theme .djtk-form-name,
.djtk-guest-form-theme .djtk-event-form-date {
    color: var(--djtk-guest-text) !important;
}

.djtk-guest-form-theme .djtk-guest-form-status {
    margin: 2rem auto;
    color: var(--djtk-guest-text) !important;
    text-align: center;
}

.djtk-guest-form-theme .cf-guest-organizer-link {
    position: relative;
    z-index: 2;
    margin: .65rem auto 1.5rem;
    padding: 0 1rem;
    color: var(--djtk-guest-muted);
    font-size: .72rem;
    line-height: 1.45;
    text-align: center;
}

.djtk-guest-form-theme .cf-guest-organizer-link a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
    text-underline-offset: 3px;
}

.djtk-guest-form-theme .cf-guest-organizer-link a:hover,
.djtk-guest-form-theme .cf-guest-organizer-link a:focus-visible {
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme--champagne .djtk-form-head,
.djtk-guest-form-theme--champagne .djtk-form-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    letter-spacing: .015em;
}

.djtk-guest-form-theme .djtk-form label {
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme .djtk-form input,
.djtk-guest-form-theme .djtk-form textarea {
    border-color: var(--djtk-guest-border);
    background: var(--djtk-guest-field-bg);
    color: var(--djtk-guest-field-text);
}

.djtk-guest-form-theme--clear .djtk-form input,
.djtk-guest-form-theme--clear .djtk-form textarea,
.djtk-guest-form-theme--champagne .djtk-form input,
.djtk-guest-form-theme--champagne .djtk-form textarea {
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}

.djtk-guest-form-theme .djtk-form input:focus,
.djtk-guest-form-theme .djtk-form textarea:focus {
    border-color: var(--djtk-guest-focus);
    box-shadow: 0 0 0 3px var(--djtk-guest-focus-ring);
}

.djtk-guest-form-theme .djtk-submit {
    border-color: var(--djtk-guest-button-border);
    background: var(--djtk-guest-button-bg);
    color: var(--djtk-guest-button-text);
}

.djtk-guest-form-theme--clear .djtk-submit,
.djtk-guest-form-theme--champagne .djtk-submit {
    min-width: 190px;
    padding: .72rem 1.5rem;
    border-radius: 999px;
}

.djtk-guest-form-theme .djtk-submit:hover,
.djtk-guest-form-theme .djtk-submit:focus-visible {
    background: var(--djtk-guest-button-hover);
    color: var(--djtk-guest-button-text);
}

.djtk-guest-form-theme .djtk-extra-link {
    border-color: var(--djtk-guest-button-border);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme--clear .djtk-extra-link,
.djtk-guest-form-theme--champagne .djtk-extra-link {
    border-radius: 999px;
}

.djtk-guest-form-theme .djtk-extra-link:hover,
.djtk-guest-form-theme .djtk-extra-link:focus-visible {
    background: var(--djtk-guest-button-bg);
    color: var(--djtk-guest-button-text);
}

.djtk-guest-form-theme .djtk-spotify-selected {
    border-color: var(--djtk-guest-border);
    background: var(--djtk-guest-selected-bg);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme .djtk-spotify-selected__meta,
.djtk-guest-form-theme .djtk-spotify-selected__album,
.djtk-guest-form-theme .djtk-spotify-suggest__status,
.djtk-guest-form-theme .djtk-spotify-suggest__meta,
.djtk-guest-form-theme .djtk-spotify-suggest__album {
    color: var(--djtk-guest-muted);
}

.djtk-guest-form-theme .djtk-spotify-selected__clear {
    background: var(--djtk-guest-action-bg);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme .djtk-spotify-suggest {
    border-color: var(--djtk-guest-border);
    background: var(--djtk-guest-suggest-bg);
}

.djtk-guest-form-theme .djtk-spotify-suggest__item {
    background: var(--djtk-guest-item-bg);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme .djtk-spotify-suggest__item:hover,
.djtk-guest-form-theme .djtk-spotify-suggest__item:focus {
    background: var(--djtk-guest-item-hover);
}

.djtk-guest-form-theme .djtk-spotify-suggest__action {
    background: var(--djtk-guest-action-bg);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme .djtk-spotify-selected__cover-fallback,
.djtk-guest-form-theme .djtk-spotify-suggest__cover-fallback {
    background: var(--djtk-guest-action-bg);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme--clear .djtk-spotify-link:hover,
.djtk-guest-form-theme--clear .djtk-spotify-link:focus-visible,
.djtk-guest-form-theme--champagne .djtk-spotify-link:hover,
.djtk-guest-form-theme--champagne .djtk-spotify-link:focus-visible {
    color: var(--djtk-guest-focus);
}

.djtk-guest-form-theme--clear .djtk-form-limit-block,
.djtk-guest-form-theme--champagne .djtk-form-limit-block {
    border-color: var(--djtk-guest-border);
    background: var(--djtk-guest-field-bg);
    color: var(--djtk-guest-text);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .1);
}

.djtk-guest-form-theme--clear .djtk-form-limit-block span,
.djtk-guest-form-theme--champagne .djtk-form-limit-block span {
    color: var(--djtk-guest-muted);
}

.djtk-guest-form-theme--clear .djtk-rate-modal,
.djtk-guest-form-theme--champagne .djtk-rate-modal,
.djtk-guest-form-theme--clear .djtk-limit-modal__dialog,
.djtk-guest-form-theme--champagne .djtk-limit-modal__dialog {
    border-color: var(--djtk-guest-border);
    background: var(--djtk-guest-field-bg);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme--clear .djtk-rate-title,
.djtk-guest-form-theme--champagne .djtk-rate-title,
.djtk-guest-form-theme--clear .djtk-limit-modal__dialog h3,
.djtk-guest-form-theme--champagne .djtk-limit-modal__dialog h3,
.djtk-guest-form-theme--clear .djtk-limit-message,
.djtk-guest-form-theme--champagne .djtk-limit-message,
.djtk-guest-form-theme--clear .djtk-limit-close,
.djtk-guest-form-theme--champagne .djtk-limit-close {
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme--clear .djtk-rate-actions .djtk-rate-skip,
.djtk-guest-form-theme--champagne .djtk-rate-actions .djtk-rate-skip {
    border-color: var(--djtk-guest-border);
    background: var(--djtk-guest-item-bg);
    color: var(--djtk-guest-text);
}

.djtk-guest-form-theme--clear > .djtk-event-empty,
.djtk-guest-form-theme--champagne > .djtk-event-empty {
    border-color: var(--djtk-guest-border);
    background: var(--djtk-guest-field-bg);
    color: var(--djtk-guest-text) !important;
}

.djtk-guest-form-theme--clear > .djtk-event-empty strong,
.djtk-guest-form-theme--clear > .djtk-event-empty a,
.djtk-guest-form-theme--champagne > .djtk-event-empty strong,
.djtk-guest-form-theme--champagne > .djtk-event-empty a {
    color: var(--djtk-guest-text) !important;
}

@media (max-width: 640px) {
    .djtk-guest-form-theme--clear,
    .djtk-guest-form-theme--champagne {
        width: calc(100% - 16px);
        margin: .75rem auto;
        padding: 18px 14px 24px;
        border-radius: 0;
    }

    .djtk-guest-form-theme--clear .djtk-form,
    .djtk-guest-form-theme--champagne .djtk-form {
        width: 100%;
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;
    }
}

html.cf-guest-welcome-open,
body.cf-guest-welcome-open {
    overflow: hidden;
}

.djtk-guest-form-theme .cf-guest-welcome[hidden] {
    display: none !important;
}

.djtk-guest-form-theme .cf-guest-welcome {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(8,10,14,.66);
    backdrop-filter: blur(7px) saturate(115%);
    -webkit-backdrop-filter: blur(7px) saturate(115%);
    opacity: 0;
    transition: opacity .18s ease;
}

.djtk-guest-form-theme .cf-guest-welcome.is-open {
    opacity: 1;
}

.djtk-guest-form-theme .cf-guest-welcome__dialog {
    position: relative;
    width: min(100%,460px);
    max-height: min(78vh,620px);
    overflow: auto;
    padding: clamp(24px,5vw,34px);
    box-sizing: border-box;
    border: 1px solid var(--cf-welcome-border);
    border-radius: 24px;
    background: var(--cf-welcome-surface);
    box-shadow: 0 28px 80px rgba(0,0,0,.38);
    color: var(--cf-welcome-text);
    text-align: center;
    opacity: 0;
    transform: translateY(10px) scale(.985);
    transition: opacity .18s ease,transform .18s ease;
}

.djtk-guest-form-theme .cf-guest-welcome.is-open .cf-guest-welcome__dialog {
    opacity: 1;
    transform: none;
}

.djtk-guest-form-theme .cf-guest-welcome__dialog:focus {
    outline: none;
}

.djtk-guest-form-theme .cf-guest-welcome__dialog h2 {
    margin: 0 34px 12px;
    color: var(--cf-welcome-text) !important;
    font-size: clamp(1.35rem,4vw,1.65rem);
    line-height: 1.2;
}

.djtk-guest-form-theme .cf-guest-welcome__dialog p {
    margin: 0;
    color: var(--cf-welcome-muted) !important;
    font-size: 1rem;
    line-height: 1.6;
}

.djtk-guest-form-theme .cf-guest-welcome__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cf-welcome-text);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: .66;
}

.djtk-guest-form-theme .cf-guest-welcome__close:hover,
.djtk-guest-form-theme .cf-guest-welcome__close:focus-visible {
    background: rgba(127,127,127,.14);
    opacity: 1;
    outline: none;
}

.djtk-guest-form-theme .cf-guest-welcome__continue {
    min-width: 150px;
    margin-top: 22px;
    padding: .78rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--cf-welcome-action-bg);
    color: var(--cf-welcome-action-text);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    transition: background .16s ease,transform .16s ease;
}

.djtk-guest-form-theme .cf-guest-welcome__continue:hover,
.djtk-guest-form-theme .cf-guest-welcome__continue:focus-visible {
    background: var(--cf-welcome-action-hover);
    color: var(--cf-welcome-action-text);
    outline: none;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .djtk-guest-form-theme .cf-guest-welcome,
    .djtk-guest-form-theme .cf-guest-welcome__dialog {
        transition: none;
    }
}

/* A compact selected-song card; explicit padding prevents theme button offsets. */
.djtk-form .djtk-spotify-selected { border-radius: 18px; padding: 14px 16px; gap: 14px; }
.djtk-form .djtk-spotify-selected__clear { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; min-width: 36px; min-height: 36px; width: 36px; height: 36px; box-sizing: border-box; line-height: 1; text-align: center; border-radius: 12px; }
.djtk-form .djtk-spotify-selected__clear:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.djtk-form .djtk-field input, .djtk-form .djtk-field textarea { border-radius: 14px; transition: border-color .18s ease, box-shadow .18s ease; }
.djtk-form .djtk-submit-options .djtk-submit { border-radius: 14px; min-height: 52px; font-weight: 600; }

/* Placeholders keep the form quiet; labels remain available to assistive technology. */
.djtk-field-label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.djtk-form input::placeholder, .djtk-form textarea::placeholder { opacity: .72; }
.djtk-paid-inline { display: flex; flex-basis: 100%; align-items: center; gap: 6px; margin-top: 2px; }
.djtk-paid-inline[hidden] { display: none; }
.djtk-paid-inline .djtk-paid-badge { font-size: 12px; font-weight: 650; padding: 3px 8px; border-radius: 6px; background: rgba(200, 166, 245, .16); color: inherit; }
.djtk-paid-inline small { font-size: 11px; opacity: .75; }
.djtk-paid-row > td { background-color: rgba(173, 133, 228, .12) !important; }
.djtk-paid-row.djtk-related > td { background-color: rgba(173, 133, 228, .38) !important; }
.djtk-paid-row > td:first-child { box-shadow: inset 3px 0 #b899e8; }
.djtk-vote-score-head { min-width: 80px; max-width: none; }
.djtk-vote-score-head .djtk-live-sort-trigger { gap: 5px; font-size: 13px; }
.djtk-live-actions { display: inline-grid; width: max-content; min-width: max-content; grid-template-columns: 164px 36px; gap: 6px; align-items: center; }
.djtk-live-actions .djtk-hide-btn, .djtk-live-actions .djtk-paid-refund {
  grid-column: 1; width: 164px; min-width: 164px; max-width: none; height: 36px; min-height: 36px;
  box-sizing: border-box; padding: 6px 10px; margin: 0; border-radius: 7px;
  font: 600 12px/1.2 system-ui, sans-serif; white-space: normal;
  display: inline-flex; align-items: center; justify-content: center;
}
.djtk-live-actions .djtk-hide-btn { grid-row: 1; }
.djtk-live-actions .djtk-copy-request-btn { grid-column: 2; grid-row: 1; width: 36px; min-width: 36px; height: 36px; padding: 0; margin: 0; }
.djtk-live-actions .djtk-paid-refund { grid-row: 2; }

.djtk-live-actions .djtk-paid-accept {
  grid-column: 1; grid-row: 1; width: 164px; height: 36px; min-height: 36px;
  padding: 6px 10px; margin: 0; border-radius: 7px; font: 600 12px/1.2 system-ui, sans-serif;
  background: #cbb3f5; color: #21162e; border: 0; cursor: pointer;
}
tr[data-paid-status="authorized"] .djtk-hide-btn { display: none !important; }

/* Single-line actions should not inflate ordinary request rows. */
.djtk-live-actions:not(:has(.djtk-paid-refund, .djtk-paid-accept)) { grid-template-columns: max-content 28px; gap: 6px; }
.djtk-live-actions:not(:has(.djtk-paid-refund, .djtk-paid-accept)) .djtk-hide-btn {
  width: max-content; min-width: max-content; height: 28px; min-height: 28px; padding: 3px 10px; white-space: nowrap;
}
.djtk-live-actions:not(:has(.djtk-paid-refund, .djtk-paid-accept)) .djtk-copy-request-btn {
  width: 28px; min-width: 28px; height: 28px; min-height: 28px;
}
.djtk-live-actions:not(:has(.djtk-paid-refund, .djtk-paid-accept)) .djtk-copy-request-btn svg { width: 14px; height: 14px; }

/* Mobile guest form: one shared frame, without nested list panels. */
@media (max-width: 620px) {
    body.crowdflow-operation-page--music-form .site-content article.page {
        padding-inline: 0;
    }

    .djtk-form-wrap.djtk-guest-form-theme,
    body.crowdflow-operation-page--music-form .djtk-form-wrap.djtk-guest-form-theme {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-inline: 8px;
        border: 1px solid var(--djtk-guest-border);
        border-radius: 16px;
        background: var(--cf-welcome-surface);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
    }

    .djtk-guest-form-theme .djtk-voting {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
}

/* Archive history: votes and paid wishes, including their refund status. */
.djtk-arch[data-archive-requests] .djtk-archive-votes { width: 64px; min-width: 64px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.djtk-arch[data-archive-requests] tr.djtk-paid-row > td { border-top-color: #b899e8; border-bottom-color: #b899e8; }
.djtk-arch[data-archive-requests] tr.djtk-paid-row > td:first-child { border-left-color: #b899e8; }
.djtk-arch[data-archive-requests] tr.djtk-paid-row > td:last-child { border-right-color: #b899e8; }

.djtk-arch tr.djtk-guest-filtered-out { display: none !important; }
.djtk-archive-guest-filter { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; color: inherit; font-size: 13px; }
.djtk-archive-guest-filter[hidden] { display: none; }
.djtk-archive-guest-filter .djtk-choice-btn { padding: 7px 12px; font-size: 12px; }

/* Secondary note: paid requests remain available beyond the Basic allowance. */
.djtk-live-quota__paid-hint { max-width:42rem; font-size:.75rem; line-height:1.5; font-weight:400; text-align:center; opacity:.8; }
.djtk-live-quota__paid-hint[hidden] { display:none; }

/* Separate public/internal titles while keeping date switches compact. */
.djtk-event-create{grid-template-columns:repeat(2,minmax(0,1fr))}
.djtk-event-create .djtk-event-date-toggle,.djtk-event-edit .djtk-event-date-toggle{display:flex;align-items:center;gap:8px;align-self:center;cursor:pointer;max-width:100%;width:fit-content}
.djtk-event-date-toggle input[type=checkbox]{width:18px;min-width:18px;height:18px;min-height:18px;padding:0;accent-color:#efa76a}
@media(max-width:600px){.djtk-event-create,.djtk-event-detail-panel .djtk-event-edit{grid-template-columns:minmax(0,1fr)}}

/* Separate event: identity, access rules and sharing have distinct rows. */
.djtk-event-detail-panel{max-width:none;border:1px solid #ffffff25;border-radius:16px;background:#242220;padding:22px;margin:0 0 24px;text-align:left;color:#f5f1eb}.djtk-event-settings-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.djtk-event-settings-head h2{font-size:20px!important;color:inherit!important;margin:0!important}.djtk-event-settings-head .cfcc-help{margin:0;font-size:12px;color:#c7bfb6}.djtk-event-detail-main{padding:0;text-align:left}.djtk-event-detail-panel .djtk-event-edit{display:flex;flex-direction:column;gap:18px;max-width:none}.djtk-event-settings-group{border:0;padding:0;margin:0;min-width:0}.djtk-event-settings-group legend{font-size:13px;font-weight:600;color:#e9c8a9;margin:0 0 10px;padding:0}.djtk-event-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}.djtk-event-detail-panel .djtk-event-edit label{font-size:12px;font-weight:400;gap:7px;line-height:1.45;color:#e3dcd4}.djtk-event-detail-panel .djtk-event-edit :is(input:not([type=checkbox]),select){height:44px;min-height:44px;padding:9px 12px;border:1px solid #ffffff32;border-radius:9px;background:#191817;color:#faf7f3;font-size:14px;width:100%}.djtk-event-detail-panel .djtk-event-date-toggle{align-self:end;min-height:44px}.djtk-event-detail-panel .djtk-event-date-toggle input{width:18px;min-height:18px;height:18px;flex:none;accent-color:#ffab66}.djtk-event-settings-save{display:flex;justify-content:flex-end}.djtk-event-detail-panel .djtk-choice-btn{height:auto;min-height:42px;padding:10px 15px;border-radius:9px;line-height:1.4;font-size:13px;white-space:normal}.djtk-event-settings-save .djtk-choice-btn{background:#ffad70!important;color:#21170f!important;border-color:#ffad70!important}.djtk-event-detail-tools{margin:20px 0 0;padding:18px 0 0;border-top:1px solid #ffffff24;justify-content:flex-start;flex-wrap:wrap;gap:10px}.djtk-event-detail-tools .djtk-choice-btn{width:auto;flex:0 1 auto;min-width:0;background:transparent}.djtk-event-profiles{border-top:1px solid #ffffff20;padding-top:14px}.djtk-event-profiles>summary{font-size:13px;cursor:pointer;color:#dbd1c7}.djtk-event-profiles[open]>summary{margin-bottom:12px}.djtk-event-profiles textarea{width:100%;box-sizing:border-box;background:#191817;color:#fff;border:1px solid #ffffff32;border-radius:9px;padding:12px;font:inherit}
@media(max-width:900px){.djtk-event-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.djtk-event-detail-panel{padding:16px}.djtk-event-settings-head{align-items:flex-start;flex-direction:column;gap:5px}.djtk-event-settings-grid{grid-template-columns:minmax(0,1fr)}.djtk-event-detail-panel .djtk-event-edit :is(input:not([type=checkbox]),select){font-size:16px}.djtk-event-detail-tools{display:flex}.djtk-event-detail-tools .djtk-choice-btn{flex:1 1 145px}.djtk-event-settings-save .djtk-choice-btn{width:100%}}
.djtk-event-detail-panel .djtk-event-edit{align-items:stretch}.djtk-event-detail-panel{color-scheme:dark}.djtk-event-detail-tools{max-width:none;width:100%}.djtk-event-detail-tools .djtk-choice-btn{width:auto!important;min-width:0;color:#f5f1eb!important;border-color:#ffffff38;box-shadow:none}.djtk-event-detail-tools .djtk-choice-btn:hover{background:#ffffff0d;transform:none}.djtk-event-detail-panel .djtk-event-settings-group{width:100%}.djtk-event-settings-group:first-of-type .djtk-event-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.djtk-event-settings-group:first-of-type .djtk-event-date-toggle{grid-column:1/-1}
@media(max-width:600px){.djtk-event-settings-group:first-of-type .djtk-event-settings-grid{grid-template-columns:minmax(0,1fr)}}

/* Per-event guest heading, shared by creation and editing. */
.djtk-event-heading-field{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:end;min-width:0}
.djtk-event-heading-field>label{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0}
.djtk-event-heading-field input{width:100%;min-width:0;box-sizing:border-box}
.djtk-event-heading-field .djtk-event-heading-reset{height:44px;margin:0;white-space:nowrap;font-size:13px;padding:8px 13px}
.djtk-event-heading-field>small{grid-column:1/-1;color:#c1bbb6;font-size:12px;line-height:1.5}
.djtk-event-custom-heading{overflow-wrap:anywhere}
@media(max-width:600px){.djtk-event-heading-field{grid-template-columns:minmax(0,1fr)}.djtk-event-heading-field .djtk-event-heading-reset{justify-self:start}}
.djtk-event-heading-field .djtk-event-heading-reset{background:transparent;color:#eee8e2;border:1px solid #68615b;box-shadow:none}
.djtk-event-heading-field .djtk-event-heading-reset:hover{background:#37322e;color:#fff;border-color:#a9907b}

/* Shared compact event editor: essentials first, guest options on demand. */
.djtk-events-wrap .djtk-event-compact{padding:16px 18px;margin-bottom:20px;border-radius:12px;background:#242220;color-scheme:dark}
.djtk-event-compact .djtk-event-settings-head{margin-bottom:14px;gap:12px}
.djtk-event-compact .djtk-event-settings-head h2{font-size:17px!important;line-height:1.3}
.djtk-event-compact .djtk-event-edit{gap:12px;margin:0}
.djtk-event-compact .djtk-event-settings-group:first-of-type .djtk-event-settings-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
.djtk-event-compact .djtk-event-edit label{font-size:12px;gap:5px;margin:0;font-weight:400;line-height:1.35}
.djtk-event-compact .djtk-event-edit :is(input:not([type=checkbox]):not([type=hidden]),select){height:40px;min-height:40px;padding:7px 10px;border-radius:7px;font-size:13px}
.djtk-event-compact .djtk-event-settings-save{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.djtk-event-compact .djtk-event-settings-save .djtk-event-date-toggle{margin-right:auto;min-height:40px;align-self:center;display:flex;gap:8px}
.djtk-event-compact .djtk-event-date-toggle input{accent-color:#ff6a24}
.djtk-event-compact .djtk-event-status-control{width:140px;max-width:100%}
.djtk-event-compact .djtk-choice-btn{min-height:40px;padding:8px 12px;font-size:13px;border-radius:7px;box-shadow:none}
.djtk-event-compact .djtk-event-settings-save>.djtk-choice-btn{background:#ff6a24!important;border-color:#ff6a24!important;color:#11100e!important;align-self:flex-end}
.djtk-event-compact .djtk-event-settings-save>.djtk-choice-btn:is(:hover,:focus-visible){background:#ff8a3d!important;border-color:#ff8a3d!important}
.djtk-event-options{border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;min-width:0}
.djtk-event-options>summary{cursor:pointer;padding:10px 0;color:#e3dcd4;font-size:13px;font-weight:500;list-style-position:inside}
.djtk-event-options-body{display:grid;gap:14px;padding:2px 0 14px;min-width:0}
.djtk-event-options-body>.djtk-event-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.djtk-event-compact .djtk-event-heading-field{gap:6px 10px}
.djtk-event-compact .djtk-event-heading-reset{height:40px;min-height:40px}
.djtk-event-compact .djtk-event-profiles{padding-top:12px}
.djtk-event-compact .djtk-event-profiles textarea{min-height:65px;padding:9px 10px;font-size:13px}
.djtk-event-compact .djtk-event-detail-tools{margin-top:12px;padding-top:12px;gap:8px}
.djtk-event-compact :is(input,select,textarea,button,summary,a):focus-visible{outline:2px solid #ff6a24;outline-offset:3px}
@media(max-width:1000px){.djtk-event-compact .djtk-event-settings-group:first-of-type .djtk-event-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.djtk-events-wrap .djtk-event-compact{padding:14px}.djtk-event-compact .djtk-event-settings-head{margin-bottom:12px}.djtk-event-compact .djtk-event-edit :is(input:not([type=checkbox]):not([type=hidden]),select){font-size:16px;height:44px;min-height:44px}.djtk-event-compact .djtk-event-settings-save .djtk-event-date-toggle{flex-basis:100%;min-height:32px}.djtk-event-compact .djtk-event-status-control{flex:1;width:auto}.djtk-event-compact .djtk-event-settings-save>.djtk-choice-btn{width:auto;flex:1;min-height:44px}.djtk-event-compact .djtk-choice-btn{min-height:44px}.djtk-event-options-body>.djtk-event-settings-grid{grid-template-columns:minmax(0,1fr)}.djtk-event-compact .djtk-event-settings-group:first-of-type .djtk-event-settings-grid{grid-template-columns:minmax(0,1fr)}.djtk-event-compact .djtk-event-heading-reset{height:auto;min-height:44px}}

.djtk-event-compact .cf-dj-links-field>span{display:flex;align-items:center;flex-wrap:wrap;gap:5px;white-space:normal}.djtk-event-compact .cf-dj-links-field>span>small{flex-basis:100%;white-space:normal;line-height:1.45;color:#c7bfb6}

.djtk-event-compact .cf-dj-links-field .cfcc-info{max-width:100%;white-space:normal}.djtk-event-compact .cf-dj-links-field .cfcc-info__content{min-width:0;white-space:normal}
