/* ── Font: Inter Variable ──────────────────────────────────────────────────── */
/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Editor Layout ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--text-m);
    background: var(--bg-body);
    color: var(--text-body);
    overflow: hidden;
    height: 100vh;
}

/* ── Login ─────────────────────────────────────────────────────────────────── */
.hw-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-body);
}

.hw-login__card {
    width: 100%;
    max-width: 36rem;
    gap: var(--space-s);
}

.hw-login__logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-2xs);
}

.hw-login__logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

.hw-login__error {
    background: var(--error-10);
    color: var(--error);
    border: 1px solid var(--error-30);
    border-radius: var(--radius-s);
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--text-s);
}

/* ── Editor Shell ──────────────────────────────────────────────────────────── */
.hw-editor {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ── Panel ─────────────────────────────────────────────────────────────────── */
.hw-panel-outer {
    position: relative;
    display: flex;
    flex-shrink: 0;
    overflow: visible;
    transition: width 0.25s ease;
}

.hw-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-primary);
    height: 100dvh;
    overflow: hidden;
    user-select: none;
    flex: 1;
    min-width: 0;
    width: 100%;
}

.hw-panel__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    border-bottom: 1px solid var(--border-primary);
    background: var(--light-40);
}

/* ── Tab Nav (inside panel header) ────────────────────────────────────────── */
.hw-tabnav {
    display: flex;
    align-items: center;
    padding: 0 var(--space-m);
    gap: var(--space-2xs);
}

.hw-tabnav__logo {
    padding: var(--space-3xs);
    margin-right: var(--space-xs);
    opacity: 0.9;
}

.hw-tabnav__logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.hw-tabnav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 var(--space-2xs);
    border-radius: 0;
    padding-block: 1em;
    padding-inline: 0.7em;
    padding-bottom: calc(0.7em - 3px);
}

.hw-tabnav__btn i {
    font-size: 2.4rem; /* 24px bei 1rem = 10px */
    line-height: 1;
}

.hw-tabnav__btn--active {
    border-bottom-color: var(--primary);
    color: var(--primary);
}

.hw-tabnav__spacer {
    flex: 1;
}

.hw-tabnav__btn--logout:hover {
    background: var(--error-10);
    color: var(--error);
}

.hw-panel__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--dark-20) transparent;
}

.hw-panel__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs) ;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-surface);
}

.hw-panel__footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.hw-panel__action {
    display: inline-flex;
    align-items: center;
    gap: 0.6ch;
    padding: 0.6em 0.9em;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-body);
    font-size: var(--text-s);
}

.hw-panel__action i {
    font-size: 1.8rem;
    line-height: 1;
}

.hw-panel__action--save {
    margin-left: auto;
    background: var(--primary);
    border-color: transparent;
    color: var(--white);
}

.hw-panel__action:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.hw-panel__resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.hw-panel__resize-handle:hover,
.hw-panel__resize-handle:focus-visible {
    background: var(--primary-40);
}

.hw-panel-outer--collapsed .hw-panel__resize-handle {
    cursor: e-resize;
    width: 14px;
}

.hw-panel__collapse-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, background 0.15s, color 0.15s;
    z-index: 11;
    padding: 0;
}

.hw-panel__collapse-btn i {
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.25s ease;
}

.hw-panel__collapse-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Desktop: hover über den Handle */
.hw-panel__resize-handle:hover .hw-panel__collapse-btn,
/* Tablet: Handle via Tap fokussiert → :focus-within macht Button sichtbar */
.hw-panel__resize-handle:focus-within .hw-panel__collapse-btn,
/* Kollabiert: Button immer sichtbar damit man wieder öffnen kann */
.hw-panel-outer--collapsed .hw-panel__collapse-btn {
    opacity: 1;
    pointer-events: auto;
}

.hw-panel-outer--collapsed .hw-panel__collapse-btn  {
    left:150%;
}

/* Pfeil dreht sich wenn Panel kollabiert ist */
.hw-panel-outer--collapsed .hw-panel__collapse-btn i {
    transform: rotate(180deg);
}


/* rotate Hugeicons pause icon for Abschnitte */
.hw-tabnav__btn--sections i {
    transform: rotate(90deg);
}

/* ── Preview ───────────────────────────────────────────────────────────────── */
.hw-preview {
    flex: 1;
    background: var(--dark-10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hw-preview__frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* ── Main Area (right side) ───────────────────────────────────────────────── */
.hw-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-body);
}

.hw-main__content {
    flex: 1;
    padding: var(--space-m);
    overflow: auto;
    background-color: var(--bg-surface);
}

.hw-main__content--preview {
    padding: 0;
    display: flex;
}

.hw-main__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Tab Content ───────────────────────────────────────────────────────────── */
.hw-tab-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
}

.hw-tabtitle {
    font-size: var(--text-m);
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-title);
    margin: 0 0 var(--space-2xs);
}

.hw-tabdescription {
    font-size: var(--text-s);
    line-height:1.5em;
    color: var(--dark-70);
    margin: 0;
}

/* ── Dashboard ─────────────────────────────────────────────────────────────── */
.hw-dash-card {
    gap: var(--space-xs);
}

.hw-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4xs);
    background: var(--dark-5);
    border-radius: var(--radius-s);
    padding: var(--space-xs);
}

.hw-stat__value {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--primary);
}

.hw-stat__label {
    font-size: var(--text-xs);
    color: var(--dark-60);
}

.hw-dash-actions {
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--space-m);
}

.dashboard_panel_logo {
    transition: all 0.4s ease;
}
.dashboard_panel_logo:hover {
    transform:scale(1.05);
}

/* ── Form Fields ───────────────────────────────────────────────────────────── */
.hw-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.hw-field__label {
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--dark-70);
    letter-spacing: 0.04em;
}

.hw-field__input {
    width: 100%;
}

.hw-var-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: var(--space-xs) 0;
    border-top: 1px solid var(--border-primary);
}

.hw-var-hint__label {
    font-size: var(--text-s);
    color: var(--dark-50);
    width: 100%;
}

.hw-var-hint code {
    background: var(--light-10);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: var(--text-s);
    cursor: pointer;
    user-select: none;
}

.hw-var-hint code:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.hw-var-hint--editor {
    margin-top: var(--space-xs);
    border-top: none;
}

.hw-var-toggle {
    padding: var(--space-xs) 0;
}

.hw-var-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: var(--text-s);
    color: var(--dark-50);
    cursor: pointer;
}

.hw-var-toggle__btn:hover {
    color: var(--text-body);
    background-color:unset;
}

.hw-var-toggle__btn--active {
    color: var(--primary);
}

/* ── Statusbar ─────────────────────────────────────────────────────────────── */
.hw-panel__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-surface);
}

.hw-panel__footer-row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
}

/* ── Discard button ── */
.hw-discard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    border-radius: var(--radius-s);
    font-size: var(--text-m);
    cursor: pointer;
    border: 1px solid var(--border-primary);
    background: var(--dark-5);
    color: var(--dark-40);
    transition: all 0.2s ease;
}
.hw-discard-btn:disabled { opacity: 0.25; cursor: default; }
.hw-discard-btn:not(:disabled):hover { background: var(--error-10); color: var(--error); border-color: var(--error-30); }

/* ── Save button ── */
.hw-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4xs);
    flex: 1;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-s);
    font-size: var(--text-s);
    font-weight: 500;
    cursor: default;
    border: 1px solid var(--border-primary);
    background: var(--dark-5);
    color: var(--dark-30);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.hw-save-btn:disabled { cursor: default; }
.hw-save-btn--dirty { background: var(--primary); color: white; border-color: var(--primary-d-1); cursor: pointer; opacity: 1 !important; }
.hw-save-btn--dirty:hover { background: var(--primary-d-1); }
.hw-save-btn--ok { background: var(--success-10); color: var(--success); border-color: var(--success-30); cursor: default; opacity: 1 !important; }
.hw-save-btn__dot { font-size: 0.55em; line-height: 1; opacity: 0.85; }
@keyframes hw-spin { to { transform: rotate(360deg); } }
.hw-save-btn__spin { animation: hw-spin 0.9s linear infinite; }
.hw-spin i { display: inline-block; animation: hw-spin 0.9s linear infinite; }

/* ── Language selector (Dashboard card) ── */
.hw-lang-selector {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}
.hw-lang-selector__btn {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    border: 1px solid var(--border-primary);
    background: var(--dark-5);
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
}
.hw-lang-selector__btn:hover { border-color: var(--primary); background: var(--primary-10); }
.hw-lang-selector__btn--active { border-color: var(--primary); background: var(--primary-20); color: var(--primary); }
.hw-lang-selector__code { font-weight: 700; font-size: var(--text-s); }
.hw-lang-selector__label { font-size: var(--text-xs); opacity: 0.8; }
/* ── Sections Tab ──────────────────────────────────────────────────────────── */
.hw-sections-header {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.hw-sections-header .hw-tabtitle {
    margin: 0;
    flex: 1;
}

.hw-sections-add-btn {
    display: flex;
    align-items: center;
    width:100%;
    gap: 0.5ch;
    padding: 0.5em 0.9em;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-s);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.hw-sections-add-btn:hover { background: var(--primary-d-2); }
.hw-sections-add-btn i { font-size: 1.6rem; }

/* ── Section List ──────────────────────────────────────────────────────────── */
.hw-section-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    color:var(--light-90);
}

.hw-section-card {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
    background: var(--dark-90);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius);
    cursor: default;
    transition: border-color 0.15s;
}
.hw-section-card:hover { border-color: var(--primary-40); }
.hw-section-card--hidden { opacity: 0.5; }

.hw-section-card__handle {
    cursor: grab;
    color: var(--light-40);
    line-height: 1;
    padding: 0 var(--space-4xs);
}
.hw-section-card__handle:active { cursor: grabbing; }
.hw-section-card__handle i { font-size: 1.8rem; }

.hw-section-card__name {
    flex: 1;
    font-size: var(--text-s);
    font-weight: 500;
}

.hw-section-card__actions {
    display: flex;
    gap: var(--space-xs);
}

.hw-section-card__btn {
    padding: var(--space-4xs);
    color: var(--light-80);
    border-radius: var(--radius-xs);
    transition: color 0.15s, background-color 0.15s;
    background-color:transparent;
}
.hw-section-card__btn:hover { background-color:var(--primary); color:white;}
.hw-section-card__btn i { font-size: 1.8rem; }

.hw-sections-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-l);
    color: var(--dark-40);
    border: 2px dashed var(--border-primary);
    border-radius: var(--radius);
    text-align: center;
}
.hw-sections-empty i { font-size: 3.2rem; }

/* ── Section Picker ────────────────────────────────────────────────────────── */
.hw-section-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
    gap: var(--space-xs);
    width:100%;
}

.hw-section-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--card-gap);
    padding: var(--space-s);
    background: var(--dark-90);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius);
    color: var(--light-80);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.hw-section-picker-item:hover {
    border-color: var(--primary);
    background: var(--dark);
}

.hw-section-picker-item__icon {
    font-size: var(--text-xl);
    line-height: 1;
}

.hw-section-picker-item__label {
    font-size: var(--text-s);
    font-weight: 400;
    line-height: 1.2;
}

.hw-section-picker-item__desc {
    font-size: var(--text-s);
    color: currentColor;
    line-height: 1.3;
    display:none;
}

/* ── Section Editor ────────────────────────────────────────────────────────── */
.hw-section-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.hw-section-editor__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-m);
    border-bottom: 1px solid var(--border-primary);
    background: var(--light-10);
    flex-shrink: 0;
}
.hw-section-editor__header--flush {
    padding-inline: 0;
}

.hw-section-editor__fields {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-s) var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    scrollbar-width: thin;
    scrollbar-color: var(--dark-20) transparent;
}

.hw-section-editor__footer {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    border-top: 1px solid var(--border-primary);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.hw-section-editor__delete {
    margin-top: var(--space-xs);
    padding-top: var(--space-s);
    border-top: 1px solid var(--border-primary);
}

.hw-back-btn, .hw-section-editor__header button.hw-back-btn {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-2xs);
    font-size: var(--text-m);
    font-weight: 600;
    color: var(--text-title);
    padding: var(--space-4xs) 0;
    min-width: 0;
}
.hw-back-btn i {
    font-size: 1.8rem;
    color: var(--dark-50);
    flex-shrink: 0;
}
.hw-back-btn .hw-section-editor__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight:normal;
}
.hw-back-btn:hover { color: var(--primary); }
.hw-back-btn:hover i { color: var(--primary); }

.hw-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    padding: 0.5em 1em;
    font-size: var(--text-s);
    background: transparent;
    border: 1px solid var(--error-30);
    color: var(--error);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}
.hw-delete-btn:hover, .hw-delete-btn--confirm {
    background: var(--error-10);
    border-color: var(--error);
}
.hw-delete-btn i { font-size: 1.6rem; }

/* ── Field Group ───────────────────────────────────────────────────────────── */
.hw-field-group {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius);
    overflow: hidden;
}

.hw-field-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2xs) var(--space-xs);
    background: var(--light-10);
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-title);
    transition: background 0.15s;
}
.hw-field-group__header:hover { background: var(--primary-10); }
.hw-field-group__header--static { cursor: default; }
.hw-field-group__header--static:hover { background: var(--light-10); }

.hw-field-group__chevron {
    font-size: 1.6rem;
    transition: transform 0.2s;
}
.hw-field-group--collapsed .hw-field-group__chevron { transform: rotate(-90deg); }

.hw-field-group__body {
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* ── Color Field ───────────────────────────────────────────────────────────── */
.hw-color-field {
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.hw-color-field .hw-field__input {
    flex:1;
}

/* Farbvorschau-Quadrat links */
.hw-color-swatch-preview {
    width: 3.2rem;
    height: 3.2rem;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-primary);
}

/* Select nimmt den restlichen Platz */
.hw-color-select {
    flex: 1;
    min-width: 0;
}

/* Nativer Color-Picker wenn "Eigene Farbe" gewählt */
.hw-color-native {
    width: 3.2rem;
    height: 3.2rem;
    flex-shrink: 0;
    padding: 2px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xs);
    background: transparent;
    cursor: pointer;
}

/* Hex-Eingabe neben dem nativen Picker */
.hw-color-hex {
    width: 100%;
    flex-shrink: 0;
}

/* ── Range Field ───────────────────────────────────────────────────────────── */
.hw-range-field {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hw-range {
    flex: 1;
    accent-color: var(--primary);
    height: 4px;
}

.hw-range-value {
    font-size: var(--text-s);
    color: var(--dark-60);
    min-width: 3ch;
    text-align: right;
}
.hw-range-value small {
    font-size: 0.8em;
    opacity: 0.7;
}

/* ── Image Position (image-pos): kompakte X/Y-Slider ──────────────────────── */
.hw-imgpos-sliders {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.hw-imgpos-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hw-imgpos-axis {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--dark-60);
    min-width: 1rem;
    text-align: center;
}

/* ── Toggle ────────────────────────────────────────────────────────────────── */
.hw-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    margin-left:auto;
}

.hw-toggle__input { display: none; }

.hw-toggle__track {
    position: relative;
    width: 3.8rem;
    height: 2rem;
    background: var(--dark-20);
    border-radius: var(--radius-full);
    transition: background 0.2s;
    flex-shrink: 0;
}

.hw-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.4rem;
    height: 1.4rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.hw-toggle__input:checked ~ .hw-toggle__track { background: var(--primary); }
.hw-toggle__input:checked ~ .hw-toggle__track .hw-toggle__thumb { transform: translateX(1.8rem); }

.hw-toggle--small .hw-toggle__track { width: 3rem; height: 1.6rem; }
.hw-toggle--small .hw-toggle__thumb { width: 1rem; height: 1rem; }
.hw-toggle--small .hw-toggle__input:checked ~ .hw-toggle__track .hw-toggle__thumb { transform: translateX(1.4rem); }

/* ── Textarea Field ────────────────────────────────────────────────────────── */
.hw-field__textarea {
    resize: vertical;
    min-height: 8rem;
}

/* ── Image Field ───────────────────────────────────────────────────────────── */
.hw-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    width: 100%;
    min-height: 8rem;
    background: var(--dark-5);
    border: 2px dashed var(--border-primary);
    border-radius: var(--radius);
    color: var(--dark-40);
    font-size: var(--text-s);
    cursor: pointer;
    transition: all 0.2s;
}
.hw-image-placeholder i { font-size: 2.8rem; }
.hw-image-placeholder:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-5); }

.hw-image-preview {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-primary);
}

.hw-image-preview__img {
    width: 100%;
    height: 14rem;
    object-fit: cover;
    display: block;
}

.hw-image-preview__actions {
    display: flex;
    gap: var(--space-3xs);
    padding: var(--space-3xs);
    background: var(--light-20);
    backdrop-filter: blur(4px);
}

.hw-image-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4ch;
    padding: 0.4em 0.7em;
    font-size: var(--text-xs);
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--text-body);
    transition: all 0.15s;
}
.hw-image-action--remove:hover { border-color: var(--error); background: var(--error); color: var(--white); }
.hw-image-action i { font-size: 1.4rem; }

/* ── Repeater ──────────────────────────────────────────────────────────────── */
.hw-repeater {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.hw-repeater__item {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius);
    overflow: visible;
    position: relative;
}

.hw-repeater__item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3xs) var(--space-xs);
    background: var(--light-10);
    cursor: pointer;
    user-select: none;
}
.hw-repeater__item-header--open {
    border-bottom: 1px solid var(--border-primary);
}

.hw-repeater__item-label {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
}
.hw-repeater__item-num {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--dark-50);
    white-space: nowrap;
}
.hw-repeater__item-preview {
    font-size: var(--text-xs);
    color: var(--dark-70);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.hw-repeater__chevron {
    font-size: 1.4rem;
    color: var(--dark-40);
    margin-left: var(--space-4xs);
}

.hw-repeater__item-actions {
    display: flex;
    gap: var(--space-4xs);
}

.hw-editor .hw-repeater__btn {
    padding: var(--space-4xs);
    color: var(--dark-40);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
}
.hw-editor .hw-repeater__btn i { font-size: 1.6rem; }
.hw-editor .hw-repeater__btn:hover:not(:disabled) { color: var(--primary); }
.hw-editor .hw-repeater__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.hw-editor .hw-repeater__btn--delete:hover { color: var(--error) !important; }
.hw-editor .hw-repeater__btn--confirm { color: var(--error) !important; }

.hw-repeater__confirm-text {
    font-size: var(--text-xs);
    font-weight: 600;
}

.hw-repeater__item-fields {
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.hw-repeater__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5ch;
    width: 100%;
    padding: var(--space-2xs);
    background: transparent;
    border: 2px dashed var(--border-primary);
    border-radius: var(--radius);
    color: var(--dark-50);
    font-size: var(--text-s);
    cursor: pointer;
    transition: all 0.2s;
}
.hw-repeater__add i { font-size: 1.6rem; }
.hw-repeater__add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-5); }

/* ── Emoji Picker ──────────────────────────────────────────────────────────── */
.hw-emoji-picker { position: relative; }

.hw-emoji-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
    background: var(--dark-5);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    cursor: pointer;
    color: var(--text-body);
    transition: border-color 0.2s;
}
.hw-emoji-trigger:hover { border-color: var(--primary); }

.hw-emoji-current { font-size: 2rem; line-height: 1; }
.hw-emoji-placeholder { color: var(--dark-40); font-size: 1.8rem; }

.hw-emoji-dropdown {
    /* position/top/left/z-index via inline dropdownStyle gesetzt */
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.15));
}

/* ── Media Modal ───────────────────────────────────────────────────────────── */
.hw-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-m);
}

.hw-modal {
    background: var(--bg-body);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 72rem;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hw-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-s) var(--space-m);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.hw-modal__close {
    color: var(--dark-50);
    font-size: var(--text-m);
    padding: var(--space-4xs);
}
.hw-modal__close i { font-size: 2rem; }
.hw-modal__close:hover { color: var(--error); }

.hw-modal__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-primary);
    padding: 0 var(--space-m);
    flex-shrink: 0;
}

.hw-modal__tab {
    padding: var(--space-2xs) var(--space-s);
    background-color: transparent;
    border: none;
    border-radius: unset;
    border-bottom: 2px solid transparent;
    color: var(--dark-50);
    font-size: var(--text-s);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
}
.hw-modal__tab:hover { color: var(--dark); background-color:transparent; }
.hw-modal__tab--active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.hw-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-m);
    scrollbar-width: thin;
}

.hw-upload-error {
    margin-top: var(--space-xs);
    font-size: var(--text-s);
    color: var(--error, #c0392b);
    text-align: center;
}

.hw-modal__empty {
    text-align: center;
    padding: var(--space-xl);
    color: var(--dark-40);
    font-size: var(--text-s);
}

.hw-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-xs);
}

.hw-media-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4xs);
    background: var(--dark-5);
    border: 2px solid transparent;
    border-radius: var(--radius-s);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s;
    text-align: left;
    padding: 0;
}
.hw-media-item:hover { border-color: var(--primary); }
.hw-media-item--active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}

.hw-media-section-label {
    font-size: var(--text-xs);
    color: var(--dark-60);
    margin: 0 0 .5rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.hw-media-section-label--spaced { margin-top: 1.5rem; }

.hw-media-item__img {
    width: 100%;
    height: 9rem;
    object-fit: cover;
    display: block;
}

.hw-media-item__name {
    font-size: var(--text-xs);
    color: var(--dark-60);
    padding: var(--space-4xs) var(--space-3xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── UI Language Switcher (Panel Footer) ───────────────────────────────────── */
.hw-panel__lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-s);
    border-top: 1px solid var(--border-primary);
    background: var(--light-5);
}

.hw-lang-btn {
    font-size: var(--text-xs);
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--dark-50);
    transition: all 0.15s;
}
.hw-lang-btn:hover { border-color: var(--primary); color: var(--white); }
.hw-lang-btn--active { background: var(--primary); border-color: var(--primary); color: var(--white); }


/* ── Dashboard Main Content ────────────────────────────────────────────────── */
.hw-dash-main {
    padding: var(--space-m);
    max-width: 100%;
    overflow-y: auto;
    height: 100%;
}

/* ── FieldGroup ────────────────────────────────────────────────────────────── */
.hw-styling-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

/* Unit: primary field (flex:1) + paint-board icon button nebeneinander */
.hw-field-unit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
}
.hw-field-unit > .hw-field {
    flex: 1;
    min-width: 0;
}

/* Paint-board Icon-Button — flex-shrink:0, Höhe via align-items:flex-start oben */
.hw-unit-style-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--dark-50);
    cursor: pointer;
    font-size: 1.3rem;
    padding: 0;
    margin-top:auto;
    transition: all 0.15s;
}
.hw-unit-style-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-10);
}
.hw-unit-style-btn--open {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-10);
}

.hw-unit-style-btn:active,
button.hw-section-card__btn:active,
.hw-sections-add-btn:active,
.hw-panel__body :where(button, .button):active
{
    transform:scale(0.95);
}


/* Eingeklappter Bereich unterhalb des primary-Feldes */
.hw-unit-style-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--dark-5);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    margin-top: calc(var(--space-3xs) * -1 + 2px);
}

/* "Erweitertes Styling" — beschrifteter Toggle-Button für sektion-weite Props */
.hw-adv-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2xs) var(--space-xs);
    background: var(--dark-5);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    color: var(--dark-60);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: var(--space-3xs);
}
.hw-adv-toggle i { font-size: 1.1rem; }
.hw-adv-toggle:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-10); }
.hw-adv-toggle--open { border-color: var(--primary); color: var(--primary); background: var(--primary-10); }

.hw-styling-group__extras {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--dark-10);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius);
}

/* ── 3×3 Background-Position Grid ─────────────────────────────────────────── */
.hw-bgpos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    width: fit-content;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.hw-bgpos-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    background: var(--dark-5);
    border: none;
    color: var(--dark-40);
    cursor: pointer;
    transition: all 0.15s;
}
.hw-bgpos-btn i { font-size: 1.8rem; }
.hw-bgpos-btn:hover { background: var(--primary-10); color: var(--primary); }
.hw-bgpos-btn--active { background: var(--primary); color: #fff; }
.hw-bgpos-btn--active:hover { background: var(--primary-d-1); }

/* ── Icon Button Group (align, text-align, image-align) ────────────────────── */
.hw-btngroup {
    display: inline-flex;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-ui);
    overflow: hidden;
    width:fit-content;
}

.hw-btngroup__btn {
    display: flex;
    font-size: var(--text-xs);
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 3.2rem;
    background: var(--light-5);
    border: none;
    border-radius:0;
    color: var(--dark-40);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.hw-btngroup__btn i { font-size: 1.8rem; }
.hw-btngroup__btn:hover { background: var(--primary-10); color: var(--primary); }
.hw-btngroup__btn--active { background: var(--primary); color: #fff; }
.hw-btngroup__btn--active:hover { background: var(--primary-d-1); }

/* ── Stepper (− Label +) ───────────────────────────────────────────────────── */
.hw-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-ui);
    overflow: hidden;
    width:fit-content;
}
.hw-stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    background: var(--light-5);
    border: none;
    color: var(--dark-40);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.hw-stepper__btn i { font-size: 1.8rem; }
.hw-stepper__label i { font-size: 1.6rem; }
.hw-stepper__btn:hover:not(:disabled) { background: var(--primary-10); color: var(--primary); }
.hw-stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.hw-stepper__label {
    min-width: 3.5rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--dark-80);
    padding: 0 0.2rem;
    border-left: 1px solid var(--border-primary);
    border-right: 1px solid var(--border-primary);
}

/* ── Toggle labeled variant ────────────────────────────────────────────────── */
.hw-toggle--labeled {
    flex-direction: row;
    gap: var(--space-xs);
}
.hw-toggle__label {
    font-size: var(--text-s);
    color: var(--text-body);
}

.hw-field .hw-toggle--labeled {
    margin-left:initial;
}


/* ── Color field locked state ───────────────────────────────────────────────── */
/* Swatch stays full opacity – color remains clearly visible when locked        */
xx.hw-color-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hw-color-text-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.hw-color-text-wrap .hw-color-text {
    width: 100%;
    padding-right: 2.8rem;
}

/* Lock icon inside text input */
.hw-color-text-lock {
    position: absolute;
    right: var(--space-xs);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--dark-30);
    pointer-events: none;
    line-height: 1;
}

/* Locked: only text dimmed + no pointer events. Swatch untouched. */
.hw-color-text-wrap--locked .hw-color-text {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

/* Swatch when locked: no pointer events but full color visible */
input[type="color"].hw-color-swatch:disabled {
    opacity: 1 !important;
    cursor: default;
    pointer-events: none;
}

/* ── Gallery – Panel (Albums) ──────────────────────────────────────────────── */
.hw-albums {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.hw-album-filter-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    width: 100%;
    padding: var(--space-2xs) var(--space-xs);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    color: var(--text-body);
    font-size: var(--text-s);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.hw-album-filter-btn i {
    font-size: 1.8rem;
    flex-shrink: 0;
    color: var(--dark-40);
}

.hw-album-filter-btn__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hw-album-filter-btn:hover {
    background: var(--dark-5);
}

.hw-album-filter-btn--active {
    background: var(--primary-10);
    color: var(--primary);
    font-weight: 500;
}

.hw-album-filter-btn--active i {
    color: var(--primary);
}

.hw-album-count {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--dark-40);
    background: var(--dark-5);
    border-radius: var(--radius-full);
    padding: 0.1em 0.5em;
    flex-shrink: 0;
}

.hw-album-filter-btn--active .hw-album-count {
    background: var(--primary-20);
    color: var(--primary);
}

/* Album row: filter btn + action buttons side by side */
.hw-album-row {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: var(--radius-s);
}

.hw-album-row:hover .hw-album-row__actions {
    opacity: 1;
}

.hw-album-row .hw-album-filter-btn {
    flex: 1;
    min-width: 0;
}

.hw-album-row__edit {
    flex: 1;
    font-size: var(--text-s);
}

.hw-album-row__actions {
    display: flex;
    gap: 0;
    opacity: 0.8;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.hw-album-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--radius-s);
    color: var(--dark-40);
    font-size: 1.6rem;
}

.hw-album-action:hover {
    background: var(--dark-5);
    color: var(--text-body);
}

.hw-album-action--delete:hover,
.hw-album-action--confirm {
    color: var(--error) !important;
    background: var(--error-10) !important;
    border-color: var(--error);
}

.hw-guest-row__actions .hw-album-action {
    color:white;
}
.hw-guest-row__actions .hw-album-action:hover {
    background:var(--primary-d-1);
}

/* New album input row */
.hw-album-create {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--border-primary);
}

.hw-album-create .hw-field__input {
    flex: 1;
    font-size: var(--text-s);
}

/* ── Gallery – Main ────────────────────────────────────────────────────────── */
.hw-gallery-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    height: 100%;
}

/* Upload zone */
.hw-upload-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    flex-wrap: wrap;
    padding: var(--space-m);
    border: 2px dashed var(--border-primary);
    border-radius: var(--radius);
    background: var(--dark-3, var(--bg-surface));
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}

.hw-upload-zone:hover,
.hw-upload-zone--over {
    border-color: var(--primary);
    background: var(--primary-5, color-mix(in srgb, var(--primary) 5%, transparent));
}

.hw-upload-zone--busy {
    cursor: default;
    flex-direction: column;
    gap: var(--space-2xs);
}

.hw-upload-zone__icon {
    font-size: 2.8rem;
    color: var(--dark-30);
}

.hw-upload-zone--over .hw-upload-zone__icon {
    color: var(--primary);
}

.hw-upload-zone__label {
    font-size: var(--text-s);
    color: var(--dark-60);
}

.hw-upload-input {
    display: none;
}

/* Progress bar */
.hw-upload-bar {
    width: 100%;
    max-width: 36rem;
    height: 6px;
    background: var(--dark-10);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.hw-upload-bar__fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* Empty state */
.hw-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-2xl) var(--space-m);
    color: var(--dark-30);
    text-align: center;
}

.hw-gallery-empty i {
    font-size: 4rem;
}

.hw-gallery-empty p {
    margin: 0;
    font-size: var(--text-s);
}

/* Image grid */
.hw-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--space-2xs);
}

/* Image item */
.hw-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-s);
    overflow: hidden;
    background: var(--dark-5);
    cursor: grab;
}

.hw-gallery-item:active {
    cursor: grabbing;
}

.hw-gallery-item--ghost {
    opacity: 0.4;
}

.hw-gallery-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.hw-gallery-item:hover .hw-gallery-item__img {
    transform: scale(1.04);
}

/* ── Album drag handle (SortableJS) ── */
.hw-album-row__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.8rem;
    flex-shrink: 0;
    color: var(--dark);
    font-size: 1.6rem;
    cursor: grab;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.hw-album-row:hover .hw-album-row__handle {
    opacity: 1;
}

.hw-album-row__handle:active {
    cursor: grabbing;
}

.hw-album-row__handle--edit {
    cursor: default;
    pointer-events: none;
}

/* ── Album drop target (image drag-to-album) ── */
.hw-album-filter-btn--droptarget {
    outline: 2px dashed var(--primary-40, color-mix(in srgb, var(--primary) 40%, transparent));
    outline-offset: -2px;
}

.hw-album-filter-btn--drop {
    background: var(--primary-10) !important;
    color: var(--primary) !important;
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.hw-album-filter-btn--drop i {
    color: var(--primary) !important;
}

/* Drag hint shown in panel when images are being dragged */
.hw-album-drag-hint {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--text-xs);
    color: var(--primary);
    background: var(--primary-5, color-mix(in srgb, var(--primary) 5%, transparent));
    border-radius: var(--radius-s);
    border: 1px dashed var(--primary-30, color-mix(in srgb, var(--primary) 30%, transparent));
    margin-bottom: var(--space-2xs);
}

.hw-album-drag-hint i {
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* ── Selection state on image item ── */
.hw-gallery-item--selected {
    outline: 2.5px solid var(--primary);
    outline-offset: -2.5px;
}

.hw-gallery-item--selected .hw-gallery-item__img {
    transform: scale(1.0) !important;
}

/* Sort mode banner */
.hw-sort-banner {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    background: var(--primary-10);
    border: 1px solid var(--primary-20, color-mix(in srgb, var(--primary) 20%, transparent));
    border-radius: var(--radius);
    font-size: var(--text-s);
    color: var(--primary);
}

.hw-sort-banner i {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.hw-sort-banner span {
    flex: 1;
}

/* Sort mode: grab cursor, suppress scale-on-hover */
.hw-gallery-grid--sort .hw-gallery-item {
    cursor: grab;
}

.hw-gallery-grid--sort .hw-gallery-item:active {
    cursor: grabbing;
}

.hw-gallery-grid--sort .hw-gallery-item__img {
    transform: none !important;
    transition: none;
}

/* Item being dragged in sort mode */
.hw-gallery-item--dragging {
    opacity: 0.35;
}

/* Drop position indicator — fixed stripe that sits in the gap between items */
.hw-drop-indicator {
    position: fixed;
    width: 3px;
    background: var(--primary);
    border-radius: 2px;
    pointer-events: none;
    z-index: 999;
    transform: translateX(-50%);
    /* Extend slightly above/below the item for visual clarity */
    margin-top: -3px;
    box-sizing: content-box;
    padding: 3px 0;
}

/* Checkmark overlay (top-left) */
.hw-gallery-item__check {
    position: absolute;
    top: var(--space-3xs);
    left: var(--space-3xs);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.12s, transform 0.12s;
    pointer-events: none;
}

.hw-gallery-item--selected .hw-gallery-item__check {
    opacity: 1;
    transform: scale(1);
}

/* Actions overlay (bottom, delete only) */
.hw-gallery-item__actions {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: var(--space-3xs);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.hw-gallery-item:hover .hw-gallery-item__actions {
    opacity: 1;
    pointer-events: auto;
}

.hw-gallery-item--selected .hw-gallery-item__actions {
    opacity: 1;
    pointer-events: auto;
}

.hw-gallery-item__del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-s);
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background 0.15s;
}

.hw-gallery-item__del:hover,
.hw-gallery-item__del--confirm {
    background: var(--error);
}

/* ── Selection toolbar ── */
.hw-selection-bar {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    background: var(--primary-10);
    border: 1px solid var(--primary-20, color-mix(in srgb, var(--primary) 20%, transparent));
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.hw-selection-bar__count {
    font-size: var(--text-s);
    color: var(--primary);
    font-weight: 500;
    flex-shrink: 0;
}

.hw-selection-bar__album {
    flex: 1;
    min-width: 12rem;
    font-size: var(--text-s);
    padding: 0.35em 0.6em;
    border-radius: var(--radius-s);
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-body);
    cursor: pointer;
}

.hw-selection-bar__actions {
    display: flex;
    gap: var(--space-2xs);
    flex-shrink: 0;
}

/* Album indicator dot (bottom-right, shown when image has album) */
.hw-gallery-item__dot {
    position: absolute;
    bottom: var(--space-3xs);
    right: var(--space-3xs);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    border: 1.5px solid rgba(255,255,255,0.8);
    pointer-events: none;
}

.hw-gallery-item:hover .hw-gallery-item__dot,
.hw-gallery-item--selected .hw-gallery-item__dot {
    opacity: 0;
}

/* Selection bar extras */
.hw-selection-bar__spacer {
    flex: 1;
}

.hw-selection-bar__delete {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0.35em 0.75em;
    border-radius: var(--radius-s);
    border: 1px solid var(--error-30, color-mix(in srgb, var(--error) 30%, transparent));
    background: transparent;
    color: var(--error);
    font-size: var(--text-s);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.hw-selection-bar__delete:hover {
    background: var(--error-10, color-mix(in srgb, var(--error) 10%, transparent));
}

.hw-selection-bar__delete--confirm {
    background: var(--error);
    color: #fff;
    border-color: var(--error);
}

.hw-selection-bar__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    border-radius: var(--radius-s);
    color: var(--dark-40);
    font-size: 1.6rem;
}

/* ── Lasso rubber-band ── */
.hw-lasso {
    position: fixed;
    border: 1.5px solid var(--primary);
    background: var(--primary-10, color-mix(in srgb, var(--primary) 10%, transparent));
    border-radius: 2px;
    pointer-events: none;
    z-index: 9999;
}

/* ── Upload zone – compact mode (when images already exist) ── */
.hw-upload-zone--compact {
    padding: var(--space-2xs) var(--space-s);
    border-style: solid;
    border-width: 1px;
    min-height: unset;
    gap: var(--space-xs);
}

.hw-upload-zone--compact .hw-upload-zone__icon {
    font-size: 1.8rem;
}

.hw-upload-zone--compact .hw-upload-zone__label {
    font-size: var(--text-xs);
    color: var(--dark-40);
}

/* expand back to full-size on drag-over even in compact mode */
.hw-upload-zone--compact.hw-upload-zone--over {
    padding: var(--space-m);
    border-style: dashed;
    border-width: 2px;
    min-height: 10rem;
}

.hw-upload-zone__btns {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
    flex-shrink: 0;
}

.hw-upload-zone__refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--radius-s);
    font-size: 1.6rem;
    color: var(--dark-40);
}

.hw-upload-zone__refresh:hover:not(:disabled) {
    color: var(--text-body);
    background: var(--dark-5);
}

.hw-upload-zone__refresh:disabled {
    opacity: 0.5;
    cursor: default;
}

.hw-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    white-space: nowrap;
}

/* ── Upload errors ── */
.hw-upload-errors {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    font-size: var(--text-s);
    color: var(--error);
    background: var(--error-10, color-mix(in srgb, var(--error) 10%, transparent));
    border: 1px solid var(--error-20, color-mix(in srgb, var(--error) 20%, transparent));
    border-radius: var(--radius-s);
}

.hw-upload-errors i {
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* ── Drag badge ── */
.hw-drag-badge {
    position: fixed;
    top: -100px;
    left: -100px;
    display: inline-flex;
    align-items: center;
    padding: 0.4em 0.9em;
    background: var(--primary);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ── Lightbox ── */
.hw-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter:blur(10px);
}

.hw-lightbox__img {
    max-width:  calc(100vw - 12rem);
    max-height: calc(100vh - 6rem);
    object-fit: contain;
    border-radius: var(--radius-s);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
    user-select: none;
}

.hw-lightbox__close {
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.hw-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.hw-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.hw-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.hw-lightbox__nav:disabled {
    opacity: 0.2;
    cursor: default;
}

.hw-lightbox__nav--prev { left: var(--space-m); }
.hw-lightbox__nav--next { right: var(--space-m); }

.hw-lightbox__counter {
    position: absolute;
    bottom: var(--space-m);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

/* ── Languages tab ─────────────────────────────────────────────────────────── */
.hw-lang-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.hw-lang-row {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-m);
    border-bottom: 1px solid var(--border-primary);
}
.hw-lang-row:last-child { border-bottom: none; }
.hw-lang-row .hw-toggle--labeled { flex: 1; }
.hw-lang-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.hw-lang-default-btn {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.hw-lang-default-btn:hover {
    border-color: var(--primary);
    color: white;
}

/* ── Section editor lang switcher ──────────────────────────────────────────── */
.hw-section-editor__langbar {
    display: flex;
    gap: 2px;
    padding: var(--space-2xs) var(--space-m);
    background: var(--light-10);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}
button.hw-langbar__btn {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    background: none;
    color: var(--dark-70);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hw-langbar__btn:hover {
    background: var(--primary-70);
    color: white;
}
button.hw-langbar__btn--active {
    background: var(--primary);
    border-color: var(--primary-50);
    color:white;
}

/* ── Guests – Panel ──────────────────────────────────────────────────────── */
.hw-panel-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--space-2xs) 0;
}

/* ── Guests – Main ───────────────────────────────────────────────────────── */
.hw-guests-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.hw-guests-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-s) var(--space-m);
    flex-shrink: 0;
    margin-bottom: var(--space-s);
}

.hw-guests-toolbar__left {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
}

.hw-guests-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.hw-guests-search {
    position: relative;
    display: flex;
    align-items: center;
}

.hw-guests-search i {
    position: absolute;
    left: var(--space-xs);
    color: var(--dark-40);
    font-size: 1.6rem;
    pointer-events: none;
}

.hw-guests-search .hw-field__input {
    padding-left: calc(var(--space-xs) + 2rem);
    min-width: 200px;
}

.hw-guests-filter {
    width: auto;
    min-width: 130px;
}

.hw-guests-count {
    font-size: var(--text-s);
    color: var(--dark-50);
    white-space: nowrap;
}

/* Form panel (above table, when editing) */
.hw-guest-form-panel {
    border-bottom: 2px solid var(--primary-30);
    background: var(--bg-surface);
    flex-shrink: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.hw-guest-form-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-m);
    border-bottom: 1px solid var(--border-primary);
    background: var(--primary-5);
}

.hw-guest-form-panel__title {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-body);
}

.hw-guest-form-panel__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dark-50);
    padding: var(--space-3xs);
    display: flex;
    align-items: center;
    border-radius: var(--radius-s);
    transition: background 0.1s;
}

.hw-guest-form-panel__close:hover {
    background: var(--dark-10);
    color: var(--text-body);
}

/* Edit form body */
.hw-guest-form {
    padding: var(--space-m);
    max-width:1200px;
    padding: var(--space-xl);
    background: var(--light);
    border-radius: var(--radius-xl);
}

.hw-guest-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s);
    margin-bottom: var(--space-s);
}

.hw-guest-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.hw-guest-form__field--full {
    grid-column: 1 / -1;
}

.hw-guest-form__field label {
    color: var(--text-body);
}

/* RSVP radio options */
.hw-rsvp-options {
    font-weight: 500;
    font-size: var(--text-xs);
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.hw-rsvp-option {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
    padding: 0.5em 1em;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: var(--text-s);
    font-weight: 500;
    transition: all 0.15s;
    user-select: none;
}

.hw-rsvp-option:hover {
    border-color: var(--primary);
    background: var(--primary-5);
}

.hw-rsvp-option--pending.hw-rsvp-option--active   { background: var(--dark-10); border-color: var(--dark-30); }
.hw-rsvp-option--confirmed.hw-rsvp-option--active { background: var(--success-10); border-color: var(--success); color: var(--success) }
.hw-rsvp-option--declined.hw-rsvp-option--active  { background: var(--error-10); border-color: var(--error); color: var(--error); }

/* Number input narrow */
.hw-guest-num-input {
    max-width: 80px;
}

/* Note field spacing */
.hw-guest-form__note {
    margin-bottom: var(--space-s);
}

/* Groups checkboxes */
.hw-guest-groups {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-3xs) 0;
}

.hw-guest-groups__empty {
    font-size: var(--text-xs);
    color: var(--dark-40);
}

.hw-guest-group-check {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-s);
    cursor: pointer;
}

/* Meal section */
.hw-guest-meals {
    margin-bottom: var(--space-s);
}

.hw-guest-meals__title {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-body);
    margin-bottom: var(--space-2xs);
}

.hw-guest-meal-row {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-3xs);
}

.hw-guest-meal-row__name {
    flex: 0 0 160px;
}

.hw-guest-meal-row__meal {
    flex: 1;
}

/* Token URL */
.hw-guest-token {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    background: var(--dark-5);
    border-radius: var(--radius-s);
    margin-bottom: var(--space-s);
    flex-wrap: wrap;
}

.hw-guest-token__label {
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--dark-50);
    flex-shrink: 0;
}

.hw-guest-token__url {
    font-size: var(--text-s);
    color: var(--dark-70);
    font-family: monospace;
    word-break: break-all;
    flex: 1;
}

/* Form actions */
.hw-guest-form__actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    padding-top: var(--space-xs);
    border-top: 1px solid var(--border-primary);
    margin-top: var(--space-s);
}

/* Table */
.hw-guest-table-wrap {
    flex: 1;
    overflow-y: auto;
}

.hw-guest-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-s);
    border-top:none;
}

.hw-guest-table thead th {
    text-align: left;
    padding: var(--space-xs) var(--space-s);
    border-bottom: 2px solid var(--border-primary);
    font-weight: 600;
    color: var(--text-body);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.hw-guest-row {
    cursor: pointer;
    transition: background 0.1s;
}

.hw-guest-row:hover {
    background: var(--dark-5);
}

.hw-guest-row--active {
    background: var(--primary-5);
}

.hw-guest-row td {
    padding: var(--space-xs) var(--space-s);
    border-bottom: 1px solid var(--border-primary);
    vertical-align: middle;
}

.hw-guest-row__name {
    font-weight: 500;
}

.hw-guest-row__email {
    color: var(--dark-60);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hw-guest-row__groups {
    max-width: 160px;
}

.hw-guest-row__actions {
    display: flex;
    gap: var(--space-3xs);
    justify-content: flex-end;
    white-space: nowrap;
}

.hw-guest-tag {
    display: inline-block;
    padding: 2px var(--space-3xs);
    background: var(--dark-10);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    color: var(--text-body);
    margin: 1px 2px;
    white-space: nowrap;
}

/* RSVP badge */
.hw-rsvp-badge {
    display: inline-block;
    padding: 2px var(--space-2xs);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
}

.hw-rsvp-badge--pending   { background: var(--dark-10); color: var(--dark-60); }
.hw-rsvp-badge--confirmed { background: #dcfce7; color: #15803d; }
.hw-rsvp-badge--declined  { background: #fee2e2; color: #b91c1c; }

/* Empty state */
.hw-guest-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-m);
    color: var(--dark-40);
    font-size: var(--text-s);
}

/* ── Mail view ───────────────────────────────────────────────────────────── */
.hw-mail-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.hw-mail-draft-status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--dark-40);
}

.hw-mail-columns {
    display: grid;
    grid-template-columns: minmax(340px, 520px) 1fr;
    gap: var(--space-m);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Compose (left) ─────────────────────────────────────────────────────── */
.hw-mail-compose {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    overflow-y: auto;
    padding-right: var(--space-xs);
}

.hw-mail-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.hw-mail-section--grow {
    flex: 1;
}

.hw-mail-section__label {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--dark-70);
}

.hw-mail-radio-group {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;
}

.hw-mail-radio {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    font-size: var(--text-s);
    cursor: pointer;
}

.hw-mail-filter-select {
    width: auto;
    min-width: 180px;
}

/* ── Header image picker ────────────────────────────────────────────────── */
.hw-mail-header-img {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex-wrap: wrap;
}

.hw-mail-header-img__preview {
    position: relative;
    flex-shrink: 0;
}

.hw-mail-header-img__thumb {
    width: 120px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-s);
    border: 1px solid var(--border);
    display: block;
}

.hw-mail-header-img__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dark-80);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    padding: 0;
}

.hw-mail-header-img__btn {
    font-size: var(--text-s);
}

.hw-mail-count {
    font-size: var(--text-s);
    color: var(--dark-50);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hw-mail-vars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.hw-mail-vars__title {
    font-size: var(--text-xs);
    color: var(--dark-40);
    width:100%;
}

.hw-mail-var-btn {
    padding: 0.2em 0.4em;
    background: var(--primary-20);
    color: var(--primary);
    border-width:1px;
    cursor: pointer;
    line-height: 1.6;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.hw-mail-var-btn:hover {
    background: var(--primary-5);
    border-color: var(--primary);
}

.hw-mail-textarea {
    resize: vertical;
    min-height: 200px;
    font-family: inherit;
    font-size: var(--text-s);
}

.hw-mail-actions {
    display: flex;
    gap: var(--space-s);
}

/* ── Progress ───────────────────────────────────────────────────────────── */
.hw-mail-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.hw-mail-progress__bar-wrap {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.hw-mail-progress__bar {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.hw-mail-progress__info {
    font-size: var(--text-s);
    color: var(--dark-60);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hw-mail-progress__done {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--success, #2a7a4b);
}

.hw-mail-progress__failed {
    color: var(--error, #f92444);
}

.hw-mail-errors {
    border: 1px solid color-mix(in srgb, var(--error, #f92444) 30%, transparent);
    border-radius: var(--radius-s);
    padding: var(--space-xs) var(--space-s);
    background: color-mix(in srgb, var(--error, #f92444) 5%, white);
}

.hw-mail-errors__title {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--error, #f92444);
    margin-bottom: var(--space-xxs);
}

.hw-mail-errors__list {
    margin: 0;
    padding-left: var(--space-m);
    font-size: var(--text-xs);
    color: var(--dark-70);
}

/* ── Preview (right — iframe) ───────────────────────────────────────────── */
.hw-mail-preview {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-m);
    overflow: hidden;
    min-height: 0;
    background: #f0ede8;
    flex-grow: 1;
}

.hw-mail-preview__header {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-xs) var(--space-s);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.hw-mail-preview__title {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--dark-70);
    margin-right: auto;
}

.hw-mail-preview__guest-name {
    font-size: var(--text-xs);
    color: var(--dark-50);
}

.hw-mail-preview__nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--dark-60);
}

.hw-mail-preview__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    background: var(--bg-surface);
    color: var(--text-body);
    cursor: pointer;
    transition: background 0.15s;
}

.hw-mail-preview__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background:transparent;
}

.hw-mail-preview__nav-btn:not(:disabled):hover {
    background: var(--primary-20);
}

.hw-mail-preview__body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hw-mail-preview__iframe {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
    min-height: 500px;
}

.hw-mail-preview__empty {
    color: var(--dark-30);
    font-size: var(--text-s);
    text-align: center;
    padding: var(--space-2xl) var(--space-m);
}

.hw-mail-langbar {
    margin-bottom: var(--space-xs);
    border-bottom:0;
    padding: 0.5em;
    background:var(--bg-body);
    border-radius: var(--radius-m);
}

.hw-mail-lang-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning, #f59e0b);
    flex-shrink: 0;
    margin-left: 2px;
    vertical-align: middle;
}

.hw-mail-lang-info-btn {
    margin-left: auto;
    color: currentColor;
    transition: color 0.15s;
}
.hw-mail-lang-info-btn:hover,
.hw-mail-lang-info-btn--open { color: var(--primary); }

.hw-mail-lang-info {
    background: var(--light-10);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    padding: var(--space-xs) var(--space-s);
    font-size: var(--text-xs);
    color: var(--dark-60);
    line-height: 1.6;
    margin-bottom: var(--space-s);
}


.hw-mail-design-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-m);
    background: var(--bg-body);
    border-bottom-left-radius: var(--radius-s);
    border-bottom-right-radius: var(--radius-s);
}


.hw-mail-design-row {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}
.hw-mail-design-row label {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--dark-60);
}
.hw-mail-design-row input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-s);
    padding: 2px 3px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

/* Spin animation for loading icon */
@keyframes hw-spin {
    to { transform: rotate(360deg); }
}

.hw-spin {
    display: inline-block;
    animation: hw-spin 1s linear infinite;
}

/* ── Update progress bar ────────────────────────────────────────────────────── */
.hw-update-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--dark-10);
    overflow: hidden;
}

.hw-update-bar__fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* ── Dashboard admin list styles ────────────────────────────────────────────── */

.hw-kuchen-admin-list,
.hw-gift-admin-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.hw-kuchen-admin-item,
.hw-gift-admin-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-primary);
}

.hw-kuchen-admin-item {
    display:grid;
    grid-template-columns: 1fr fit-content;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "name actions"
    "note note";
}

.kl_name { grid-area: name}
.kl_actions { grid-area: actions}
.kl_note { grid-area: note}


.hw-kuchen-admin-item:has( input) {
    grid-template-columns: var(--grid-1);
    grid-template-rows: auto;
    grid-template-areas: unset;
}

.hw-kuchen-admin-item:last-child,
.hw-gift-admin-item:last-child {
    border-bottom: none;
}

/* ── Navigation section editor: repeater is read-only (items auto-synced) ──── */

.hw-section-editor--navigation .hw-repeater__item-actions { display: none; }
.hw-section-editor--navigation .hw-repeater__add { display: none; }
.hw-section-editor--navigation .hw-repeater__chevron { display: flex; }

/* ── Utility: chevron-only repeater (fixed items, no add/move/delete) ───────── */

.hw-repeater--labels-only .hw-repeater__btn { display: none; }
.hw-repeater--labels-only .hw-repeater__add { display: none; }

/* ── Info tooltip ────────────────────────────────────────────────────────────── */

.hw-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
  color: var(--dark-40);
  font-size: inherit;
  vertical-align: middle;
}
.hw-info-tip__bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--dark-80, #333);
  color: #fff;
  font-size: var(--text-s);
  line-height: 1.4;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  pointer-events: none;
  z-index: 9999;
  white-space: normal;
  text-wrap: balance;
    backdrop-filter: blur(3px);
}
.hw-info-tip__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark-80, #333);
}
.hw-info-tip:hover .hw-info-tip__bubble { display: block; }

