/* ── Notiz-Widget ──────────────────────────────────────────── */

/* Wenn das Chat-Widget sichtbar ist (Klasse --hidden entfernt), Notiz-FAB + Widget
   ausblenden, damit sie nicht über dem Chat liegen. */
body:has(#lp-chat-widget:not(.lp-chat-widget--hidden)) #lp-note-fab,
body:has(#lp-chat-widget:not(.lp-chat-widget--hidden)) #lp-note-widget {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* FAB auf gleicher rechter Linie wie Chat-FAB (right:28px bottom:28px 52x52). */
.lp-note-fab {
    position: fixed;
    right: 28px;
    bottom: 92px; /* 28 + 52 + 12 Abstand zum Chat-FAB */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(217,119,6,.45), 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 9100;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.lp-note-fab:hover  { transform: scale(1.08); box-shadow: 0 6px 22px rgba(217,119,6,.55); }
.lp-note-fab:active { transform: scale(.95); }

.lp-note-fab-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc2626;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ── Widget ────────────────────────────────────────────────── */
.lp-note-widget {
    position: fixed;
    right: 28px;
    /* Chat-FAB: bottom 28 + Höhe 52 → Oberkante bei 80px.
       Widget startet direkt über dem Chat-FAB, so wirkt es aus dem Notiz-FAB heraus. */
    bottom: 88px;
    width: 380px;
    height: min(600px, calc(100vh - 130px));
    min-width: 300px;
    min-height: 360px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 48px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9101;
    transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.2,.64,1);
}
.lp-note-widget.is-resizing {
    transition: none;
    user-select: none;
}
.lp-note-widget.is-resizing * { user-select: none !important; pointer-events: none; }
.lp-note-widget.is-resizing .lp-note-resize { pointer-events: auto; }

/* Resize-Handle oben-links — Drag vergrößert das Widget (Anker ist unten-rechts). */
.lp-note-resize {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    z-index: 2;
    border-top-left-radius: 16px;
    background:
        linear-gradient(135deg, transparent 0 45%, rgba(100,116,139,.45) 45% 55%, transparent 55% 70%, rgba(100,116,139,.45) 70% 80%, transparent 80%);
    opacity: .55;
    transition: opacity .15s;
}
.lp-note-resize:hover { opacity: 1; }
.lp-note-widget--hidden {
    opacity: 0;
    transform: translateY(12px) scale(.96);
    pointer-events: none;
}

/* Views (Liste ↔ Editor) */
.lp-note-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #fafafa;
}
.lp-note-view--hidden { display: none; }

/* ── Header ────────────────────────────────────────────────── */
.lp-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    flex-shrink: 0;
}
.lp-note-header-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
}
.lp-note-header-title i { font-size: 17px; }
.lp-note-header-actions {
    display: inline-flex;
    gap: 6px;
}

.lp-note-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s ease, transform .1s ease;
}
.lp-note-btn:hover  { background: rgba(255,255,255,.32); }
.lp-note-btn:active { transform: scale(.92); }
.lp-note-btn-primary {
    background: rgba(255,255,255,.28);
    font-weight: 700;
}
.lp-note-btn-primary:hover { background: rgba(255,255,255,.42); }

/* ── Suche ─────────────────────────────────────────────────── */
.lp-note-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
    color: #64748b;
    flex-shrink: 0;
}
.lp-note-search i { color: #94a3b8; }
.lp-note-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #0f172a;
}
.lp-note-search input::placeholder { color: #94a3b8; }

/* ── Tabs ──────────────────────────────────────────────────── */
.lp-note-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px 0;
    flex-shrink: 0;
    background: #ffffff;
    border-bottom: 1px solid #eef2f7;
}
.lp-note-tab {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: color .15s ease, background .15s ease;
}
.lp-note-tab:hover { background: #f1f5f9; }
.lp-note-tab.active { color: #d97706; }
.lp-note-tab.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 2px;
}

/* ── Liste ─────────────────────────────────────────────────── */
.lp-note-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-note-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-note-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 2px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.lp-note-section-title i { color: #d97706; font-size: 11px; }

.lp-note-item {
    position: relative;
    padding: 12px 12px 10px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    overflow: hidden;
}
.lp-note-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.lp-note-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15,23,42,.08);
    border-color: #d1d5db;
}

.lp-note-item--pinned { border-color: #fcd34d; background: #fffbeb; }
.lp-note-item--pinned::before { background: linear-gradient(180deg, #f59e0b, #d97706); }

.lp-note-item--cal { background: #eff6ff; border-color: #bfdbfe; }
.lp-note-item--cal::before { background: linear-gradient(180deg, #3399ff, #0656b0); }

/* Laufendes Event: grün akzentuiert mit Puls-Dot */
.lp-note-item--cal-ongoing {
    background: #ecfdf5;
    border-color: #86efac;
}
.lp-note-item--cal-ongoing::before {
    background: linear-gradient(180deg, #10b981, #059669);
}
/* Bald anstehend (< 24h): kräftiger Blau-Ton */
.lp-note-item--cal-soon {
    background: #eff6ff;
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(59,130,246,.08);
}
.lp-note-item--cal-soon::before {
    background: linear-gradient(180deg, #0783ff, #0656b0);
}

.lp-note-item-badge--ongoing {
    background: #dcfce7;
    color: #14532d;
    display: inline-flex; align-items: center; gap: 4px;
}
.lp-note-item-badge--soon {
    background: #dbeafe;
    color: #064a96;
}
.lp-note-pulse-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: lp-note-pulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(16,185,129,.7);
}
@keyframes lp-note-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
    50%      { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

.lp-note-item[data-accent]::before {
    background: linear-gradient(180deg, var(--accent-from, #cbd5e1), var(--accent-to, #94a3b8));
}

.lp-note-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    min-height: 20px;
}
.lp-note-item-title {
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-note-item-badge {
    background: #dbeafe;
    color: #064a96;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.lp-note-item-badge i { font-size: 10px; }
.lp-note-item-badge--pinned {
    background: #fef3c7;
    color: #92400e;
}

.lp-note-item-pinbtn {
    background: transparent;
    border: none;
    color: #cbd5e1;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.lp-note-item-pinbtn:hover { background: #f1f5f9; color: #475569; }
.lp-note-item-pinbtn.active { color: #d97706; }
.lp-note-item-pinbtn.active:hover { background: #fef3c7; color: #92400e; }

.lp-note-item-preview {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
    max-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.lp-note-item-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 6px;
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.lp-note-item-chip {
    background: #f1f5f9;
    color: #475569;
    padding: 1px 7px;
    border-radius: 5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-note-item-chip i { font-size: 10px; }
.lp-note-item-chip--date  { background: #dbeafe; color: #064a96; }
.lp-note-item-chip--date[role="link"] {
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.lp-note-item-chip--date[role="link"]:hover {
    background: #bfdbfe;
    transform: translateY(-1px);
}
.lp-note-item-chip--vacation { background: #dcfce7; color: #14532d; }
.lp-note-item-chip--sick  { background: #fee2e2; color: #7f1d1d; }

/* Wenn Notiz eine Farbe hat: Border übernimmt Farbe + dezenter Dot unten rechts */
.lp-note-item[data-has-color="1"] {
    border-color: var(--note-color, #fde68a);
    box-shadow: 0 0 0 1px var(--note-color, #fde68a);
}
.lp-note-item[data-has-color="1"]:hover {
    border-color: var(--note-color, #fde68a);
    box-shadow: 0 6px 18px rgba(15,23,42,.08), 0 0 0 2px var(--note-color, #fde68a);
}
.lp-note-item[data-has-color="1"]::after {
    content: "";
    position: absolute;
    right: 10px; bottom: 10px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--note-color, #fde68a);
    box-shadow: 0 0 0 2px #fff;
}

/* Empty-State */
.lp-note-empty {
    text-align: center;
    padding: 32px 20px;
    color: #94a3b8;
    font-size: 13px;
}
.lp-note-empty-icon {
    width: 48px; height: 48px;
    margin: 0 auto 10px;
    border-radius: 12px;
    background: #fef3c7;
    color: #d97706;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.lp-note-empty-title {
    font-weight: 700;
    color: #475569;
    margin-bottom: 2px;
}
.lp-note-empty-sub { font-size: 12px; color: #94a3b8; }

/* ── Editor ────────────────────────────────────────────────── */
.lp-note-editor-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    flex-shrink: 0;
}
.lp-note-editor-title-wrap { flex: 1; min-width: 0; }
.lp-note-editor-title-wrap input {
    width: 100%;
    border: none;
    outline: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
}
.lp-note-editor-title-wrap input::placeholder { color: rgba(255,255,255,.75); }
.lp-note-editor-title-wrap input:focus { background: rgba(255,255,255,.26); }

.lp-note-btn-pin { color: #fff; }
.lp-note-btn-pin.active {
    background: #fff;
    color: #d97706;
}
.lp-note-btn-pin.active:hover { background: #fef3c7; }

.lp-note-editor-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
}
.lp-note-editor-body textarea {
    width: 100%;
    resize: none;
    flex: 1;
    min-height: 160px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    color: #0f172a;
    transition: border-color .12s;
}
.lp-note-editor-body textarea:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }

.lp-note-editor-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}
.lp-note-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lp-note-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}
.lp-note-meta-label i { color: #d97706; }

.lp-note-colors {
    display: inline-flex;
    gap: 6px;
}
.lp-note-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #94a3b8;
}
.lp-note-color:hover { transform: scale(1.12); }
.lp-note-color.active { border-color: #0f172a; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15,23,42,.3); }

.lp-note-meta-row input[type="date"],
.lp-note-meta-row input[type="time"] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    color: #0f172a;
    font-family: inherit;
    background: #fff;
}
.lp-note-date-clear {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
}
.lp-note-date-clear:hover { color: #dc2626; }

/* ── Meta-Blöcke (strukturierter Editor) ───────────────────── */
.lp-note-meta-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-note-meta-block--color {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}
.lp-note-meta-block--color .lp-note-meta-label { min-width: 0; }
.lp-note-meta-block--color .lp-note-colors { margin-left: auto; }

/* ── Kalender-Toggle ───────────────────────────────────────── */
.lp-note-cal-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    color: #475569;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
    align-self: flex-start;
}
.lp-note-cal-toggle:hover { border-color: #0783ff; color: #0656b0; }
.lp-note-cal-toggle.is-active {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #0656b0;
}
.lp-note-cal-toggle-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eff6ff;
    color: #0783ff;
    font-size: 11px;
}
.lp-note-cal-toggle.is-active .lp-note-cal-toggle-icon {
    background: #dbeafe;
}
.lp-note-cal-toggle-caret {
    margin-left: auto;
    font-size: 11px;
    color: #94a3b8;
    transition: transform .15s ease;
}
.lp-note-cal-toggle.is-expanded .lp-note-cal-toggle-caret { transform: rotate(180deg); }

.lp-note-cal-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-note-cal-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp-note-cal-row label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 90px;
}
.lp-note-cal-row label i { color: #0783ff; font-size: 11px; }
.lp-note-cal-row input[type="date"],
.lp-note-cal-row input[type="time"] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    color: #0f172a;
    font-family: inherit;
    background: #fff;
    flex: 1;
}
.lp-note-cal-optional {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 2px;
}
.lp-note-cal-remove {
    align-self: flex-start;
    margin-top: 2px;
    background: transparent;
    border: 0;
    color: #dc2626;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-note-cal-remove:hover { text-decoration: underline; }

.lp-note-err {
    background: #fee2e2;
    color: #991b1b;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    border: 1px solid #fecaca;
}

/* Reminder-Section */
.lp-note-reminders-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed #e5e7eb;
    margin-top: 2px;
}
.lp-note-reminders-wrap .lp-note-meta-label { min-width: 0; }
.lp-note-reminders {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lp-note-reminder-empty {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}
.lp-note-reminder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    padding: 3px 4px 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}
.lp-note-reminder-chip i.bi-bell-fill { color: #d97706; font-size: 11px; }
.lp-note-reminder-remove {
    background: transparent;
    border: none;
    color: #b45309;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 10px;
    padding: 0;
}
.lp-note-reminder-remove:hover { background: #fed7aa; color: #7c2d12; }
.lp-note-reminder-add-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lp-note-reminder-add-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    color: #475569;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.lp-note-reminder-add-btn:hover { border-color: #f59e0b; color: #d97706; }
.lp-note-reminder-picker {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-note-reminder-picker-title {
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b45309;
    margin-top: 2px;
}
.lp-note-reminder-picker-title:first-child { margin-top: 0; }
.lp-note-reminder-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.lp-note-reminder-presets button {
    background: #fff;
    border: 1px solid #fed7aa;
    color: #9a3412;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.lp-note-reminder-presets button:hover {
    background: #fed7aa;
    border-color: #fdba74;
}
.lp-note-reminder-day {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: #475569;
}
.lp-note-reminder-day input[type="number"] { width: 56px; }
.lp-note-reminder-day input[type="number"],
.lp-note-reminder-day input[type="time"],
.lp-note-reminder-day input[type="datetime-local"] {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 12px;
    background: #fff;
}
.lp-note-reminder-day button {
    background: #16a34a;
    color: #fff;
    border: 0;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-note-reminder-day button:hover { background: #15803d; }

.lp-note-editor-foot {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid #eef2f7;
    background: #fff;
    flex-shrink: 0;
}
.lp-note-btn-text {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #0f172a;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, transform .1s, box-shadow .12s;
}
.lp-note-btn-text:hover  { background: #e2e8f0; }
.lp-note-btn-text:active { transform: translateY(1px); }

.lp-note-btn-save {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(217,119,6,.35);
}
.lp-note-btn-save:hover  {
    filter: brightness(1.04);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(217,119,6,.5);
}
.lp-note-btn-delete {
    color: #dc2626;
    background: #fff;
    border-color: #fecaca;
}
.lp-note-btn-delete:hover { background: #fee2e2; }

.lp-note-kbd {
    background: rgba(255,255,255,.28);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-left: 4px;
}

@media (max-width: 480px) {
    .lp-note-widget {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 88px;
    }
}

/* ── Badge-Stil: wenn „Zahl" aktiv, wird der Dot zur Zahl-Pille ── */
.lp-note-fab-dot.lp-note-fab-dot--count {
    top: -4px;
    right: -4px;
    width: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
}

/* ── Settings-View ──────────────────────────────────────────── */
.lp-note-settings-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-weight: 900;
    font-size: 15px;
}
.lp-note-settings-title i { color: #d97706; }

.lp-note-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #fafafa;
}
.lp-note-settings-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}
.lp-note-settings-section-title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
}
.lp-note-settings-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #f1f5f9;
}
.lp-note-settings-row:first-of-type { border-top: none; padding-top: 0; }
.lp-note-settings-row-text { flex: 1; min-width: 0; }
.lp-note-settings-row-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.lp-note-settings-row-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}

/* Switch */
.lp-note-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.lp-note-switch input { opacity: 0; width: 0; height: 0; }
.lp-note-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #cbd5e1;
    border-radius: 22px;
    transition: background .18s;
}
.lp-note-switch-slider::before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 2px; top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.lp-note-switch input:checked + .lp-note-switch-slider { background: #d97706; }
.lp-note-switch input:checked + .lp-note-switch-slider::before { transform: translateX(18px); }

/* Segmented */
.lp-note-segmented {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}
.lp-note-segmented-btn {
    background: transparent;
    border: none;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.lp-note-segmented-btn.active {
    background: #d97706;
    color: #fff;
}
.lp-note-segmented-btn:hover:not(.active) {
    background: #e2e8f0;
}

/* Settings „Zurücksetzen"-Button */
.lp-note-settings-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.lp-note-settings-btn:hover  { background: #e2e8f0; border-color: #94a3b8; }
.lp-note-settings-btn:active { background: #cbd5e1; }

/* ── Darkmode ──────────────────────────────────────────────── */
.lp-note-widget--dark {
    background: #0f172a;
    border-color: #1f2937;
    color: #e2e8f0;
}
.lp-note-widget--dark .lp-note-view {
    background: #0f172a;
}
.lp-note-widget--dark .lp-note-header {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}
.lp-note-widget--dark .lp-note-search {
    background: #1e293b;
    border-color: #334155;
}
.lp-note-widget--dark .lp-note-search input {
    background: transparent;
    color: #e2e8f0;
}
.lp-note-widget--dark .lp-note-search input::placeholder { color: #64748b; }
.lp-note-widget--dark .lp-note-search i { color: #94a3b8; }

.lp-note-widget--dark .lp-note-tabs {
    background: #0f172a;
    border-color: #1f2937;
}
.lp-note-widget--dark .lp-note-tab {
    color: #94a3b8;
}
.lp-note-widget--dark .lp-note-tab.active {
    color: #fcd34d;
}

.lp-note-widget--dark .lp-note-list { background: #0f172a; }
.lp-note-widget--dark .lp-note-section-title { color: #64748b; }
.lp-note-widget--dark .lp-note-item {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
.lp-note-widget--dark .lp-note-item:hover {
    background: #273449;
    border-color: #475569;
}
.lp-note-widget--dark .lp-note-item--pinned {
    background: #3b2e10;
    border-color: #b45309;
}
.lp-note-widget--dark .lp-note-item--cal {
    background: #0b2942;
    border-color: #0656b0;
}
.lp-note-widget--dark .lp-note-item-title   { color: #f1f5f9; }
.lp-note-widget--dark .lp-note-item-preview { color: #94a3b8; }
.lp-note-widget--dark .lp-note-item-meta    { color: #64748b; }
.lp-note-widget--dark .lp-note-item-chip {
    background: #1f2937; color: #cbd5e1; border: 1px solid #334155;
}
.lp-note-widget--dark .lp-note-item-chip--vacation {
    background: #064e3b; color: #bbf7d0; border-color: #047857;
}
.lp-note-widget--dark .lp-note-item-pinbtn { color: #94a3b8; }
.lp-note-widget--dark .lp-note-item-pinbtn:hover { color: #fcd34d; }

.lp-note-widget--dark .lp-note-empty         { color: #64748b; }
.lp-note-widget--dark .lp-note-empty-title   { color: #94a3b8; }
.lp-note-widget--dark .lp-note-empty-icon    { background: #1e293b; color: #64748b; }

.lp-note-widget--dark .lp-note-editor-header {
    background: #0f172a;
    border-color: #1f2937;
}
.lp-note-widget--dark .lp-note-editor-body   { background: #0f172a; }
.lp-note-widget--dark #lp-note-title         { background: transparent; color: #f1f5f9; }
.lp-note-widget--dark #lp-note-title::placeholder { color: #64748b; }
.lp-note-widget--dark #lp-note-content       {
    background: #1e293b; color: #e2e8f0;
    border-color: #334155;
}
.lp-note-widget--dark #lp-note-content::placeholder { color: #64748b; }

.lp-note-widget--dark .lp-note-meta-label   { color: #94a3b8; }
.lp-note-widget--dark .lp-note-cal-toggle   {
    background: #1e293b; border-color: #334155; color: #e2e8f0;
}
.lp-note-widget--dark .lp-note-cal-toggle:hover { background: #273449; }
.lp-note-widget--dark .lp-note-cal-panel    {
    background: #1e293b; border-color: #334155;
}
.lp-note-widget--dark .lp-note-cal-row label { color: #cbd5e1; }
.lp-note-widget--dark .lp-note-cal-row input {
    background: #0f172a; color: #e2e8f0; border-color: #334155;
}
.lp-note-widget--dark .lp-note-cal-optional  { color: #64748b; }
.lp-note-widget--dark .lp-note-cal-remove    {
    background: #1e293b; color: #fca5a5; border-color: #7f1d1d;
}

.lp-note-widget--dark .lp-note-editor-foot  {
    background: #0f172a; border-color: #1f2937;
}

/* Settings-View Dark */
.lp-note-widget--dark .lp-note-settings-body       { background: #0f172a; }
.lp-note-widget--dark .lp-note-settings-section    {
    background: #1e293b; border-color: #334155;
}
.lp-note-widget--dark .lp-note-settings-section-title { color: #94a3b8; }
.lp-note-widget--dark .lp-note-settings-row        { border-top-color: #334155; }
.lp-note-widget--dark .lp-note-settings-row-label  { color: #f1f5f9; }
.lp-note-widget--dark .lp-note-settings-row-desc   { color: #94a3b8; }
.lp-note-widget--dark .lp-note-settings-title      { color: #f1f5f9; }
.lp-note-widget--dark .lp-note-settings-btn        {
    background: #1e293b; border-color: #334155; color: #e2e8f0;
}
.lp-note-widget--dark .lp-note-settings-btn:hover  {
    background: #273449; border-color: #475569;
}
.lp-note-widget--dark .lp-note-switch-slider       { background: #475569; }
.lp-note-widget--dark .lp-note-segmented           {
    background: #1e293b; border-color: #334155;
}
.lp-note-widget--dark .lp-note-segmented-btn       { color: #cbd5e1; }
.lp-note-widget--dark .lp-note-segmented-btn:hover:not(.active) { background: #273449; }

.lp-note-widget--dark .lp-note-resize {
    background:
        linear-gradient(135deg, transparent 0 45%, rgba(148,163,184,.55) 45% 55%, transparent 55% 70%, rgba(148,163,184,.55) 70% 80%, transparent 80%);
}

/* ══════════════════════════════════════════════════════════════
   Notizen teilen
   ══════════════════════════════════════════════════════════════ */

/* Badge am „Geteilt"-Tab */
.lp-note-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* Teilen-Button auf einer Notiz-Karte (neben Pin) */
.lp-note-item-sharebtn {
    background: transparent;
    border: none;
    color: #cbd5e1;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease;
}
.lp-note-item-sharebtn:hover { background: #eef2ff; color: #4f46e5; }

/* Geteilte Notiz-Karten */
.lp-note-item--shared { cursor: default; }
.lp-note-item--unseen {
    box-shadow: inset 3px 0 0 #6366f1;
}
.lp-note-shared-from {
    background: #eef2ff !important;
    color: #4338ca !important;
}
.lp-note-shared-saved {
    background: #dcfce7 !important;
    color: #14532d !important;
}
.lp-note-shared-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: stretch;
}
.lp-note-shared-save {
    flex: 1;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    color: #4338ca;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .12s ease, box-shadow .12s ease;
}
.lp-note-shared-save:hover { background: #e0e7ff; }
.lp-note-shared-save:disabled { opacity: .6; cursor: default; }
.lp-note-shared-dismiss {
    background: #fff;
    border: 1px solid #fecaca;
    color: #dc2626;
    width: 34px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s ease;
}
.lp-note-shared-dismiss:hover { background: #fee2e2; }

/* Teilen-Ansicht (Empfänger-Picker) */
.lp-note-share-subhead {
    padding: 10px 14px 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-note-share-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-note-emp {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease, border-color .12s ease;
}
.lp-note-emp:hover { background: #f8fafc; }
.lp-note-emp.is-selected {
    background: #eef2ff;
    border-color: #c7d2fe;
}
.lp-note-emp-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.lp-note-emp-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.lp-note-emp-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #cbd5e1;
}
.lp-note-emp-status-online::after  { background: #22c55e; }
.lp-note-emp-status-pause::after   { background: #f59e0b; }
.lp-note-emp-status-offline::after { background: #cbd5e1; }
.lp-note-emp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-note-emp-name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-note-emp-statustext { font-size: 11px; color: #94a3b8; }
.lp-note-emp-check { color: #cbd5e1; font-size: 18px; flex-shrink: 0; }
.lp-note-emp.is-selected .lp-note-emp-check { color: #4f46e5; }
.lp-note-share-count { font-size: 12px; font-weight: 600; color: #64748b; align-self: center; }

/* Toast (Teilen / Live-Benachrichtigung) */
.lp-note-toast-host {
    position: fixed;
    right: 18px;
    bottom: 90px;
    z-index: 2147483600;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.lp-note-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    background: #1e293b;
    color: #fff;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15,23,42,.35);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
}
.lp-note-toast.is-visible { opacity: 1; transform: translateY(0); }
.lp-note-toast i { color: #818cf8; font-size: 16px; flex-shrink: 0; }

/* ── Dark Mode ── */
.lp-note-widget--dark .lp-note-item-sharebtn { color: #94a3b8; }
.lp-note-widget--dark .lp-note-item-sharebtn:hover { background: #273449; color: #a5b4fc; }
.lp-note-widget--dark .lp-note-shared-from {
    background: #312e81 !important; color: #c7d2fe !important;
}
.lp-note-widget--dark .lp-note-shared-save {
    background: #312e81; border-color: #4338ca; color: #c7d2fe;
}
.lp-note-widget--dark .lp-note-shared-save:hover { background: #3730a3; }
.lp-note-widget--dark .lp-note-shared-dismiss {
    background: #1e293b; border-color: #7f1d1d; color: #fca5a5;
}
.lp-note-widget--dark .lp-note-share-list { background: #0f172a; }
.lp-note-widget--dark .lp-note-emp:hover { background: #1e293b; }
.lp-note-widget--dark .lp-note-emp.is-selected { background: #1e1b4b; border-color: #4338ca; }
.lp-note-widget--dark .lp-note-emp-name { color: #f1f5f9; }
.lp-note-widget--dark .lp-note-emp-avatar::after { border-color: #0f172a; }
.lp-note-widget--dark .lp-note-share-subhead { color: #94a3b8; }

/* ── Ordner ────────────────────────────────────────────────── */
.lp-note-folderbar {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #eef2f7;
    padding: 8px 14px;
}
.lp-note-folderchips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.lp-note-folderchip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    border: 1px solid transparent;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.lp-note-folderchip:hover { background: #e6ebf2; }
.lp-note-folderchip.active {
    background: #fef3c7;
    color: #b45309;
    border-color: #fcd34d;
}
.lp-note-folderchip i { font-size: 11px; }
.lp-note-folderchip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, .12);
}
.lp-note-folderchip-edit {
    display: inline-flex;
    margin-left: 1px;
    padding: 1px 3px;
    border-radius: 50%;
    color: #b45309;
}
.lp-note-folderchip-edit:hover { background: rgba(180, 83, 9, .18); }
.lp-note-folderchip--add {
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
}
.lp-note-folderchip--add:hover { border-color: #d97706; color: #d97706; }

.lp-note-folder-editor {
    margin-top: 8px;
    background: #f8fafc;
    border: 1px solid #e9eef5;
    border-radius: 10px;
    padding: 10px;
}
#lp-note-folder-name {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 8px;
}
#lp-note-folder-name:focus {
    outline: none;
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .15);
}
.lp-note-folder-colors {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.lp-note-folder-color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: #fff;
    transition: transform .12s ease;
}
.lp-note-folder-color:hover { transform: scale(1.12); }
.lp-note-folder-color.active { border-color: #0f172a; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 23, 42, .3); }
.lp-note-folder-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-note-folder-editor-spacer { flex: 1; }
.lp-note-folder-save {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.lp-note-folder-save:hover { filter: brightness(1.05); }
.lp-note-folder-cancel {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 8px;
}
.lp-note-folder-del {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-note-folder-del[hidden] { display: none; }
.lp-note-folder-del:hover { background: #fee2e2; }

.lp-note-item-chip--folder { background: #fef3c7; color: #92400e; }

.lp-note-meta-block--folder {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.lp-note-meta-block--folder .lp-note-meta-label { min-width: 0; }
.lp-note-folder-select {
    margin-left: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
    color: #0f172a;
    background: #fff;
    max-width: 62%;
    cursor: pointer;
}
.lp-note-folder-select:focus { outline: none; border-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .15); }

/* ── Ordner: Dark Mode ─────────────────────────────────────── */
.lp-note-widget--dark .lp-note-folderbar { background: #1e293b; border-bottom-color: #334155; }
.lp-note-widget--dark .lp-note-folderchip { background: #0f172a; color: #cbd5e1; }
.lp-note-widget--dark .lp-note-folderchip:hover { background: #243345; }
.lp-note-widget--dark .lp-note-folderchip.active { background: #422006; color: #fcd34d; border-color: #b45309; }
.lp-note-widget--dark .lp-note-folderchip--add { background: transparent; border-color: #475569; color: #94a3b8; }
.lp-note-widget--dark .lp-note-folderchip--add:hover { border-color: #f59e0b; color: #f59e0b; }
.lp-note-widget--dark .lp-note-folder-editor { background: #0f172a; border-color: #334155; }
.lp-note-widget--dark #lp-note-folder-name,
.lp-note-widget--dark .lp-note-folder-select { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.lp-note-widget--dark .lp-note-folder-color { background: #1e293b; border-color: #334155; }
.lp-note-widget--dark .lp-note-folder-cancel { color: #94a3b8; }
.lp-note-widget--dark .lp-note-item-chip--folder { background: #422006; color: #fcd34d; }
.lp-note-widget--dark .lp-note-folder-del { background: #3a1414; border-color: #7f1d1d; color: #fca5a5; }