body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f5f6f8;
    margin: 0;
    padding: 30px;
    color: #333;
}

/* =========================================================
   FUMIDESK ACCOUNT SETTINGS
========================================================= */

.account-settings-page {
    width: min(1040px, 100%);
    margin: 0 auto;
}

.account-settings-sections {
    display: grid;
    gap: 18px;
}

.account-settings-section {
    padding: 22px;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 20%,
        var(--ios-line)
    );
    border-radius: 18px;
    background: color-mix(
        in srgb,
        var(--theme-primary) 3%,
        var(--ios-glass)
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.account-settings-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.account-settings-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--theme-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.account-settings-section h3,
.account-security-row h4 {
    margin: 0;
    color: var(--ios-text);
}

.account-settings-section h3 {
    font-size: 19px;
}

.account-settings-section-heading p,
.account-security-row p,
.account-settings-field small,
.account-avatar-editor small {
    color: var(--ios-muted);
}

.account-settings-section-heading p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.account-profile-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.account-avatar-editor {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.account-avatar-preview {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 38%,
        var(--ios-line)
    );
    border-radius: 32px;
    color: var(--theme-primary);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--theme-primary) 18%, var(--ios-glass-strong)),
        color-mix(in srgb, var(--theme-secondary) 10%, var(--ios-glass))
    );
    box-shadow: 0 14px 30px color-mix(
        in srgb,
        var(--theme-primary) 18%,
        transparent
    );
}

.account-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-avatar-preview svg {
    width: 46px;
    height: 46px;
    stroke-width: 1.7;
}

.account-photo-upload-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 28%,
        var(--ios-line)
    );
    border-radius: 10px;
    color: var(--ios-text);
    background: color-mix(
        in srgb,
        var(--theme-primary) 6%,
        var(--ios-glass-strong)
    );
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.account-photo-upload-button:hover {
    border-color: var(--theme-primary);
    background: color-mix(
        in srgb,
        var(--theme-primary) 12%,
        var(--ios-glass-strong)
    );
}

.account-photo-upload-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.account-photo-upload-button svg {
    width: 15px;
    height: 15px;
}

.account-avatar-editor small {
    max-width: 160px;
    font-size: 11px;
    line-height: 1.45;
}

.account-profile-form,
.account-security-form {
    display: grid;
    gap: 15px;
}

.account-settings-field,
.account-security-form label {
    display: grid;
    gap: 7px;
    color: var(--ios-text);
    font-size: 12px;
    font-weight: 750;
}

.account-settings-field input,
.account-security-form input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 26%,
        var(--ios-line)
    );
    border-radius: 11px;
    outline: none;
    color: var(--ios-text);
    background: color-mix(
        in srgb,
        var(--theme-primary) 5%,
        var(--ios-glass-strong)
    );
    font: inherit;
    font-weight: 500;
}

.account-settings-field input:focus,
.account-security-form input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--theme-primary) 16%,
        transparent
    );
}

.account-settings-field small {
    font-size: 11px;
    font-weight: 500;
}

.account-readonly-control {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    padding: 5px 6px 5px 12px;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 20%,
        var(--ios-line)
    );
    border-radius: 11px;
    color: var(--ios-text);
    background: color-mix(
        in srgb,
        var(--theme-primary) 4%,
        var(--ios-glass-strong)
    );
    font-size: 13px;
    font-weight: 500;
}

.account-readonly-control > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-readonly-control button {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    white-space: nowrap;
}

.account-avatar-choices {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.account-avatar-choices legend {
    margin-bottom: 8px;
    color: var(--ios-text);
    font-size: 12px;
    font-weight: 750;
}

.account-avatar-choices > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-avatar-choice {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 24%,
        var(--ios-line)
    ) !important;
    border-radius: 12px !important;
    color: var(--ios-muted) !important;
    background: color-mix(
        in srgb,
        var(--theme-primary) 4%,
        var(--ios-glass-strong)
    ) !important;
}

.account-avatar-choice:hover,
.account-avatar-choice.is-selected {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
    background: color-mix(
        in srgb,
        var(--theme-primary) 16%,
        var(--ios-glass-strong)
    ) !important;
}

.account-avatar-choice.is-selected {
    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--theme-primary) 14%,
        transparent
    );
}

.account-avatar-choice svg {
    width: 18px;
    height: 18px;
}

.account-settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.account-settings-actions button {
    min-width: 138px;
}

.account-security-list {
    display: grid;
    gap: 10px;
}

.account-security-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 74px;
    padding: 13px;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 14%,
        var(--ios-line)
    );
    border-radius: 14px;
    background: color-mix(
        in srgb,
        var(--theme-primary) 3%,
        var(--ios-glass-strong)
    );
}

.account-security-row-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--theme-primary);
    background: color-mix(
        in srgb,
        var(--theme-primary) 13%,
        transparent
    );
}

.account-security-row-icon svg {
    width: 18px;
    height: 18px;
}

.account-security-row h4 {
    font-size: 13px;
}

.account-security-row p {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.45;
}

.account-security-row > button {
    min-width: 106px;
    min-height: 36px !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
}

.account-security-status {
    padding: 6px 9px;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 22%,
        transparent
    );
    border-radius: 999px;
    color: var(--theme-primary);
    background: color-mix(
        in srgb,
        var(--theme-primary) 10%,
        transparent
    );
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.account-factor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.account-factor-list > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 8px;
    color: var(--ios-text);
    background: color-mix(
        in srgb,
        var(--theme-primary) 8%,
        transparent
    );
    font-size: 10px;
}

.account-factor-list svg {
    width: 12px;
    height: 12px;
}

.account-factor-list button {
    min-height: 0 !important;
    margin-left: 3px;
    padding: 0 !important;
    border: 0 !important;
    color: var(--theme-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 750;
}

/* Account security dialogs */

.account-security-overlay {
    position: fixed;
    inset: 0;
    z-index: 65000;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 20px;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.account-security-dialog {
    width: min(520px, calc(100vw - 28px));
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 22px;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 34%,
        var(--ios-line)
    );
    border-radius: 20px;
    color: var(--ios-text);
    background: color-mix(
        in srgb,
        var(--theme-primary) 5%,
        var(--ios-glass-strong)
    );
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    scrollbar-width: thin;
    scrollbar-color: var(--theme-primary) transparent;
}

.account-security-dialog::-webkit-scrollbar {
    width: 7px;
}

.account-security-dialog::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--theme-primary);
    background-clip: padding-box;
}

.account-security-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.account-security-dialog-title {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.account-security-dialog-title > svg {
    width: 21px;
    height: 21px;
    margin-top: 2px;
    color: var(--theme-primary);
}

.account-security-dialog-title h2 {
    margin: 0;
    color: var(--ios-text);
    font-size: 18px;
}

.account-security-dialog-title p {
    margin: 5px 0 0;
    color: var(--ios-muted);
    font-size: 12px;
    line-height: 1.5;
}

.account-security-dialog-close {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    flex: 0 0 34px;
    border-radius: 10px !important;
}

.account-security-dialog-close svg {
    width: 16px;
    height: 16px;
}

.account-security-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 4px;
}

.account-security-dialog-actions button {
    min-height: 38px !important;
    padding: 8px 13px !important;
}

.account-mfa-enrollment {
    display: grid;
    justify-items: center;
    gap: 15px;
}

.account-mfa-qr {
    width: 220px;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #ffffff;
}

.account-mfa-enrollment details {
    width: 100%;
    color: var(--ios-muted);
    font-size: 11px;
}

.account-mfa-enrollment summary {
    cursor: pointer;
}

.account-mfa-enrollment code {
    display: block;
    overflow-wrap: anywhere;
    margin-top: 8px;
    padding: 9px;
    border-radius: 8px;
    color: var(--ios-text);
    background: color-mix(
        in srgb,
        var(--theme-primary) 8%,
        transparent
    );
    user-select: all;
}

.account-mfa-enrollment .account-security-form {
    width: 100%;
}

#logged-in-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .account-settings-section {
        padding: 17px;
    }

    .account-profile-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .account-security-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .account-security-row > button,
    .account-security-row > .account-security-status {
        grid-column: 2;
        justify-self: start;
    }

    .account-readonly-control {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px;
    }

    .account-readonly-control button {
        align-self: stretch;
    }
}

/* ===============================
   HEADER
================================ */
h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
}

/* ===============================
   SECTIONS
================================ */
.section {
    margin-bottom: 35px;
}

.section-title {
    background: white;
    padding: 14px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

/* ===============================
   GRID
================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(350px, 1fr));
    gap: 20px;
    align-items: start;
}

.card-grid.single {
    grid-template-columns: 420px;
}

/* ===============================
   NORMAL TEMPLATE CARDS
================================ */
.card {
    background: white;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    min-height: 350px;
}

/* Uniform size for normal template cards */

#template-container
.card:not(.defendant-card) {
    height: 430px;
}

#template-container
.card:not(.defendant-card)
> .card-title-actions,

#template-container
.card:not(.defendant-card)
> .card-title {
    flex-shrink: 0;
}

/* ===============================
   TEMPLATE TITLE
================================ */
.card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 0 0 13px;

    color: #222;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.card-title > span {
    display: block;
    flex: 1;

    min-width: 0;

    overflow-wrap: anywhere;
}

.card-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    width: 100%;
    margin: 0 0 14px;

    gap: 4px;
    flex-shrink: 0;
}

.card-title-actions .copy-plain,
.card-title-actions .copy-rich {
    min-height: 32px !important;
    padding: 6px 9px !important;

    border-radius: 9px !important;

    font-size: 12px !important;
    font-weight: 500;
}

.card-menu {
    position: relative;
}

.card-menu-toggle {
    width: 36px;
    height: 34px;
    padding: 0;
    background: transparent;
    color: #475569;
    font-size: 23px;
    line-height: 1;
}

.card-menu-toggle:hover {
    background: #e2e8f0;
}

.card-menu-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 20;
    width: 150px;
    padding: 6px;
    background: white;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}

.card-menu-dropdown[hidden] {
    display: none;
}

.card-menu-dropdown button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    text-align: left;
    border-radius: 7px;
}

.card-menu-dropdown .edit-template {
    margin-bottom: 4px;
}

.template-date {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;

    flex-shrink: 0;
    margin: 0 0 0 auto;

    color: var(--ios-muted);
    color: color-mix(
        in srgb,
        var(--theme-primary) 38%,
        var(--ios-muted)
    );

    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    white-space: nowrap;
}

.template-date span {
    font-weight: 400;
    line-height: 14px;
}

.template-date svg {
    display: block;

    width: 14px;
    height: 14px;
    min-width: 14px;

    color: currentColor;
    stroke-width: 1.7;
}

/* ===============================
   TEMPLATE CONTENT
================================ */
.template-content {
    background: #fafafa;
    border-radius: 12px;
    padding: 18px;
    line-height: 1;
    font-size: 14px;
    margin-bottom: 18px;
}

#template-container
.card:not(.defendant-card)
> .template-content {
    flex: 1 1 auto;

    min-height: 0;
    margin-bottom: 0;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;

    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(
            var(--theme-primary-rgb),
            0.68
        )
        transparent;
}

#template-container
.card:not(.defendant-card)
> .template-content::-webkit-scrollbar {
    width: 8px;
}

#template-container
.card:not(.defendant-card)
> .template-content::-webkit-scrollbar-track {
    margin: 7px 0;

    background: transparent;
}

#template-container
.card:not(.defendant-card)
> .template-content::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.68
        );

    background-clip: padding-box;
}

#template-container
.card:not(.defendant-card)
> .template-content::-webkit-scrollbar-thumb:hover {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.9
        );

    background-clip: padding-box;
}

/* Placeholder */

.placeholder {
    color: red;
    font-weight: bold;
}

/* ===============================
   BUTTONS
================================ */
.buttons {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

button {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-family: "Segoe UI", Arial, sans-serif;
}

.copy-plain {
    background: #e9ecef;
}

.copy-rich {
    background: #2563eb;
    color: white;
}

button:hover {
    opacity: 0.85;
}

/* ===============================
   DEFENDANT INFO CARDS
================================ */
.defendant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(350px, 1fr));
    gap: 20px;
    align-items: start;
}

.defendant-grid .defendant-card {
    padding: 14px !important;
    min-height: unset !important;
    height: auto !important;
}

.defendant-grid .card-title {
    font-size: 15px;
    margin-bottom: 10px;
}

.defendant-grid .template-content {
    padding: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
}

.defendant-grid .buttons {
    margin-top: 5px;
}

.defendant-grid button {
    padding: 8px 12px;
    font-size: 12px;
}

/* ===============================
   SEARCH
================================ */
#search-box {
    width: 60%;
    max-width: 600px;
    padding: 14px 18px;
    margin: 20px auto;
    display: block;
    border-radius: 12px;
    border: 1px solid #ddd;
    font-size: 16px;
    font-family: "Segoe UI", Arial, sans-serif;
    outline: none;
}

#search-box:focus {
    border-color: #2563eb;
}

/* ===============================
   FAVORITES
================================ */
#favorites-container {
    margin-bottom: 35px;
}

.favorite-title {
    background: white;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.favorite-btn {
    background: transparent;
    font-size: 20px;
    padding: 5px 10px;
    cursor: pointer;
    border: none;
}

.favorite-btn.active {
    color: #f5b301;
}

/* ===============================
   ADD TEMPLATE FORM
================================ */
input, textarea, select {
    font-family: "Segoe UI", Arial, sans-serif;
}

#add-template-container {
    margin-bottom: 35px;
}

#add-template-container .card {
    max-width: 700px;
    min-height: unset;
}

#add-template-container input, #add-template-container textarea, #add-template-container select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    background: white;
}

#add-template-container textarea {
    resize: vertical;
    line-height: 1.5;
}

#add-template-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

#add-template-container button {
    background: #2563eb;
    color: white;
    padding: 10px 16px;
}

#add-template-container .add-template-form-actions {
    display: grid;
    grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr);
    gap: 10px;
}

#add-template-container .add-template-form-actions button {
    width: 100%;
    margin: 0;
    border-radius: 10px;
}

#add-template-container .cancel-add-template {
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    color: #1f2937;
}

#add-template-container .save-add-template {
    background: #2563eb;
    color: #ffffff;
}

#add-template-container button:hover {
    opacity: 0.85;
}

/* ===============================
   NAVIGATION
================================ */
.navigation {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

/* ===============================
   MOBILE
================================ */
@media (max-width:900px) {
    body {
        padding: 15px;
    }
    .card-grid {
        grid-template-columns: 1fr;
    }
    .card-grid.single {
        grid-template-columns: 1fr;
    }
    .defendant-grid {
        grid-template-columns: 1fr;
    }
    .defendant-grid .defendant-card {
        width: 100%;
    }
    #search-box {
        width: 90%;
    }
}

.edit-template {
    background: #f59e0b;
    color: white;
}

.delete-template {
    background: #dc2626;
    color: white;
}

.edit-template:hover, .delete-template:hover {
    opacity: 0.85;
}

/* ===============================
   EDIT TEMPLATE MODAL
================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    box-sizing: border-box;
    padding: 20px;
}

.modal {
    background: white;
    width: 520px;
    max-width: 90%;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    font-family: "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal h2 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 24px;
    color: #333;
}

.modal label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
}

.modal input, .modal textarea, .modal select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #ddd;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 18px;
}

.modal textarea {
    min-height: 220px;
    resize: vertical;
}

.modal input:focus, .modal textarea:focus, .modal select:focus {
    outline: none;
    border-color: #2563eb;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.modal-buttons button {
    padding: 10px 18px;
    border-radius: 10px;
}

.save-btn {
    background: #2563eb;
    color: white;
}

.cancel-btn {
    background: #e9ecef;
}

.edit-section {
    color: #777;
    background: #f5f6f8;
}

/* ===============================
   TOAST MESSAGE
================================ */
.toast-message {
    position: fixed;
    right: 25px;
    bottom: 25px;
    background: #222;
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10000;
}

.toast-message.show {
    opacity: 1;
    transform: translateY(0);
}

.save-edit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

[hidden] {
    display: none !important;
}

.password-setup-modal p {
    margin-bottom: 18px;
    color: #4b5563;
}

.save-invitation-password {
    background: #2563eb;
    color: white;
}

/* =========================================================
   AUTH PASSWORD CONTROLS
========================================================= */

.auth-password-field {
    position: relative;
    width: 100%;
}

.auth-password-field input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 42px 0 14px !important;
}

.auth-password-toggle {
    all: unset;

    position: absolute;
    top: 0;
    right: 10px;

    width: 24px;
    height: 100%;

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

    color: var(--theme-primary);
    cursor: pointer;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus,
.auth-password-toggle:active {
    color: var(--theme-primary-dark);
}

.auth-password-toggle:focus-visible {
    outline: none;
}

.auth-password-toggle svg {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* PASSWORD STRENGTH */

.signup-password-strength {
    display: grid;
    align-content: start;
    gap: 8px;

    margin: 0;
    padding: 12px;

    box-sizing: border-box;

    border: 1px solid var(--ios-line);
    border-radius: 11px;

    color: var(--ios-text);

    background: rgba(
        var(--theme-primary-rgb),
        0.04
    );
}

@media (max-width: 620px) {

    body.logged-out .signup-entry-form {
        grid-template-columns: 1fr !important;
    }

    body.logged-out
    .signup-entry-form
    > .login-fields,

    body.logged-out
    .signup-entry-form
    > .signup-password-strength,

    body.logged-out
    .signup-entry-form
    > .signup-submit-button,

    body.logged-out
    #signup-turnstile {
        grid-column: 1 !important;
    }

    body.logged-out
    .signup-entry-form
    > .login-fields {
        grid-row: 1;
    }

    body.logged-out
    .signup-entry-form
    > .signup-password-strength {
        grid-row: 2;
    }

    body.logged-out
    .signup-entry-form
    > .signup-submit-button {
        grid-row: 3;
    }

    body.logged-out
    #signup-turnstile {
        grid-row: 4;
    }
}

.signup-password-strength-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    font-size: 12px;
    font-weight: 650;
}

#signup-password-strength-label {
    color: var(--ios-muted);
}

#signup-password-strength-label[data-strength="1"] {
    color: #dc2626;
}

#signup-password-strength-label[data-strength="2"] {
    color: #d97706;
}

#signup-password-strength-label[data-strength="3"],
#signup-password-strength-label[data-strength="4"] {
    color: #16a34a;
}


.signup-password-strength-bar {
    height: 5px;
    overflow: hidden;

    border-radius: 999px;

    background: rgba(
        var(--theme-primary-rgb),
        0.12
    );
}

.signup-password-strength-bar span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background: var(--theme-primary);

    transition:
        width 0.2s ease;
}


.signup-password-strength p {
    margin: 1px 0 0;

    color: var(--ios-muted);

    font-size: 11px;
    font-weight: 600;
}


.signup-password-requirements {
    display: grid;
    gap: 5px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.signup-password-requirements li {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--ios-muted);

    font-size: 11px;
}

.signup-password-requirements li.is-complete {
    color: #16a34a;
}

.signup-password-requirements svg {
    width: 13px;
    height: 13px;
}


/* CONFIRM PASSWORD */

.signup-password-match {
    min-height: 16px;

    margin: -8px 0 4px;

    font-size: 11px;
    font-weight: 600;
}

.signup-password-match:empty {
    display: none;
}

.signup-password-match.is-match {
    color: #16a34a;
}

.signup-password-match.is-mismatch {
    color: #dc2626;
}

/* ===============================
   AUTHENTICATION
================================ */
#auth-container {
    display: flex;
    justify-content: center;
    margin: 18px 0;
}

#login-form, #logged-in-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#login-form[hidden], #logged-in-controls[hidden] {
    display: none;
}

#login-form input {
    width: 220px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
}

#logged-in-email {
    font-weight: 600;
}

#auth-container button:not(.auth-password-toggle) {
    background: #2563eb;
    color: white;
}

.empty-template-library {
    margin: 36px auto;
    padding: 32px 24px;
    max-width: 560px;
    text-align: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.empty-template-library h2 {
    margin: 0 0 8px;
}

.empty-template-library p {
    margin: 0;
    color: #6b7280;
}

/* ===============================
   DELETE CONFIRMATION TOAST
================================ */
.toast-confirm {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 320px;
    max-width: calc(100vw - 50px);
    box-sizing: border-box;
    background: #1f2937;
    color: white;
    padding: 18px;
    border-radius: 14px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 10001;
}

.toast-confirm.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-confirm-message {
    font-weight: 600;
    line-height: 1.4;
}

.toast-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.toast-confirm-buttons button {
    width: auto;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
}

.toast-cancel {
    background: #374151;
}

.toast-cancel:hover {
    background: #4b5563;
}

.toast-delete {
    background: #dc2626;
}

.toast-delete:hover {
    background: #b91c1c;
}

.toast-confirm-buttons button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ===============================
   WORD TEMPLATE IMPORT
================================ */
.import-panel {
    max-width: 980px;
    margin: 24px auto 30px;
    padding: 24px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.import-heading-row, .import-review-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.import-heading-row h2 {
    margin: 0 0 6px;
}

.import-heading-row p {
    margin: 0;
    color: #6b7280;
}

.file-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
    padding: 18px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    cursor: pointer;
    background: #f8fafc;
}

.file-picker span, .import-status {
    color: #64748b;
}

.file-picker input {
    margin-top: 8px;
}

.import-status {
    margin: 16px 0;
    font-weight: 600;
}

.import-review-bar {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    background: color-mix(
        in srgb,
        var(--theme-primary) 8%,
        var(--ios-card)
    );
    border: 1px solid var(--ios-line);
    border-radius: 12px;
}

.import-select-all-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.import-review-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.import-selection-count {
    color: var(--ios-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.import-candidate-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.import-candidate {
    display: block;
    padding: 0;
    border: 1px solid var(--ios-line);
    border-radius: 16px;
    background: var(--ios-card);
    box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.06);
}

.import-candidate-summary {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    align-items: stretch;
    min-height: 76px;
}

.import-candidate .import-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 70px;
    margin: 0;
    padding: 12px;
    border-right: 1px solid var(--ios-line);
    color: var(--ios-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.import-candidate .import-select input {
    margin: 0;
}

.import-candidate-expand {
    all: unset !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 16px 16px 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.import-candidate-expand:hover {
    transform: none !important;
    background: rgba(
        var(--theme-primary-rgb),
        0.06
    ) !important;
    box-shadow: none !important;
}

.import-candidate-expand:focus-visible {
    outline: 2px solid
        var(--theme-primary) !important;
    outline-offset: -4px !important;
}

.import-candidate-summary-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    text-align: left;
}

.import-candidate-summary-text > strong {
    display: block;
    width: 100%;
    color: var(--ios-text);
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.import-candidate-summary .import-source,
.import-candidate-location {
    display: block;
    width: 100%;
    color: var(--ios-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.import-candidate-expand > svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--theme-primary);
}

.import-candidate-details {
    display: grid;
    gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 18px;
    border-top: 1px solid var(--ios-line);
    background: color-mix(
        in srgb,
        var(--theme-primary) 3%,
        transparent
    );
    box-sizing: border-box;
}

.import-candidate-details .import-card-toolbar,
.import-candidate-details .import-preview-fields {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    .import-review-bar,
    .import-review-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .import-review-actions {
        width: 100%;
    }

    .import-candidate-summary {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .import-candidate .import-select {
        min-width: 0;
        padding: 10px 7px;
    }

    .import-candidate-expand {
        padding: 12px !important;
    }

    .import-candidate-details {
        padding: 12px;
    }
}

/* =========================================
   IMPORT SESSION — FIND & REPLACE
========================================= */

.import-find-replace {
    margin: 16px 0 12px;
    border: 1px solid var(--ios-line);
    border-radius: 16px;
    background: color-mix(
        in srgb,
        var(--theme-primary) 4%,
        var(--ios-card)
    );
    box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.05);
}

.import-find-replace-toggle {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.import-find-replace-toggle:hover {
    transform: none !important;
    background: rgba(
        var(--theme-primary-rgb),
        0.07
    ) !important;
    box-shadow: none !important;
}

.import-find-replace-toggle:focus-visible {
    outline: 2px solid
        var(--theme-primary) !important;
    outline-offset: -4px !important;
}

.import-find-replace-toggle > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.import-find-replace-toggle svg {
    width: 18px;
    height: 18px;
    color: var(--theme-primary);
}

.import-find-replace-body {
    padding: 18px;
    border-top: 1px solid var(--ios-line);
}

.import-find-replace-body[hidden] {
    display: none !important;
}

.import-find-replace-description {
    margin: 0 0 16px;
    color: var(--ios-muted);
    font-size: 13px;
    line-height: 1.5;
}

.import-find-replace-body
.find-replace-fields {
    margin: 0;
}

.import-find-replace-body
.find-replace-options {
    margin-top: 14px;
}

.import-find-replace-body
.find-replace-format-note {
    margin-bottom: 16px;
}

.import-find-replace-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.import-find-replace-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
}

.import-find-replace-actions button svg {
    width: 16px;
    height: 16px;
}

.import-find-replace-actions
button:last-child {
    color: #ffffff !important;
    background: linear-gradient(
        180deg,
        color-mix(
            in srgb,
            var(--theme-primary) 82%,
            white
        ),
        var(--theme-primary-dark)
    ) !important;
    border-color: rgba(
        255,
        255,
        255,
        0.30
    ) !important;
}

.import-find-replace-result {
    margin: 14px 0 0;
    padding: 11px 13px;
    color: var(--ios-text);
    background: rgba(
        var(--theme-primary-rgb),
        0.07
    );
    border: 1px solid rgba(
        var(--theme-primary-rgb),
        0.18
    );
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.import-find-replace-result:empty {
    display: none;
}

@media (max-width: 700px) {
    .import-find-replace-body {
        padding: 14px;
    }

    .import-find-replace-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .import-find-replace-actions button {
        width: 100% !important;
    }
}

.import-candidate input[type="text"], .import-candidate select, .import-candidate textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-weight: 400;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.import-candidate input[type="text"]:focus, .import-candidate select:focus, .import-candidate textarea:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.import-combobox {
    position: relative;
    width: 100%;
}

.import-combobox > input[type="text"] {
    padding-right: 44px;
}

.import-combobox-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 44px;
    padding: 0;
    border: 0;
    border-left: 1px solid #e2e8f0;
    border-radius: 0 12px 12px 0;
    background: transparent;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-combobox-arrow:hover {
    background: #f1f5f9;
}

.import-chevron {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.import-combobox input:disabled, .import-combobox-arrow:disabled {
    cursor: not-allowed;
    background: #f8fafc;
    color: #94a3b8;
    opacity: 1;
}

.import-combobox-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 40;
    width: 100%;
    max-height: 260px;
    padding: 7px;
    overflow-y: auto;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.import-combobox-menu[hidden] {
    display: none;
}

.import-combobox-menu button {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #1f2937;
    text-align: left;
}

.import-combobox-menu button:hover, .import-combobox-menu button:focus {
    background: #eff6ff;
    color: #1d4ed8;
}

.import-create-hint {
    padding: 11px 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.import-candidate textarea {
    resize: vertical;
    line-height: 1.45;
}

.secondary-button {
    background: #e5e7eb;
    color: #111827;
}

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
}

.rich-editor-toolbar button {
    width: auto;
    min-width: 38px;
    padding: 6px 9px;
    margin: 0;
    background: white;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
}

.rich-editor-toolbar button:hover {
    background: #e0e7ff;
}

.import-card-toolbar {
    grid-column: 1 / -1;
    align-items: center;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 9px;
}

.import-card-toolbar span {
    margin-right: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.floating-format-toolbar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 10020;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 10px 12px;
    border: 1px solid #94a3b8;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

.floating-format-toolbar span {
    margin-right: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.rich-template-editor {
    box-sizing: border-box;
    width: 100%;
    min-height: 220px;
    padding: 12px;
    overflow-y: auto;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 9px 9px;
    font: 400 14px/1 "Segoe UI", Arial, sans-serif;
    white-space: normal;
}

.rich-template-editor:focus {
    outline: 2px solid #93c5fd;
    outline-offset: -1px;
}

/*
 * CONSISTENT TEMPLATE PARAGRAPH SPACING
 * Applies to existing templates, future templates,
 * DOCX import review, Add, and Edit.
 */

.rich-template-editor ul,
.rich-template-editor ol,
.template-content ul,
.template-content ol {
    margin: 10px 0;
    padding-left: 24px;
}

.rich-template-editor p,
.rich-template-editor div,
.rich-template-editor li,
.template-content p,
.template-content div,
.template-content li {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/*
 * A Step heading and its explanation belong together,
 * so they should not have an extra gap between them.
 */

.rich-template-editor .template-step-heading + p,
.rich-template-editor .template-step-heading + div,
.template-content .template-step-heading + p,
.template-content .template-step-heading + div {
    margin-top: 0;
}

/*
 * Keep multi-line signatures grouped together.
 */

.rich-template-editor .signature-opening + .signature-line,
.rich-template-editor .signature-line + .signature-line,
.template-content .signature-opening + .signature-line,
.template-content .signature-line + .signature-line {
    margin-top: 0;
}

.rich-template-editor a, .template-content a {
    color: #2563eb;
    text-decoration: underline;
}

.modal .rich-template-editor {
    min-height: 260px;
    max-height: 48vh;
    overflow-y: auto;
    text-align: left;
}

.modal .rich-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
}

@media (max-width: 700px) {
    .import-panel {
        padding: 16px;
    }
    .import-heading-row {
        align-items: flex-start;
    }
    .import-candidate {
        grid-template-columns: 1fr;
    }
    .import-candidate label:last-child, .import-candidate .import-select {
        grid-column: 1;
    }
    .floating-format-toolbar span {
        display: none;
    }
    .floating-format-toolbar {
        bottom: 10px;
    }
    .modal-overlay {
        padding: 8px;
    }
    .modal {
        max-width: 100%;
        max-height: calc(100vh - 16px);
    }
}

@media (max-width: 560px) {
    .card-title-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* =========================================================
   IMPORT — BULK AREA / CATEGORY
========================================================= */

.import-bulk-location .import-preview-fields {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    column-gap: 16px !important;
    row-gap: 12px !important;

    margin-bottom: 18px;
}

.import-bulk-location
.import-find-replace-actions {
    margin-top: 4px;
}

/* ===============================
   CUSTOMIZABLE APP HEADER + AREAS
================================ */
.header {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 8px 24px;
    margin-bottom: 12px;
}

.brand-block {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.brand-block h1 {
    margin: 0 0 6px;
    white-space: nowrap;
}

.brand-block p {
    margin: 0;
    color: #64748b;
}

#auth-container {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    margin: 0;
}

.search-position {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    width: min(650px, 70vw);
}

#search-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 18px auto 0;
}

#template-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 18px auto 30px;
}

#template-controls[hidden] {
    display: none;
}

.area-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    width: 100%;
}

.area-tab {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    background: #eef2f7;
    border: 1px solid #dbe2ea;
    border-radius: 11px;
}

.area-tab button {
    border-radius: 0;
}

.area-name-button {
    background: transparent;
    color: #1f2937;
}

.area-name-button.active {
    background: #2563eb;
    color: white;
}

.rename-area-button {
    display: none;
    width: 38px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.65);
    border-left: 1px solid #dbe2ea;
}

.area-tab.context-open .rename-area-button {
    display: inline-block;
}

.template-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.rename-area-modal p {
    margin-top: -12px;
    color: #64748b;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .header {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .brand-block {
        grid-column: 1;
        grid-row: 1;
    }
    #auth-container {
        grid-column: 1;
        grid-row: 2;
        justify-content: center;
        margin-top: 12px;
    }
    .search-position {
        grid-column: 1;
        grid-row: 3;
        width: min(650px, 100%);
    }
    #search-box {
        margin: 10px auto 0;
    }
}

/* ===============================
   HOW-TO TUTORIAL
================================ */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;
    background: rgba(15, 23, 42, 0.58);
}

.tutorial-dialog {
    position: relative;
    width: min(520px, 100%);
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.3);
    text-align: center;
}

.tutorial-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: #64748b;
    font-size: 27px;
}

.tutorial-progress {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tutorial-icon {
    margin: 20px 0 8px;
    font-size: 46px;
}

.tutorial-dialog h2 {
    margin: 0 0 12px;
    font-size: 25px;
}

.tutorial-dialog p {
    min-height: 72px;
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.55;
}

.tutorial-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 22px 0;
}

.tutorial-dots span {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    border-radius: 50%;
}

.tutorial-dots span.active {
    background: #2563eb;
}

.tutorial-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tutorial-buttons button {
    min-width: 105px;
}

.tutorial-back {
    background: #e2e8f0;
    color: #1f2937;
}

.tutorial-next {
    margin-left: auto;
    background: #2563eb;
    color: white;
}

.tutorial-buttons button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .tutorial-dialog {
        padding: 26px 20px 22px;
    }
    .tutorial-dialog p {
        min-height: 100px;
        font-size: 15px;
    }
}

/* ===============================
   COLOR THEME
   =============================== */
:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

.theme-picker {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.theme-picker select {
    width: auto;
    min-width: 112px;
    padding: 9px 30px 9px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: white;
    color: #1f2937;
    cursor: pointer;
}

html[data-theme="dark"] body {
    background: #0f172a;
    color: #e5e7eb;
}

html[data-theme="dark"] .brand-block p, html[data-theme="dark"] .theme-picker, html[data-theme="dark"] .tutorial-progress, html[data-theme="dark"] .empty-template-library p {
    color: #94a3b8;
}

html[data-theme="dark"] .card, html[data-theme="dark"] .section-title, html[data-theme="dark"] .modal, html[data-theme="dark"] .tutorial-dialog, html[data-theme="dark"] .import-panel, html[data-theme="dark"] .import-candidate, html[data-theme="dark"] .empty-template-library, html[data-theme="dark"] .card-menu-dropdown {
    background: #111827;
    border-color: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .template-content, html[data-theme="dark"] .file-picker, html[data-theme="dark"] .import-review-bar, html[data-theme="dark"] .rich-editor-toolbar, html[data-theme="dark"] .modal .rich-editor-toolbar {
    background: #1e293b;
    border-color: #475569;
    color: #e5e7eb;
}

html[data-theme="dark"] .import-candidate input[type="text"], html[data-theme="dark"] .import-combobox-menu {
    background: #111827;
    border-color: #475569;
    color: #f8fafc;
}

html[data-theme="dark"] .import-combobox-arrow {
    border-color: #475569;
    color: #cbd5e1;
}

html[data-theme="dark"] .import-combobox-arrow:hover, html[data-theme="dark"] .import-combobox-menu button:hover, html[data-theme="dark"] .import-combobox-menu button:focus {
    background: #1e293b;
    color: #93c5fd;
}

html[data-theme="dark"] .import-combobox-menu button {
    color: #f8fafc;
}

html[data-theme="dark"] .import-create-hint {
    color: #94a3b8;
}

html[data-theme="dark"] .import-combobox input:disabled, html[data-theme="dark"] .import-combobox-arrow:disabled {
    background: #0f172a;
    color: #64748b;
}

html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] [contenteditable="true"] {
    background-color: #0f172a;
    border-color: #475569;
    color: #f8fafc;
}

html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder {
    color: #94a3b8;
}

/* The add form has ID-scoped light styles, so it needs equally specific
   theme overrides to prevent white fields and low-contrast text in dark mode. */
html[data-theme="dark"] #add-template-container input, html[data-theme="dark"] #add-template-container textarea, html[data-theme="dark"] #add-template-container select, html[data-theme="dark"] #edit-template-container input, html[data-theme="dark"] #edit-template-container textarea, html[data-theme="dark"] #edit-template-container select {
    background: #0f172a;
    border-color: #475569;
    color: #f8fafc;
    caret-color: #f8fafc;
}

html[data-theme="dark"] #add-template-container input::placeholder, html[data-theme="dark"] #add-template-container textarea::placeholder, html[data-theme="dark"] #edit-template-container input::placeholder, html[data-theme="dark"] #edit-template-container textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}

html[data-theme="dark"] #add-template-container input:focus, html[data-theme="dark"] #add-template-container textarea:focus, html[data-theme="dark"] #add-template-container select:focus, html[data-theme="dark"] #edit-template-container input:focus, html[data-theme="dark"] #edit-template-container textarea:focus, html[data-theme="dark"] #edit-template-container select:focus {
    border-color: #60a5fa;
    outline: none;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] #add-template-container option, html[data-theme="dark"] #edit-template-container option {
    background: #111827;
    color: #f8fafc;
}

html[data-theme="dark"] #add-template-container ::selection, html[data-theme="dark"] #edit-template-container ::selection {
    background: #2563eb;
    color: #ffffff;
}

html[data-theme="dark"] #add-template-container .cancel-add-template {
    background: #1e293b;
    border-color: #475569;
    color: #e5e7eb;
}

html[data-theme="dark"] .area-tab, html[data-theme="dark"] .template-actions button, html[data-theme="dark"] .copy-plain, html[data-theme="dark"] .tutorial-back, html[data-theme="dark"] .rich-editor-toolbar button, html[data-theme="dark"] .card-menu-dropdown button {
    background: #1e293b;
    border-color: #475569;
    color: #e5e7eb;
}

html[data-theme="dark"] .area-tab.active, html[data-theme="dark"] .copy-rich, html[data-theme="dark"] .tutorial-next {
    background: #2563eb;
    color: white;
}

html[data-theme="dark"] .card-menu-toggle, html[data-theme="dark"] .favorite-button, html[data-theme="dark"] .tutorial-close {
    color: #cbd5e1;
}

html[data-theme="dark"] .card-menu-toggle:hover {
    background: #334155;
}

html[data-theme="dark"] .tutorial-dialog p {
    color: #cbd5e1;
}

html[data-theme="dark"] a {
    color: #60a5fa;
}

/* Text that used fixed light-theme colors must follow the active theme. */

html[data-theme="dark"] .card-title, html[data-theme="dark"] .card-title > span, html[data-theme="dark"] .modal h2, html[data-theme="dark"] .modal label, html[data-theme="dark"] #add-template-container label, html[data-theme="dark"] .empty-template-library h2, html[data-theme="dark"] .import-heading-row h2, html[data-theme="dark"] .import-candidate label, html[data-theme="dark"] .area-name-button, html[data-theme="dark"] .file-picker strong, html[data-theme="dark"] .rich-template-editor, html[data-theme="dark"] .template-content strong, html[data-theme="dark"] .template-content b {
    color: #f8fafc;
}

html[data-theme="dark"] .import-heading-row p, html[data-theme="dark"] .file-picker span, html[data-theme="dark"] .import-status, html[data-theme="dark"] .rename-area-modal p, html[data-theme="dark"] .empty-template-library p {
    color: #cbd5e1;
}

html[data-theme="dark"] .area-name-button.active {
    color: white;
}

@media (max-width: 700px) {
    .theme-picker span {
        display: none;
    }
    .theme-picker select {
        min-width: 105px;
    }
}

/* ===============================
   SIGN-IN SCREEN
   =============================== */
.brand-icon {
    width: 42px;
    height: 42px;
    margin-right: 10px;
    object-fit: contain;
    vertical-align: middle;
}

.search-position[hidden] {
    display: none;
}

.logged-out {
    min-height: 100vh;
    box-sizing: border-box;
}

.logged-out .header {
    display: flex;
    min-height: calc(100vh - 60px);
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.logged-out .brand-block {
    margin-top: clamp(18px, 6vh, 60px);
}

.logged-out .search-position {
    display: none;
}

.logged-out #auth-container {
    position: static;
    width: 100%;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.logged-out .theme-picker {
    position: fixed;
    top: 22px;
    right: 28px;
}

.logged-out #login-form {
    width: min(520px, calc(100vw - 40px));
    padding: 34px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.login-heading {
    margin: 0 0 18px;
    text-align: center;
    color: #334155;
    font-size: 18px;
    font-weight: 700;
}

.login-entry-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.login-fields {
    display: grid;
    gap: 10px;
    align-content: start;
}

.auth-password-field {
    height: 42px;
    margin: 0;
}

.logged-out #login-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
}

.logged-out #login-form button:not(.auth-password-toggle) {
    min-height: 48px;
    padding: 12px 20px;
    white-space: nowrap;
}

.logged-out main {
    display: none;
}

html[data-theme="dark"] .logged-out #login-form {
    background: #111827;
    border-color: #334155;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .login-heading {
    color: #e5e7eb;
}

@media (max-width: 600px) {
    .logged-out .brand-block {
        margin-top: 68px;
    }
    .logged-out .theme-picker {
        top: 16px;
        right: 16px;
    }
    .logged-out #login-form {
        padding: 26px 20px;
    }
    .login-entry-row {
        grid-template-columns: 1fr;
    }
    .logged-out #login-form button:not(.auth-password-toggle) {
        width: 100%;
    }
}

/* ===============================
   ACCOUNT HAMBURGER MENU
   =============================== */
.login-theme-picker {
    align-self: center;
    margin-top: 10px;
}

.logged-out .login-theme-picker {
    position: fixed;
    z-index: 100;
    top: 22px;
    right: 28px;
    margin: 0;
}

.logged-out .brand-block h1 {
    font-size: clamp(36px, 4vw, 48px);
}

.logged-out .brand-icon {
    width: clamp(72px, 7vw, 92px);
    height: clamp(72px, 7vw, 92px);
    margin-right: 14px;
}

.account-menu {
    position: relative;
}

.account-menu summary {
    display: flex;
    width: 46px;
    height: 42px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #2563eb;
    color: white;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.account-menu summary::before {
    content: "";
    width: 17px;
    height: 14px;
    background: linear-gradient(
        to bottom,
        white 0 2px,
        transparent 2px 6px,
        white 6px 8px,
        transparent 8px 12px,
        white 12px 14px
    );
    border-radius: 1px;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-menu-panel {
    position: absolute;
    z-index: 5000;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: min(270px, calc(100vw - 32px));
    gap: 12px;
    padding: 18px;
    box-sizing: border-box;
    background: white;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.account-menu-email {
    overflow-wrap: anywhere;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    color: #1f2937;
    font-size: 14px;
    font-weight: 700;
}

.account-menu-profile {
    display: flex;
    align-items: center;
    gap: 11px;

    padding-bottom: 13px;

    text-align: left;
}

.account-menu-profile-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border: 1px solid
        color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        );

    border-radius: 12px;

    color: var(--theme-primary);

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 7%,
            var(--ios-glass-strong)
        );
}

.account-menu-profile-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.account-menu-profile-avatar svg {
    width: 20px;
    height: 20px;

    stroke-width: 1.6;
}

.account-menu-profile-info {
    min-width: 0;

    display: grid;
    justify-items: start;
    gap: 4px;
}

.account-menu-profile-info strong {
    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--ios-text);

    font-size: 14px;
    font-weight: 700;
}

.account-menu-role-badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 2px 7px;

    border: 1px solid
        rgba(
            var(--theme-primary-rgb),
            0.13
        );

    border-radius: 999px;

    color:
        color-mix(
            in srgb,
            var(--theme-primary) 62%,
            var(--ios-muted)
        );

    background:
        rgba(
            var(--theme-primary-rgb),
            0.065
        );

    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
}

.account-menu-panel .theme-picker {
    justify-content: space-between;
}

.account-menu-panel .theme-picker select {
    min-width: 130px;
}

#auth-container .account-menu-panel button {
    width: 100%;
    padding: 10px 12px;
    background: #eef2f7;
    color: #1f2937;
    text-align: left;
}

#auth-container .account-menu-panel .menu-sign-out {
    background: #fee2e2;
    color: #b91c1c;
}

html[data-theme="dark"] .account-menu-panel {
    background: #111827;
    border-color: #334155;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .account-menu-email {
    border-color: #334155;
    color: #f8fafc;
}

html[data-theme="dark"] #auth-container .account-menu-panel button {
    background: #1e293b;
    color: #e5e7eb;
}

html[data-theme="dark"] #auth-container .account-menu-panel .menu-sign-out {
    background: #450a0a;
    color: #fecaca;
}

/* ===============================
   VERSION 2 WORKSPACE
   =============================== */
#auth-container {
    grid-column: 1;
    justify-content: flex-start;
}

.account-menu-panel {
    left: 0;
    right: auto;
}

.split-view-controls {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.split-view-controls[hidden] {
    display: none;
}

#split-view-button {
    padding: 11px 16px;
    background: #2563eb;
    color: white;
}

.split-view-panel {
    position: absolute;
    z-index: 4500;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: min(300px, calc(100vw - 30px));
    gap: 13px;
    padding: 20px;
    box-sizing: border-box;
    background: white;
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}

.split-view-panel[hidden] {
    display: none;
}

.split-view-panel > strong {
    color: #1f2937;
    font-size: 16px;
}

.split-view-panel label {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.split-view-panel select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    background: #fff;
    color: #1f2937;
    font: 400 14px "Segoe UI", Arial, sans-serif;
}

.split-view-panel select:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.split-view-panel button {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 11px;
    font-weight: 700;
}

.split-view-panel .split-apply-button {
    background: #2563eb;
    color: #fff;
}

.split-view-panel .split-single-button {
    background: #eef2f7;
    color: #1f2937;
}

.rename-area-button {
    width: auto;
    min-width: 58px;
    padding: 8px 10px;
    font-size: 12px;
}

.category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    overflow: visible;
}

.category-toggle {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 9px;
    padding: 16px 18px;
    background: transparent;
    color: inherit;
    text-align: left;
}

.category-arrow {
    width: 16px;
}

.category-count {
    min-width: 28px;
    margin-left: auto;
    padding: 3px 8px;
    background: #eef2f7;
    border-radius: 999px;
    color: #475569;
    font-size: 12px;
    text-align: center;
}

.category-context-actions {
    display: none;
    gap: 6px;
    padding-right: 10px;
}

.category-title.context-open .category-context-actions {
    display: flex;
}

.category-context-actions button {
    padding: 7px 10px;
    background: #e2e8f0;
    color: #1f2937;
    font-size: 12px;
}

.card-grid[hidden] {
    display: none !important;
}

.category-collapsed {
    margin-bottom: 16px;
}

.split-area-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.split-area-pane {
    min-width: 0;
    padding: 18px;
    background: rgba(255, 255, 255, .45);
    border: 1px solid #dbe2ea;
    border-radius: 18px;
}

.split-area-pane > h2 {
    margin: 0 0 18px;
    font-size: 20px;
}

.split-area-pane .card-grid {
    grid-template-columns: 1fr;
}

.v2-menu-pages {
    display: grid;
    gap: 7px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.app-page-card {
    max-width: 1050px;
    margin: 22px auto;
    padding: 28px;
    background: white;
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.app-page-card h2 {
    margin-top: 0;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.help-grid article, .recovery-row, .user-report-row {
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.help-grid h3 {
    margin-top: 0;
}

.user-report-row {
    margin: 12px 0;
}

.user-report-row summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.user-report-content {
    margin-top: 14px;
}

.recovery-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

.recovery-row > div {
    flex: 1;
}

.recovery-row p, .recovery-row small {
    display: block;
    margin: 4px 0 0;
}

.import-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.import-source {
    color: #64748b;
    font-size: 12px;
    overflow-wrap: anywhere;
}

html[data-theme="dark"] .split-view-panel, html[data-theme="dark"] .app-page-card, html[data-theme="dark"] .split-area-pane {
    background: #111827;
    border-color: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .split-view-panel > strong, html[data-theme="dark"] .split-view-panel label {
    color: #f8fafc;
}

html[data-theme="dark"] .split-view-panel label span {
    color: #cbd5e1;
}

html[data-theme="dark"] .split-view-panel select {
    background: #0f172a;
    border-color: #475569;
    color: #f8fafc;
}

html[data-theme="dark"] .split-view-panel select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .split-view-panel option {
    background: #111827;
    color: #f8fafc;
}

html[data-theme="dark"] .split-view-panel .split-single-button {
    background: #1e293b;
    border: 1px solid #475569;
    color: #e5e7eb;
}

html[data-theme="dark"] .help-grid article, html[data-theme="dark"] .recovery-row, html[data-theme="dark"] .user-report-row {
    background: #1e293b;
    border-color: #475569;
}

html[data-theme="dark"] .category-count, html[data-theme="dark"] .category-context-actions button {
    background: #334155;
    color: #e5e7eb;
}

html[data-theme="dark"] .v2-menu-pages {
    border-color: #334155;
}

@media (max-width: 900px) {
    #auth-container {
        grid-column: 1;
        grid-row: 2;
    }
    .split-view-controls {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        margin-top: 12px;
    }
    .split-area-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .help-grid, .import-picker-grid {
        grid-template-columns: 1fr;
    }
    .app-page-card {
        padding: 20px;
    }
    .user-report-row summary {
        flex-direction: column;
    }
}

/* ===============================
   INTERACTIVE GUIDED TOUR
   =============================== */
.tutorial-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(15, 23, 42, 0.68);
}

.tutorial-highlight {
    position: relative !important;
    z-index: 12001 !important;
    outline: 4px solid #fbbf24 !important;
    outline-offset: 5px;
    border-radius: 10px;
    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.24) !important;
    pointer-events: none;
}

.tutorial-tooltip {
    position: fixed;
    z-index: 12002;
    box-sizing: border-box;
    margin: 0;
    padding: 24px;
    visibility: hidden;
    text-align: left;
}

.tutorial-tooltip .tutorial-icon {
    margin: 12px 0 5px;
    font-size: 35px;
}

.tutorial-tooltip h2 {
    font-size: 21px;
}

.tutorial-tooltip p {
    min-height: 0;
    font-size: 15px;
}

.tutorial-tooltip .tutorial-dots {
    margin: 17px 0;
}

@media (max-width: 560px) {
    .tutorial-tooltip {
        padding: 22px 18px 18px;
    }
    .tutorial-tooltip p {
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .logged-out .login-theme-picker {
        top: 14px;
        right: 14px;
    }
    .logged-out .brand-block h1 {
        font-size: 32px;
    }
    .logged-out .brand-icon {
        width: 64px;
        height: 64px;
    }
}

/* =========================================
   COLOR PALETTES + iOS-STYLE GLASS
   ========================================= */
:root,
html[data-palette="default"] {
    /* FumiDesk brand palette */
    --theme-primary: #6868D9;
    --theme-primary-dark: color-mix(
        in srgb,
        #6868D9 82%,
        #292A3D
    );
    --theme-secondary: #A9A7F5;
    --theme-soft: #F7F7FC;
    --theme-primary-rgb: 104, 104, 217;

    /* Named FumiDesk colors */
    --fumidesk-primary: #6868D9;
    --fumidesk-highlight: #A9A7F5;
    --fumidesk-background: #F7F7FC;
    --fumidesk-text: #292A3D;
    --fumidesk-dark-accent: #C7C6FF;
}

/* FumiDesk default palette — light mode */

html[data-theme="light"][data-palette="default"] {
    --ios-text: var(--fumidesk-text);
    --ios-muted: color-mix(
        in srgb,
        var(--fumidesk-text) 68%,
        white
    );
}

html[data-theme="light"][data-palette="default"] body {
    color: var(--fumidesk-text);
    background-color: var(--fumidesk-background);
}


/* FumiDesk default palette — dark mode */

html[data-theme="dark"][data-palette="default"] {
    --theme-secondary: var(--fumidesk-dark-accent);
}

html[data-theme="dark"][data-palette="default"] a,
html[data-theme="dark"][data-palette="default"] .lucide {
    accent-color: var(--fumidesk-dark-accent);
}

html[data-palette="strawberry"] {
    --theme-primary: #a00032;
    --theme-primary-dark: #790026;
    --theme-secondary: #f8a7b4;
    --theme-soft: #ebc18b;
    --theme-primary-rgb: 160, 0, 50;
}

html[data-palette="blue-delight"] {
    --theme-primary: #1954a6;
    --theme-primary-dark: #123e7b;
    --theme-secondary: #84c5ee;
    --theme-soft: #dceff9;
    --theme-primary-rgb: 25, 84, 166;
}

html[data-palette="purple-brown"] {
    --theme-primary: #97548d;
    --theme-primary-dark: #6d2b30;
    --theme-secondary: #b48f92;
    --theme-soft: #d8c7d3;
    --theme-primary-rgb: 151, 84, 141;
}

html[data-palette="san-juan"] {
    --theme-primary: #395f82;
    --theme-primary-dark: #294b69;
    --theme-secondary: #67819e;
    --theme-soft: #efc9cd;
    --theme-primary-rgb: 57, 95, 130;
}

/* =========================================
   FUMIDESK COLOR PRESETS
========================================= */
/* SKY */

html[data-palette="sky"] {
    --theme-primary: #3b82c4;
    --theme-primary-dark: #25659b;
    --theme-secondary: #9bd8f5;
    --theme-soft: #e2f4fc;
    --theme-primary-rgb: 59, 130, 196;
}

/* OCEAN */

html[data-palette="ocean"] {
    --theme-primary: #087ea4;
    --theme-primary-dark: #065f7d;
    --theme-secondary: #55c2da;
    --theme-soft: #d8f3f7;
    --theme-primary-rgb: 8, 126, 164;
}

/* BLUEBERRY */

html[data-palette="blueberry"] {
    --theme-primary: #5468b4;
    --theme-primary-dark: #3c4d91;
    --theme-secondary: #a9b8eb;
    --theme-soft: #e7ebfa;
    --theme-primary-rgb: 84, 104, 180;
}

/* AURORA */

html[data-palette="aurora"] {
    --theme-primary: #0f9f91;
    --theme-primary-dark: #08766c;
    --theme-secondary: #75d9cb;
    --theme-soft: #dcf7f2;
    --theme-primary-rgb: 15, 159, 145;
}

/* LAVENDER */

html[data-palette="lavender"] {
    --theme-primary: #8b6fc0;
    --theme-primary-dark: #674c9d;
    --theme-secondary: #c7b7e6;
    --theme-soft: #eee8f8;
    --theme-primary-rgb: 139, 111, 192;
}

/* ROSE */

html[data-palette="rose"] {
    --theme-primary: #b85778;
    --theme-primary-dark: #8e3c5a;
    --theme-secondary: #e5a2b9;
    --theme-soft: #fae6ed;
    --theme-primary-rgb: 184, 87, 120;
}

/* STRAWBERRY */

html[data-palette="strawberry"] {
    --theme-primary: #a00032;
    --theme-primary-dark: #790026;
    --theme-secondary: #f8a7b4;
    --theme-soft: #fbe2e8;
    --theme-primary-rgb: 160, 0, 50;
}

/* PEACH */

html[data-palette="peach"] {
    --theme-primary: #d97d61;
    --theme-primary-dark: #ae5d45;
    --theme-secondary: #f2b49f;
    --theme-soft: #fbe9e2;
    --theme-primary-rgb: 217, 125, 97;
}

/* SUNSET */

html[data-palette="sunset"] {
    --theme-primary: #d26743;
    --theme-primary-dark: #a64a2c;
    --theme-secondary: #efab63;
    --theme-soft: #f9ead5;
    --theme-primary-rgb: 210, 103, 67;
}

/* MINT */

html[data-palette="mint"] {
    --theme-primary: #429987;
    --theme-primary-dark: #2f7466;
    --theme-secondary: #9fd6c9;
    --theme-soft: #e2f5f0;
    --theme-primary-rgb: 66, 153, 135;
}

/* MATCHA */

html[data-palette="matcha"] {
    --theme-primary: #718557;
    --theme-primary-dark: #536440;
    --theme-secondary: #b8c79e;
    --theme-soft: #edf1e5;
    --theme-primary-rgb: 113, 133, 87;
}

/* FOREST */

html[data-palette="forest"] {
    --theme-primary: #356b51;
    --theme-primary-dark: #254d3a;
    --theme-secondary: #7cab91;
    --theme-soft: #dfece5;
    --theme-primary-rgb: 53, 107, 81;
}

/* SAND */

html[data-palette="sand"] {
    --theme-primary: #9b7b58;
    --theme-primary-dark: #755a3e;
    --theme-secondary: #d6c1a6;
    --theme-soft: #f3ece3;
    --theme-primary-rgb: 155, 123, 88;
}

/* COFFEE */

html[data-palette="coffee"] {
    --theme-primary: #745445;
    --theme-primary-dark: #51392f;
    --theme-secondary: #b99b8c;
    --theme-soft: #eee4de;
    --theme-primary-rgb: 116, 84, 69;
}

/* ESPRESSO */

html[data-palette="espresso"] {
    --theme-primary: #4c332e;
    --theme-primary-dark: #35231f;
    --theme-secondary: #9d8e8b;
    --theme-soft: #f1dba6;
    --theme-primary-rgb: 76, 51, 46;
}

/* MIDNIGHT */

html[data-palette="midnight"] {
    --theme-primary: #445b8f;
    --theme-primary-dark: #2d3d68;
    --theme-secondary: #8297c3;
    --theme-soft: #dfe5f2;
    --theme-primary-rgb: 68, 91, 143;
}

/* GRAPHITE */

html[data-palette="graphite"] {
    --theme-primary: #59616c;
    --theme-primary-dark: #3e444d;
    --theme-secondary: #9fa7b1;
    --theme-soft: #e7e9ec;
    --theme-primary-rgb: 89, 97, 108;
}

/* -----------------------------------------
   LIGHT AND DARK GLASS VALUES
   ----------------------------------------- */
html[data-theme="light"] {
    --ios-glass: rgba(255, 255, 255, 0.68);
    --ios-glass-strong: rgba(255, 255, 255, 0.84);
    --ios-card: rgba(255, 255, 255, 0.92);
    --ios-border: rgba(255, 255, 255, 0.82);
    --ios-line: rgba(15, 23, 42, 0.10);
    --ios-text: #1f2937;
    --ios-muted: #64748b;
    --ios-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

html[data-theme="dark"] {
    --ios-glass: rgba(30, 41, 59, 0.70);
    --ios-glass-strong: rgba(17, 24, 39, 0.86);
    --ios-card: rgba(17, 24, 39, 0.94);
    --ios-border: rgba(255, 255, 255, 0.13);
    --ios-line: rgba(148, 163, 184, 0.22);
    --ios-text: #f8fafc;
    --ios-muted: #cbd5e1;
    --ios-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* -----------------------------------------
   PAGE BACKGROUND
   ----------------------------------------- */
body {
    background-image: radial-gradient(
            circle at 12% 4%,
            rgba(var(--theme-primary-rgb), 0.055),
            transparent 28%
        );
    background-attachment: fixed;
}

/* -----------------------------------------
   GLASS MENUS AND OVERLAYS
   ----------------------------------------- */
.account-menu-panel, .card-menu-dropdown, .import-combobox-menu, .split-view-panel, .modal, .tutorial-dialog, .tutorial-tooltip {
    background: var(--ios-glass-strong) !important;
    border: 1px solid var(--ios-border) !important;
    box-shadow: var(--ios-shadow) !important;
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
}

/* -----------------------------------------
   CLEAN, READABLE PANELS
   ----------------------------------------- */
.card, .section-title, .import-panel, .import-candidate, .app-page-card, .split-area-pane, .file-picker, .empty-template-library {
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-line) !important;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.065) !important;
}

/* -----------------------------------------
   ALL NORMAL BUTTONS FOLLOW THE PALETTE
   ----------------------------------------- */
button:not(.auth-password-toggle), .area-tab {
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 22%,
            var(--ios-border)
        ) !important;
    background: linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 10%,
                var(--ios-glass-strong)
            ),
            color-mix(
                in srgb,
                var(--theme-primary) 5%,
                var(--ios-glass)
            )
        ) !important;
    color: var(--ios-text) !important;
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

button:not(.auth-password-toggle):hover, .area-tab:hover {
    opacity: 1 !important;
    transform: translateY(-1px);
    background: linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 18%,
                var(--ios-glass-strong)
            ),
            color-mix(
                in srgb,
                var(--theme-primary) 10%,
                var(--ios-glass)
            )
        ) !important;
    box-shadow: 0 7px 16px rgba(var(--theme-primary-rgb), 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

button:not(.auth-password-toggle):active, .area-tab:active {
    transform: scale(0.97);
}

/* -----------------------------------------
   IMPORTANT AND SELECTED BUTTONS
   ----------------------------------------- */
.copy-rich, .area-tab.active, .area-tab.selected, #auth-container button:not(.auth-switch-button):not(.forgot-password-button):not(.landing-auth-close):not(.auth-password-toggle), #add-template-button, #split-view-button, .split-view-button, #add-template-container .save-template, #edit-template-container .save-template, .import-review-bar button, .tutorial-next {
    background: linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 82%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb), 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

/* Destructive actions follow the selected palette */

.delete-template,
.delete-button,
.confirm-delete {
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 82%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;

    color: #ffffff !important;

    border-color:
        rgba(
            255,
            255,
            255,
            0.24
        ) !important;

    box-shadow:
        0 5px 14px
        rgba(
            var(--theme-primary-rgb),
            0.24
        ) !important;
}

/* Disabled buttons */

button:disabled {
    opacity: 0.48 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* -----------------------------------------
   INPUTS AND SELECTORS
   ----------------------------------------- */
.theme-picker select, .palette-picker select, input, textarea, select {
    border: 1px solid var(--ios-line);
    background: var(--ios-glass-strong);
    color: var(--ios-text);
}

.theme-picker select, .palette-picker select {
    border-radius: 12px;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.palette-picker {
    margin-top: 8px;
}

input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus {
    border-color: var(--theme-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.16) !important;
}

/* -----------------------------------------
   SMALL PALETTE ACCENTS
   ----------------------------------------- */
a {
    color: var(--theme-primary);
}

.category-count {
    background: rgba(var(--theme-primary-rgb), 0.11) !important;
    color: var(--theme-primary) !important;
}

.tutorial-dot.active {
    background: var(--theme-primary) !important;
}

.tutorial-highlight {
    outline-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 7px rgba(var(--theme-primary-rgb), 0.20) !important;
}

/* -----------------------------------------
   BALANCED TUTORIAL CLOSE BUTTON
   ----------------------------------------- */
.tutorial-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    border-radius: 12px !important;
    font-family: Arial, sans-serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* -----------------------------------------
   MONOCHROME SYMBOLS
   ----------------------------------------- */
.tutorial-icon, .area-icon, button, .area-tab {
    font-family: Inter, "Segoe UI Symbol", "Segoe UI", sans-serif;
}

/* Fallback for browsers without glass blur */

@supports not (
    (backdrop-filter: blur(10px))
) {
    .account-menu-panel, .card-menu-dropdown, .import-combobox-menu, .split-view-panel, .modal, .tutorial-dialog, .tutorial-tooltip {
        background: var(--ios-glass-strong) !important;
    }
}

/* =========================================
   COMPACT CONTROLS + FLOATING GLASS FORMS
   ========================================= */
/* -----------------------------------------
   COMPACT STANDARD BUTTONS
   ----------------------------------------- */
.template-actions button, .area-name-button, #split-view-button, .copy-plain, .copy-rich {
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.template-actions .lucide, .area-name-button .lucide, #split-view-button .lucide, .copy-plain .lucide, .copy-rich .lucide {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

/* -----------------------------------------
   MATCH FAVORITE AND THREE-DOT BUTTON SIZE
   ----------------------------------------- */
.card-title-actions .favorite-btn,
.card-title-actions .card-menu-toggle {
    display: inline-grid !important;
    place-items: center !important;

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 9px !important;
    line-height: 1 !important;
}

.card-title-actions .favorite-btn .lucide, .card-title-actions .card-menu-toggle .lucide {
    width: 17px;
    height: 17px;
    min-width: 17px;
}

.card-title-actions {
    align-items: center !important;
    gap: 5px !important;
}

/* -----------------------------------------
   ICON-ONLY RENAME AND SORT CONTROLS
   ----------------------------------------- */
.icon-action-button, .category-context-actions .icon-action-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

.icon-action-button .lucide {
    width: 16px;
    height: 16px;
}

.area-tab.context-open {
    align-items: center;
}

.area-tab.context-open .rename-area-button {
    display: inline-grid !important;
}

.category-context-actions {
    align-items: center;
}

/* -----------------------------------------
   LARGER, NEUTRAL HAMBURGER BUTTON
   ----------------------------------------- */
#account-menu > summary {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 15px !important;
    background: linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 9%,
                var(--ios-glass-strong)
            ),
            color-mix(
                in srgb,
                var(--theme-primary) 4%,
                var(--ios-glass)
            )
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 20%,
            var(--ios-border)
        ) !important;
    color: var(--ios-text) !important;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}

#account-menu > summary::before {
    font-size: 27px !important;
    line-height: 1 !important;
    color: currentColor !important;
}

/* Make the opened menu wide enough */

.account-menu-panel {
    width: 320px !important;
    min-width: 320px !important;
    padding: 18px !important;
}

.account-menu-panel button, .v2-menu-pages button {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 13px !important;
    justify-content: flex-start !important;
    white-space: nowrap;
}

.account-menu-panel .theme-picker {
    box-sizing: border-box;
    width: 100%;
}

.account-menu-panel .theme-picker select {
    min-width: 170px;
}

.account-menu-panel .theme-picker > span {
    flex: 0 0 58px;
}

/* -----------------------------------------
   CLEAN CUSTOM DROPDOWN ARROWS
   ----------------------------------------- */
.split-view-panel select, #add-template-container select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 17px 17px !important;
}

html[data-theme="dark"] .split-view-panel select, html[data-theme="dark"] #add-template-container select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
}

/* -----------------------------------------
   SPLIT VIEW PANEL
   ----------------------------------------- */
.split-view-panel {
    width: 280px !important;
    padding: 18px !important;
    border-radius: 20px !important;
}

.split-view-panel label {
    display: grid;
    gap: 6px;
}

.split-view-panel select {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
}

.split-view-panel button {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px !important;
    padding: 9px 12px !important;
}

/* -----------------------------------------
   TRANSLUCENT IMPORT WORD PANEL
   ----------------------------------------- */
.import-panel {
    width: min(1000px, calc(100% - 40px));
    margin: 28px auto !important;
    background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            transparent 52%
        ), var(--ios-glass) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
    -webkit-backdrop-filter: blur(26px) saturate(165%);
    backdrop-filter: blur(26px) saturate(165%);
}

.import-panel .file-picker {
    background: color-mix(
            in srgb,
            var(--ios-glass-strong) 82%,
            transparent
        ) !important;
    border: 1px solid var(--ios-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

/* -----------------------------------------
   CENTERED FLOATING ADD TEMPLATE FORM
   ----------------------------------------- */
#add-template-container:not(:empty) {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 28px auto 40px !important;
    padding: 0 20px;
}

#add-template-container .card {
    box-sizing: border-box;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 28px !important;
    background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.16),
            transparent 50%
        ), var(--ios-glass) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
    -webkit-backdrop-filter: blur(26px) saturate(165%);
    backdrop-filter: blur(26px) saturate(165%);
}

#add-template-container input, #add-template-container textarea, #add-template-container select {
    background: color-mix(
            in srgb,
            var(--ios-glass-strong) 88%,
            transparent
        ) !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 13px !important;
}

#add-template-container textarea {
    min-height: 230px;
}

#add-template-container .add-template-form-actions button {
    min-height: 42px !important;
    padding: 10px 15px !important;
}

/* Save follows the chosen palette */

#add-template-container .save-add-template {
    background: linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 82%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;
    color: #ffffff !important;
}

/* -----------------------------------------
   MOBILE ADJUSTMENTS
   ----------------------------------------- */
@media (max-width: 600px) {
    .account-menu-panel {
        width: min(
            320px,
            calc(100vw - 32px)
        ) !important;
        min-width: 0 !important;
    }
    #add-template-container:not(:empty) {
        padding: 0 12px;
    }
    #add-template-container .card {
        padding: 20px !important;
    }
    .import-panel {
        width: calc(100% - 24px);
    }
}

/* FINAL CONTROL ALIGNMENT */

/* Hide area controls until the area is right-clicked */

.area-tab:not(.context-open) .rename-area-button {
    display: none !important;
}

/* Hide category controls until the category is right-clicked */

.category-title:not(.context-open) .category-context-actions {
    display: none !important;
}

/* Center icons and text inside regular buttons */

#add-template-button, #import-word-button, .copy-plain, .copy-rich, .card-menu-dropdown button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1 !important;
}

/* Prevent text from sitting lower than its icon */

#add-template-button span, #import-word-button span, .copy-plain span, .copy-rich span, .card-menu-dropdown button span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Uniform thin icons */

#add-template-button .lucide, #import-word-button .lucide, .copy-plain .lucide, .copy-rich .lucide, .card-menu-dropdown .lucide {
    display: block;
    width: 15px;
    height: 15px;
    min-width: 15px;
    stroke-width: 1.5;
}

/* Favorite and three-dot controls */

.card-title-actions .favorite-btn, .card-title-actions .card-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.card-title-actions .favorite-btn .lucide, .card-title-actions .card-menu-toggle .lucide {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0;
}

/* Keep all card controls on the same center line */

.card-title-actions {
    display: flex !important;
    align-items: center !important;
}

/* Fill the selected favorite star */

.favorite-btn.active .lucide {
    fill: currentColor;
}

/* FINAL ACCOUNT MENU FIT */

.account-menu-panel {
    width: min(320px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.account-menu-panel > *, .account-menu-panel .v2-menu-pages {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.account-menu-panel .v2-menu-pages {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

.account-menu-panel button, .account-menu-panel .v2-menu-pages button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.account-menu-panel .theme-picker {
    display: grid !important;
    grid-template-columns: 65px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
}

.account-menu-panel .theme-picker > span {
    display: block !important;
    min-width: 0 !important;
}

.account-menu-panel .theme-picker select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.account-menu-panel > button {
    justify-content: flex-start !important;
}

/* =========================================
   FINAL TYPOGRAPHY, ALIGNMENT AND FLOATING FORMS
   ========================================= */
/* -----------------------------------------
   CONSISTENT APP FONT
   ----------------------------------------- */
html, body, button, input, textarea, select, option, label, summary {
    font-family: "Segoe UI", Arial, sans-serif !important;
}

/* -----------------------------------------
   MENU ICON AND TEXT ALIGNMENT
   ----------------------------------------- */
.account-menu-panel button, .account-menu-panel .v2-menu-pages button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    line-height: 1 !important;
}

.account-menu-panel button span, .account-menu-panel .v2-menu-pages button span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.account-menu-panel button .lucide, .account-menu-panel .v2-menu-pages button .lucide {
    display: block !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    stroke-width: 1.5 !important;
}

/* Sign Out remains inside the menu */

.account-menu-panel .menu-sign-out {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* -----------------------------------------
   SPLIT VIEW ALIGNMENT
   ----------------------------------------- */
#split-view-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1 !important;
}

#split-view-button span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

#split-view-button .lucide {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

/* -----------------------------------------
   RESTORE NORMAL TEMPLATE FONT WEIGHT
   ----------------------------------------- */
.template-content {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 400 !important;
}

.template-content p, .template-content li, .template-content div {
    font-weight: 400;
}

/* Preserve formatting that is genuinely bold */

.template-content strong, .template-content b, .template-content p.template-step-heading {
    font-weight: 700 !important;
}

/* Preserve italic formatting */

.template-content em, .template-content i {
    font-style: italic !important;
}

/* -----------------------------------------
   SMALL SCREEN POSITION
   ----------------------------------------- */
@media (max-width: 760px) {
    #add-template-container:not(:empty), #import-template-container:not(:empty) {
        top: 76px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: calc(100vw - 24px) !important;
    }
    #add-template-container:not(:empty) .card {
        padding: 20px !important;
    }
}

/* =========================================
   FINAL HAMBURGER AND AREA ICONS
   ========================================= */
/* Smaller, clearer hamburger */

#account-menu > summary {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 13px !important;
    display: grid !important;
    place-items: center !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 14%,
            var(--ios-glass-strong)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 48%,
            var(--ios-border)
        ) !important;
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}

/* Replace the pale hamburger lines */

#account-menu > summary::before {
    content: "" !important;
    display: block !important;
    width: 17px !important;
    height: 14px !important;
    background: linear-gradient(
            to bottom,
            var(--theme-primary-dark) 0 2px,
            transparent 2px 6px,
            var(--theme-primary-dark) 6px 8px,
            transparent 8px 12px,
            var(--theme-primary-dark) 12px 14px
        ) !important;
    border-radius: 1px !important;
}

/* Slightly stronger when opened */

#account-menu[open] > summary {
    background: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-glass-strong)
        ) !important;
    border-color: var(--theme-primary) !important;
}

/* Thin area icons */

.area-name-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1 !important;
}

.area-name-button span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.area-name-button .lucide {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    margin: 0 !important;
    stroke-width: 1.5 !important;
}

/* Filled favorite star only when Favorites is selected */

.area-name-button.active .lucide-star {
    fill: currentColor;
}

/* Dark-mode hamburger contrast */

html[data-theme="dark"] #account-menu > summary::before {
    background: linear-gradient(
            to bottom,
            var(--theme-primary) 0 2px,
            transparent 2px 6px,
            var(--theme-primary) 6px 8px,
            transparent 8px 12px,
            var(--theme-primary) 12px 14px
        ) !important;
}

/* =========================================
   DASHBOARD, LIBRARY, BADGES AND HELP CHAT
   ========================================= */
/*
 * Dashboard uses its own quick-access sections.
 * Area/category navigation belongs to Library.
 */

.dashboard-home #area-navigation {
    display: none !important;
}

/* Hamburger menu badges */

.v2-menu-pages button {
    position: relative;
}

.menu-notification-badge {
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(
            239,
            68,
            68,
            0.16
        );
    border-radius: 999px;
    background: rgba(
            239,
            68,
            68,
            0.09
        );
    color: rgba(
            185,
            28,
            28,
            0.88
        );
    box-shadow: inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.26
        );
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-theme="dark"] .menu-notification-badge {
    border-color: rgba(
            248,
            113,
            113,
            0.15
        );
    background: rgba(
            248,
            113,
            113,
            0.10
        );
    color: rgba(
            254,
            202,
            202,
            0.90
        );
    box-shadow: inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.04
        );
}

.menu-notification-badge[hidden] {
    display: none !important;
}

.help-new-badge {
    min-width: auto;
}

/* Help page */

.help-center-page {
    width: min(850px, calc(100% - 32px));
    margin: 24px auto;
}

.help-center-heading, .help-admin-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.help-center-heading h2, .help-admin-contact p {
    margin: 0;
}

.help-center-heading p {
    margin: 6px 0 0;
    color: var(--muted-text, #64748b);
}

.help-chat-messages {
    min-height: 320px;
    max-height: 52vh;
    margin: 24px 0 14px;
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.38);
}

.help-chat-message {
    max-width: 78%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.help-chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.help-chat-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent, #2563eb);
    color: #ffffff;
}

.help-chat-avatar .lucide {
    width: 18px;
    height: 18px;
    stroke-width: 1.6;
}

.help-chat-message p {
    margin: 0;
    padding: 11px 14px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.16);
    line-height: 1.45;
}

.help-chat-message.user p {
    background: var(--accent, #2563eb);
    color: #ffffff;
}

.help-chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.help-chat-form input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 14px;
    color: inherit;
    background: rgba(255, 255, 255, 0.7);
}

.help-chat-form button, .help-center-heading button, .button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 13px;
    line-height: 1;
    text-decoration: none;
}

.help-chat-form .lucide, .help-center-heading .lucide, .button-link .lucide {
    width: 18px;
    height: 18px;
    display: block;
    stroke-width: 1.6;
}

.help-admin-contact {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 18px;
    background: rgba(148, 163, 184, 0.1);
}

/* Dark mode help fields */

html[data-theme="dark"] .help-chat-messages, html[data-theme="dark"] .help-chat-form input {
    background: rgba(15, 23, 42, 0.6);
    color: #f8fafc;
}

/* Lucide tutorial icons */

.tutorial-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tutorial-icon .lucide {
    width: 34px;
    height: 34px;
    display: block;
    stroke-width: 1.5;
}

/* Perfectly align Sign In icon and text */

.logged-out #login-form button:not(.auth-password-toggle) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1 !important;
}

.logged-out #login-form button:not(.auth-password-toggle) span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.logged-out #login-form button:not(.auth-password-toggle) .lucide {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    stroke-width: 1.6 !important;
}

@media (max-width: 650px) {
    .help-center-heading, .help-admin-contact {
        align-items: stretch;
        flex-direction: column;
    }
    .help-chat-message {
        max-width: 92%;
    }
    .help-chat-form {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   IN-APP ADMINISTRATOR CONTACT FORM
   ========================================= */
.support-form-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.support-contact-form {
    width: min(600px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 24px;
    color: var(--text-color, #1f2937);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 65px rgba(15, 23, 42, 0.24);
}

.support-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.support-form-heading h2 {
    margin: 0 0 6px;
}

.support-form-heading p {
    margin: 0;
    color: var(
        --muted-text,
        #64748b
    );
    line-height: 1.45;
}

.support-form-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
}

.support-form-close .lucide {
    width: 20px;
    height: 20px;
    display: block;
    stroke-width: 1.6;
}

.support-contact-form form {
    display: grid;
    gap: 18px;
}

.support-contact-form label {
    display: grid;
    gap: 8px;
    font-weight: 600;
}

.support-contact-form input, .support-contact-form select, .support-contact-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 14px;
    font: inherit;
    font-weight: 400;
    color: inherit;
    background: rgba(255, 255, 255, 0.76);
}

.support-contact-form textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.45;
}

.support-contact-form input:focus, .support-contact-form select:focus, .support-contact-form textarea:focus {
    outline: 2px solid color-mix(
            in srgb,
            var(--accent, #2563eb) 40%,
            transparent
        );
    border-color: var(--accent, #2563eb);
}

.support-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.support-form-actions button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 13px;
    line-height: 1;
}

.support-form-actions button span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.support-form-actions .lucide {
    width: 18px;
    height: 18px;
    display: block;
    stroke-width: 1.6;
}

#support-request-submit:disabled {
    cursor: wait;
    opacity: 0.7;
}

#support-request-submit:disabled .lucide {
    animation: support-loader-spin 0.9s linear infinite;
}

@keyframes support-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Dark mode */

html[data-theme="dark"] .support-contact-form {
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.3);
}

html[data-theme="dark"] .support-contact-form input, html[data-theme="dark"] .support-contact-form select, html[data-theme="dark"] .support-contact-form textarea {
    color: #f8fafc;
    background: rgba(30, 41, 59, 0.88);
    border-color: rgba(148, 163, 184, 0.35);
}

/* Small screens */

@media (max-width: 600px) {
    .support-form-overlay {
        padding: 12px;
        align-items: flex-end;
    }
    .support-contact-form {
        max-height: calc(100vh - 24px);
        padding: 22px 18px;
        border-radius: 22px;
    }
    .support-form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .support-form-actions button {
        width: 100%;
    }
}

/* =========================================
   SUPPORT REQUEST INBOX
   ========================================= */
.support-inbox {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.support-inbox-heading, .support-thread-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.support-inbox-heading h3, .support-thread-heading h3 {
    margin: 0;
}

.support-inbox-heading p, .support-thread-heading p {
    margin: 5px 0 0;
    color: var(
        --muted-text,
        #64748b
    );
}

.support-inbox-heading button, .support-thread-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1;
}

.support-inbox-heading .lucide, .support-thread-back .lucide {
    width: 17px;
    height: 17px;
    display: block;
    stroke-width: 1.6;
}

.support-request-list {
    display: grid;
    gap: 10px;
}

.support-request-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 16px;
    color: inherit;
    text-align: left;
    background: rgba(148, 163, 184, 0.08);
    box-shadow: none;
}

.support-request-card:hover {
    border-color: var(--accent, #2563eb);
    transform: translateY(-1px);
}

.support-request-card-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.support-request-card-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-request-card-main small {
    color: var(
        --muted-text,
        #64748b
    );
}

.support-request-card-details {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.support-status-badge,
.support-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;
    padding: 0 9px;

    border:
        1px solid
        var(--ios-line);

    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;

    backdrop-filter:
        blur(12px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(12px)
        saturate(135%);

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.25
        ),
        0 3px 10px
        rgba(
            15,
            23,
            42,
            0.04
        );
}


/* Open */

.status-open {
    color: #1d4ed8;

    background:
        color-mix(
            in srgb,
            #3b82f6 8%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            #3b82f6 20%,
            var(--ios-line)
        );
}


/* In progress */

.status-in_progress {
    color: #92400e;

    background:
        color-mix(
            in srgb,
            #f59e0b 8%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            #f59e0b 20%,
            var(--ios-line)
        );
}


/* Resolved and closed */

.status-resolved,
.status-closed {
    color: #166534;

    background:
        color-mix(
            in srgb,
            #22c55e 8%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            #22c55e 20%,
            var(--ios-line)
        );
}


/* Low priority */

.priority-low {
    color: #475569;

    background:
        color-mix(
            in srgb,
            #94a3b8 8%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            #94a3b8 20%,
            var(--ios-line)
        );
}


/* Normal priority */

.priority-normal {
    color: #4338ca;

    background:
        color-mix(
            in srgb,
            #6366f1 8%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            #6366f1 20%,
            var(--ios-line)
        );
}


/* High priority */

.priority-high {
    color: #b91c1c;

    background:
        color-mix(
            in srgb,
            #ef4444 8%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            #ef4444 20%,
            var(--ios-line)
        );
}


/* Dark-theme text adjustments */

html[data-theme="dark"]
.status-open {
    color: #93c5fd;
}

html[data-theme="dark"]
.status-in_progress {
    color: #fcd34d;
}

html[data-theme="dark"]
.status-resolved,
html[data-theme="dark"]
.status-closed {
    color: #86efac;
}

html[data-theme="dark"]
.priority-low {
    color: #cbd5e1;
}

html[data-theme="dark"]
.priority-normal {
    color: #c4b5fd;
}

html[data-theme="dark"]
.priority-high {
    color: #fca5a5;
}

.support-empty-state {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: 18px;
    text-align: center;
    background: rgba(148, 163, 184, 0.06);
}

.support-empty-state .lucide {
    width: 31px;
    height: 31px;
    margin-bottom: 10px;
    stroke-width: 1.4;
}

.support-empty-state p {
    margin: 5px 0 0;
    color: var(
        --muted-text,
        #64748b
    );
}

.support-thread-container {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 20px;
    background: rgba(148, 163, 184, 0.07);
}

.support-thread-container[hidden] {
    display: none !important;
}

.support-thread-back {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    color: var(--accent, #2563eb);
    background: transparent;
    box-shadow: none;
}

.support-thread-messages {
    max-height: 430px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 3px 16px;
}

.support-thread-message {
    width: min(76%, 590px);
    padding: 13px 15px;
    box-sizing: border-box;
    border-radius: 17px;
    background: rgba(148, 163, 184, 0.16);
}

.support-thread-message.own-message {
    align-self: flex-end;
    color: #ffffff;
    background: var(--accent, #2563eb);
}

.support-message-author {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    font-size: 12px;
}

.support-message-author .lucide {
    width: 16px;
    height: 16px;
    display: block;
    stroke-width: 1.6;
}

.support-thread-message p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.support-thread-message small {
    display: block;
    margin-top: 8px;
    opacity: 0.75;
}

.support-reply-form {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.support-reply-form textarea {
    width: 100%;
    min-height: 105px;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 15px;
    font: inherit;
    color: inherit;
    resize: vertical;
    background: rgba(255, 255, 255, 0.75);
}

.support-reply-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.support-reply-actions button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    line-height: 1;
}

.support-reply-actions .lucide {
    width: 18px;
    height: 18px;
    display: block;
    stroke-width: 1.6;
}

.support-thread-resolved,
.support-inbox-error {
    padding: 14px 16px;

    border:
        1px solid
        var(--ios-line);

    border-radius: 14px;

    backdrop-filter:
        blur(14px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(135%);

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.28
        ),
        0 4px 14px
        rgba(
            15,
            23,
            42,
            0.04
        );
}


/* Resolved notice */

.support-thread-resolved {
    color: #166534;

    background:
        color-mix(
            in srgb,
            #22c55e 8%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            #22c55e 20%,
            var(--ios-line)
        );
}


/* Inbox error notice */

.support-inbox-error {
    color: #b91c1c;

    background:
        color-mix(
            in srgb,
            #ef4444 8%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            #ef4444 20%,
            var(--ios-line)
        );
}


/* Dark-theme text adjustments */

html[data-theme="dark"]
.support-thread-resolved {
    color: #86efac;
}

html[data-theme="dark"]
.support-inbox-error {
    color: #fca5a5;
}

.support-loading {
    color: var(
        --muted-text,
        #64748b
    );
}

/* Dark mode */

html[data-theme="dark"] .support-request-card, html[data-theme="dark"] .support-thread-container, html[data-theme="dark"] .support-empty-state {
    background: rgba(30, 41, 59, 0.62);
    border-color: rgba(148, 163, 184, 0.27);
}

html[data-theme="dark"] .support-reply-form textarea {
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.74);
    border-color: rgba(148, 163, 184, 0.32);
}

/* Mobile */

@media (max-width: 700px) {
    .support-inbox-heading, .support-thread-heading, .support-request-card {
        align-items: stretch;
        flex-direction: column;
    }
    .support-request-card-details {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .support-thread-message {
        width: 92%;
    }
    .support-reply-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .support-reply-actions button {
        width: 100%;
    }
}

/* Lucide area icon in Split View */

.split-area-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.split-area-heading .lucide {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: block;
    stroke-width: 1.5;
}

/* =========================================
   LOGIN APPEARANCE THREE-DOT MENU
   ========================================= */
.login-preferences {
    position: fixed;
    top: 24px;
    right: 28px;
    z-index: 1000;
}

.login-preferences > summary {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 14px;
    color: var(
        --text-color,
        #1f2937
    );
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
    cursor: pointer;
    list-style: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.login-preferences > summary::-webkit-details-marker {
    display: none;
}

.login-preferences > summary::marker {
    display: none;
    content: "";
}

.login-preferences > summary .lucide {
    width: 21px;
    height: 21px;
    display: block;
    stroke-width: 1.7;
}

.login-preferences[open] > summary {
    border-color: var(--accent, #2563eb);
}

.login-preferences-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 270px;
    display: grid;
    gap: 12px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.login-preferences-panel .theme-picker {
    position: static !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.login-preferences-panel .theme-picker select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Remove old login control positioning */

.logged-out .login-preferences-panel .login-theme-picker, .logged-out .login-preferences-panel .palette-picker {
    position: static !important;
    inset: auto !important;
}

/* Dark mode */

html[data-theme="dark"] .login-preferences > summary, html[data-theme="dark"] .login-preferences-panel {
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.32);
}

/* Small screens */

@media (max-width: 600px) {
    .login-preferences {
        top: 14px;
        right: 14px;
    }
    .login-preferences-panel {
        width: min(
                270px,
                calc(100vw - 28px)
            );
    }
}

/* =========================================
   FULLY TRANSLUCENT LOGIN GLASS MENU
   ========================================= */
.login-preferences > summary {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 30px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(22px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
}

.login-preferences-panel {
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 22px 55px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: blur(28px) saturate(185%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(185%) !important;
}

.login-preferences-panel .theme-picker select {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    color: var(
            --text-color,
            #1f2937
        ) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* Keep native dropdown choices readable */

.login-preferences-panel .theme-picker option {
    color: #1f2937;
    background: #ffffff;
}

/* Dark mode translucent glass */

html[data-theme="dark"] .login-preferences > summary {
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(15, 23, 42, 0.2) !important;
}

html[data-theme="dark"] .login-preferences-panel {
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(15, 23, 42, 0.24) !important;
}

html[data-theme="dark"] .login-preferences-panel .theme-picker select {
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(15, 23, 42, 0.22) !important;
}

html[data-theme="dark"] .login-preferences-panel .theme-picker option {
    color: #f8fafc;
    background: #0f172a;
}

/* =========================================
   IMESSAGE-STYLE SUPPORT CHAT
========================================= */
.support-thread-messages {
    gap: 10px !important;
    padding: 10px 6px 18px !important;
}

/* The article becomes a transparent message wrapper */

.support-thread-messages .support-thread-message {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(68%, 520px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    align-self: flex-start;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Administrator messages appear on the right */

.support-thread-messages .support-thread-message.own-message {
    align-self: flex-end;
    align-items: flex-end !important;
    color: inherit !important;
    background: transparent !important;
}

/* Sender name sits above—not inside—the bubble */

.support-thread-message .support-message-author {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 9px 1px !important;
    padding: 0 !important;
    color: var(--text-color, #475569) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

.support-thread-message .support-message-author .lucide {
    width: 11px !important;
    height: 11px !important;
}

/* Only the message text becomes the actual bubble */

.support-thread-message p {
    display: block !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    color: #111827 !important;
    background: #e5e7eb !important;
    border-radius: 18px 18px 18px 5px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Blue iMessage-style administrator bubble */

.support-thread-message.own-message p {
    color: #ffffff !important;
    background: #0b84ff !important;
    border-radius: 18px 18px 5px 18px !important;
}

/* Timestamp appears underneath the bubble */

.support-thread-message small {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 1px 9px 0 !important;
    padding: 0 !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    opacity: 0.75;
}

@media (max-width: 700px) {
    .support-thread-messages .support-thread-message {
        max-width: 82% !important;
    }
}

/* =========================================
   iOS GLASS — HELP AND ADMIN CHAT
========================================= */
/* Main help page and administrator conversation */

.help-center-page, .support-thread-container {
    background: linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--theme-secondary) 10%,
                var(--ios-glass-strong)
            ),
            var(--ios-glass)
        ) !important;
    border: 1px solid var(--ios-border) !important;
    box-shadow: var(--ios-shadow) !important;
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
}

/* Chat scrolling areas */

.help-chat-messages, .support-thread-messages {
    background: linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--theme-primary) 5%,
                var(--ios-glass)
            ),
            color-mix(
                in srgb,
                var(--theme-secondary) 6%,
                transparent
            )
        ) !important;
    border: 1px solid var(--ios-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(15, 23, 42, 0.05) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}

/* Automated assistant message bubbles */

.help-chat-message:not(.user) p {
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-secondary) 18%,
            var(--ios-glass-strong)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-secondary) 30%,
            var(--ios-border)
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 5px 14px rgba(15, 23, 42, 0.06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    backdrop-filter: blur(18px) saturate(155%);
}

/* User messages in the automated chat */

.help-chat-message.user p {
    color: #ffffff !important;
    background: linear-gradient(
            145deg,
            var(--theme-primary),
            var(--theme-primary-dark)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-secondary) 48%,
            transparent
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 6px 16px rgba(var(--theme-primary-rgb), 0.22) !important;
}

/* Automated chat avatars */

.help-chat-avatar {
    background: linear-gradient(
            145deg,
            var(--theme-primary),
            var(--theme-primary-dark)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-secondary) 55%,
            transparent
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 5px 14px rgba(var(--theme-primary-rgb), 0.20) !important;
}

/* Admin chat: other person's iMessage bubble */

.support-thread-message.other-message p {
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-secondary) 16%,
            var(--ios-glass-strong)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-secondary) 28%,
            var(--ios-border)
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    backdrop-filter: blur(18px) saturate(155%);
}

/* Admin chat: administrator iMessage bubble */

.support-thread-message.own-message p {
    color: #ffffff !important;
    background: linear-gradient(
            145deg,
            var(--theme-primary),
            var(--theme-primary-dark)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-secondary) 48%,
            transparent
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 5px 14px rgba(var(--theme-primary-rgb), 0.20) !important;
}

/* Names and timestamps adapt to light/dark mode */

.support-message-author, .support-thread-message small {
    color: var(--ios-muted) !important;
}

.support-thread-message.own-message .support-message-author {
    color: var(--theme-primary) !important;
}

/* Message fields */

.help-chat-form input, .support-reply-form textarea {
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        ) !important;
    border: 1px solid var(--ios-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
}

.help-chat-form input:focus, .support-reply-form textarea:focus {
    outline: none !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 65%,
            white
        ) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* Inbox request cards */

.support-request-card {
    background: color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass)
        ) !important;
    border: 1px solid var(--ios-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 5px 15px rgba(15, 23, 42, 0.06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}

.support-request-card:hover, .support-request-card:focus-visible {
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 52%,
            var(--ios-border)
        ) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 11%,
            var(--ios-glass-strong)
        ) !important;
}

/* Contact administrator panel */

.help-admin-contact {
    background: color-mix(
            in srgb,
            var(--theme-secondary) 10%,
            var(--ios-glass)
        ) !important;
    border: 1px solid var(--ios-border) !important;
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
}

/* =========================================
   FINAL — CONTENT-SIZED CHAT BUBBLES
========================================= */
.support-thread-messages .support-thread-message {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(70%, 440px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* User messages: left side */

.support-thread-messages .support-thread-message.other-message {
    align-self: flex-start !important;
    align-items: flex-start !important;
}

/* Administrator messages: right side */

.support-thread-messages .support-thread-message.own-message {
    align-self: flex-end !important;
    align-items: flex-end !important;
}

/* Only the paragraph is the colored bubble */

.support-thread-messages .support-thread-message > p {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 250px !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Keep short administrator bubbles on the right */

.support-thread-message.own-message > p {
    align-self: flex-end !important;
}

/* Keep user bubbles on the left */

.support-thread-message.other-message > p {
    align-self: flex-start !important;
}

@media (max-width: 700px) {
    .support-thread-messages .support-thread-message {
        max-width: 82% !important;
    }
    .support-thread-messages .support-thread-message > p {
        max-width: 100% !important;
    }
}

/* =========================================
   FORGOT PASSWORD
========================================= */
.forgot-password-button {
    width: fit-content !important;
    margin: 8px auto 0 !important;
    padding: 5px 9px !important;
    color: var(--theme-primary) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none;
    cursor: pointer;
}

.forgot-password-button:hover {
    color: var(--theme-primary-dark) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 8%,
            transparent
        ) !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: underline;
}

.forgot-password-button:disabled {
    opacity: 0.55 !important;
    cursor: wait;
}

/* =========================================
   TEAMS-STYLE RICH EDITOR TOOLBAR
========================================= */
.rich-editor-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 7px;
    background: color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
    border: 1px solid var(--ios-line);
    border-bottom: 0;
    border-radius: 11px 11px 0 0;
}

.rich-editor-toolbar > button, .rich-editor-more-toggle {
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 2%,
            var(--ios-glass)
        ) !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.rich-editor-toolbar > button:hover, .rich-editor-more-toggle:hover {
    background: color-mix(
            in srgb,
            var(--theme-primary) 10%,
            var(--ios-glass)
        ) !important;
}

.rich-editor-toolbar .lucide {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}

/* MORE MENU */

.rich-editor-more {
    position: relative;
}

.rich-editor-more-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 12000;
    width: 245px;
    max-height: min(430px, 70vh);
    overflow-y: auto;
    padding: 6px;
    background: color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        );
    border: 1px solid var(--ios-border);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(
            15,
            23,
            42,
            .20
        );
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.rich-editor-more-menu[hidden] {
    display: none !important;
}

.rich-editor-more-menu button {
    width: 100% !important;
    min-height: 38px;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 7px 9px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    text-align: left;
}

.rich-editor-more-menu button:hover {
    background: color-mix(
            in srgb,
            var(--theme-primary) 10%,
            transparent
        ) !important;
}

.rich-editor-more-menu button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.rich-editor-more-menu kbd {
    color: var(--ios-muted);
    background: transparent;
    font-family: inherit;
    font-size: 10px;
}

.rich-editor-menu-separator {
    height: 1px;
    margin: 5px 4px;
    background: var(--ios-line);
}

/* EDITOR */

.rich-template-editor {
    min-height: 220px;
    padding: 12px;
    overflow-y: auto;
    color: var(--ios-text);
    background: color-mix(
            in srgb,
            var(--theme-primary) 2%,
            var(--ios-glass-strong)
        );
    border: 1px solid var(--ios-line);
    border-radius: 0 0 11px 11px;
    outline: none;
    line-height: 1;
}

.rich-template-editor:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(
            in srgb,
            var(--theme-primary) 10%,
            transparent
        );
}

.rich-template-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ios-muted);
    opacity: .7;
    pointer-events: none;
}

/* CODE */

.rich-template-editor code, .template-content code {
    padding: 2px 5px;
    background: color-mix(
            in srgb,
            var(--theme-primary) 9%,
            var(--ios-glass)
        );
    border: 1px solid var(--ios-line);
    border-radius: 5px;
    font-family: Consolas, "Courier New", monospace;
    font-size: .92em;
}

/* INDENT */

.rich-template-editor blockquote, .template-content blockquote {
    margin: 8px 0 8px 22px;
    padding-left: 12px;
    border-left: 3px solid color-mix(
            in srgb,
            var(--theme-primary) 45%,
            var(--ios-line)
        );
}

/* HORIZONTAL RULE */

.rich-template-editor hr, .template-content hr {
    height: 1px;
    margin: 14px 0;
    border: 0;
    background: var(--ios-line);
}

/* =========================================
   WORD-STYLE HYPERLINK MENU
========================================= */
.app-hyperlink-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 16000;
    background: transparent;
}

.app-hyperlink-menu {
    position: fixed;
    width: 230px;
    padding: 6px;
    background: color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
    border: 1px solid var(--ios-border);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(
            15,
            23,
            42,
            .20
        );
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.app-hyperlink-menu button {
    width: 100% !important;
    min-height: 38px;
    display: grid !important;
    grid-template-columns: 23px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 10px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-align: left;
    cursor: pointer;
}

.app-hyperlink-menu button:hover {
    background: color-mix(
            in srgb,
            var(--theme-primary) 10%,
            transparent
        ) !important;
}

.app-hyperlink-menu button.danger {
    color:
        var(--theme-primary-dark) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 8%,
            transparent
        ) !important;
}

.app-hyperlink-menu button.danger:hover {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 15%,
            transparent
        ) !important;
}

.app-hyperlink-menu button .lucide {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}

.app-hyperlink-menu-separator {
    height: 1px;
    margin: 5px 4px;
    background: var(--ios-line);
}

/* =========================================
   ADD / EDIT HYPERLINK DIALOG
========================================= */
.app-link-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.app-link-dialog {
    box-sizing: border-box;
    width: min(
            440px,
            calc(100vw - 32px)
        );
    padding: 22px;
    color: var(--ios-text);
    background: linear-gradient(
            145deg,

            color-mix(
                in srgb,
                var(--theme-primary) 5%,
                var(--ios-glass-strong)
            ),

            color-mix(
                in srgb,
                var(--theme-secondary) 5%,
                var(--ios-glass)
            )
        );
    border: 1px solid var(--ios-border);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(
            15,
            23,
            42,
            0.26
        );
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
}

/* HEADER */

.app-link-dialog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.app-link-dialog-heading > div {
    min-width: 0;
}

.app-link-dialog-heading h3 {
    margin: 0 0 5px;
    color: var(--ios-text);
    font-size: 19px;
    font-weight: 700;
}

.app-link-dialog-heading p {
    margin: 0;
    color: var(--ios-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* CLOSE */

.app-link-dialog-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: var(--ios-muted) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass)
        ) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.app-link-dialog-close:hover {
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 11%,
            var(--ios-glass)
        ) !important;
}

.app-link-dialog-close .lucide {
    width: 16px;
    height: 16px;
}

/* URL FIELD */

.app-link-dialog-field {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 7px;
    color: var(--ios-text);
    font-size: 12px;
    font-weight: 650;
}

.app-link-input-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    overflow: hidden;
    color: var(--ios-muted);
    background: color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
    border: 1px solid var(--ios-line);
    border-radius: 11px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.app-link-input-wrap:focus-within {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(
            in srgb,
            var(--theme-primary) 13%,
            transparent
        );
}

.app-link-input-wrap .lucide {
    width: 17px;
    height: 17px;
    flex: none;
}

.app-link-input-wrap input {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-link-input-wrap input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.app-link-input-wrap input::placeholder {
    color: var(--ios-muted);
}

/* ERROR */

.app-link-dialog-error {
    margin-top: 8px;
    padding: 8px 10px;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 9px;
    font-size: 11px;
}

.app-link-dialog-error[hidden] {
    display: none !important;
}

/* ACTIONS */

.app-link-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.app-link-dialog-actions button {
    width: auto !important;
    min-width: 95px;
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 8px 15px !important;
    border-radius: 10px !important;
}

.app-link-dialog-actions .secondary-button {
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass)
        ) !important;
    border: 1px solid var(--ios-line) !important;
    box-shadow: none !important;
}

.app-link-dialog-actions .secondary-button:hover {
    background: color-mix(
            in srgb,
            var(--theme-primary) 9%,
            var(--ios-glass)
        ) !important;
}

.app-link-save {
    color: #ffffff !important;
    background: linear-gradient(
            145deg,
            var(--theme-primary),
            var(--theme-primary-dark)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 70%,
            white
        ) !important;
    box-shadow: 0 5px 15px rgba(
            var(--theme-primary-rgb),
            .22
        ) !important;
}

.app-link-save:hover {
    transform: translateY(-1px);
}

.app-link-save .lucide {
    width: 15px;
    height: 15px;
}

/* DARK MODE */

html[data-theme="dark"] .app-link-dialog-overlay {
    background: rgba(0, 0, 0, .46);
}

/* MOBILE */

@media (max-width: 520px) {
    .app-link-dialog {
        padding: 18px;
    }
    .app-link-dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .app-link-dialog-actions button {
        width: 100% !important;
    }
}

/* =========================
   FUMIDESK BRAND LOGO
========================= */
.brand-block {
    display: flex;
    align-items: center;
}

.brand-logo {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

body.hide-fumidesk-brand:not(.logged-out) .brand-block {
    display: none !important;
}

/* =========================
   LOGGED-OUT HEADER LAYOUT
========================= */
body.logged-out .header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.logged-out .brand-block {
    display: flex;
    justify-content: center;
    width: 100%;
}

body.logged-out #auth-container {
    width: 100%;
    display: flex;
    justify-content: center;
    /* brings sign-in closer to logo */
    margin-top: -200px;
}

body.logged-out #login-form {
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   FUMIDESK FOOTER
========================= */
.site-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    margin-top: -30px;
    color: var(--text-secondary);
    font-size: 12px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 700px) {
    .site-footer {
        padding: 14px 20px;
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 20px;
    }
    .footer-left {
        flex-wrap: wrap;
        gap: 12px 16px;
    }
    .footer-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================
   FINAL FUMIDESK FOOTER POSITION
========================================= */
.site-footer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px !important;
    padding: 10px 20px !important;
    position: relative;
    clear: both;
    border-top: 1px solid var(--border-color);
}

.footer-copyright {
    opacity: 0.65;
}

.footer-version {
    opacity: 0.45;
}

/* =========================================
   EXACTLY CENTER FUMIDESK LOGO
========================================= */
body:not(.logged-out) .brand-block {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: max-content;
    max-width: 100%;
    justify-self: center !important;
    display: flex;
    align-items: center;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    pointer-events: none;
}

body:not(.logged-out) .brand-logo {
    display: block;
    margin: 0 auto !important;
    pointer-events: auto;
}

/* =========================================
   FUMIDESK THEME SEGMENTED CONTROL
========================================= */
.theme-segmented-picker {
    display: grid !important;
    grid-template-columns: 65px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
}

.theme-picker-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ios-muted, #64748b);
}

.theme-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ios-line);
    border-radius: 13px;
    background: color-mix(
            in srgb,
            var(--ios-glass-strong) 82%,
            transparent
        );
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.theme-choice {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--ios-muted, #64748b) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.theme-choice .lucide {
    width: 14px;
    height: 14px;
    stroke-width: 1.7;
}

.theme-choice:hover {
    color: var(--theme-primary) !important;
    background: rgba(var(--theme-primary-rgb), 0.08) !important;
}

.theme-choice.active {
    color: var(--theme-primary-dark) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 15%,
            var(--ios-glass-strong)
        ) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.32) !important;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="dark"] .theme-choice.active {
    color: var(--theme-secondary) !important;
}

@media (max-width: 600px) {
    .theme-segmented-picker {
        grid-template-columns: 1fr !important;
    }
    .theme-picker-label {
        display: block !important;
    }
}

/* =========================================
   THEME CONTROL SIZE FIX
========================================= */
.theme-segmented-picker {
    grid-template-columns: 65px 205px !important;
}

.theme-segmented {
    grid-template-columns: repeat(3, minmax(60px, 1fr));
    gap: 5px;
    padding: 4px;
}

.theme-choice {
    min-height: 38px !important;
    padding: 7px 10px !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    white-space: nowrap;
}

.theme-choice .lucide {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
}

/* =========================================
   COMPACT THEME ICON BUTTONS
========================================= */
.theme-segmented-picker {
    grid-template-columns: 58px 116px !important;
    gap: 8px !important;
}

.theme-segmented {
    grid-template-columns: repeat(3, 34px) !important;
    gap: 15px !important;
    padding: 6px !important;
    width: max-content !important;
}

.theme-choice {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
}

.theme-choice .lucide {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
}

.theme-choice > span {
    display: none !important;
}

/* =========================================
   FUMIDESK COLOR SELECTOR
========================================= */
.palette-picker {
    display: grid !important;
    grid-template-columns: 65px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
}

.palette-picker > span {
    display: block !important;
    color: var(--ios-muted, #64748b);
    font-size: 13px;
    font-weight: 700;
}

.palette-picker select {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    box-sizing: border-box;
    padding: 0 36px 0 14px !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
    border-radius: 12px !important;
    color: var(--ios-text) !important;
    background-color: var(--ios-glass-strong) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 15px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 10px rgba(15, 23, 42, 0.06) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.palette-picker select:hover {
    border-color: rgba(var(--theme-primary-rgb), 0.48) !important;
}

.palette-picker select:focus {
    outline: none !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.13) !important;
}

html[data-theme="dark"] .palette-picker select {
    color: #f8fafc !important;
    background-color: color-mix(
            in srgb,
            var(--theme-primary-dark) 12%,
            var(--ios-glass-strong)
        ) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.34) !important;
}

html[data-theme="dark"] .palette-picker select option {
    color: #f8fafc;
    background: var(--theme-dark-panel, #111827);
}

/* =========================================
   PALETTE-AWARE DARK MODE
========================================= */
html[data-theme="dark"] {
    --theme-dark-bg: color-mix(
            in srgb,
            var(--theme-primary-dark) 38%,
            #050608
        );
    --theme-dark-panel: color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            #0c0f14
        );
    --theme-dark-panel-strong: color-mix(
            in srgb,
            var(--theme-primary-dark) 30%,
            #080a0e
        );
    /* Glass now follows selected palette */
    --ios-glass: color-mix(
            in srgb,
            var(--theme-primary-dark) 18%,
            rgba(15, 18, 24, 0.78)
        );
    --ios-glass-strong: color-mix(
            in srgb,
            var(--theme-primary-dark) 23%,
            rgba(10, 13, 18, 0.90)
        );
    --ios-card: color-mix(
            in srgb,
            var(--theme-primary-dark) 17%,
            rgba(11, 14, 20, 0.94)
        );
    --ios-border: color-mix(
            in srgb,
            var(--theme-primary) 18%,
            rgba(255, 255, 255, 0.12)
        );
    --ios-line: color-mix(
            in srgb,
            var(--theme-primary) 13%,
            rgba(148, 163, 184, 0.20)
        );
}

html[data-theme="dark"] body {
    background: var(--theme-dark-bg) !important;
    color: #e5e7eb;
}

/* =========================================
   PALETTE-AWARE DARK SEARCH BAR
========================================= */
html[data-theme="dark"] #search-box {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 16%,
            var(--theme-dark-panel)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 3px 12px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="dark"] #search-box::placeholder {
    color: color-mix(
            in srgb,
            var(--theme-secondary) 55%,
            #a1a1aa
        ) !important;
    opacity: 0.8;
}

html[data-theme="dark"] #search-box:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* =========================================
   THEME BUTTON FINAL SIZE
========================================= */
.theme-segmented-picker {
    grid-template-columns: 65px auto !important;
    gap: 10px !important;
}

.theme-segmented {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: max-content !important;
    padding: 4px !important;
}

.theme-choice {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
}

.theme-choice .lucide {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
}

/* =========================================
   PALETTE-AWARE LOGIN CARD
========================================= */
html[data-theme="dark"] .logged-out #login-form {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 20%,
            var(--theme-dark-panel)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .logged-out #login-form input {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 14%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
}

/* =========================================
   PALETTE-AWARE COLOR PICKER
========================================= */
html[data-theme="dark"] .palette-picker select {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 18%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .palette-picker select option {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 22%,
            #0a0b0d
        );
    color: #f8fafc;
}

/* =========================================
   FINAL PALETTE-AWARE NATIVE COLOR SELECT
========================================= */
html[data-theme="dark"] .login-preferences-panel .palette-picker select, html[data-theme="dark"] .account-menu-panel .palette-picker select {
    background-color: color-mix(
            in srgb,
            var(--theme-primary-dark) 28%,
            #0b0909
        ) !important;
    color: #f8fafc !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 45%,
            rgba(255, 255, 255, 0.18)
        ) !important;
}

/* =========================================
   CUSTOM FUMIDESK PALETTE DROPDOWN
========================================= */
.custom-palette-picker {
    display: grid !important;
    grid-template-columns: 65px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
}

.custom-palette-picker > span {
    font-size: 13px;
    font-weight: 700;
    color: var(--ios-muted, #64748b);
}

/* Wrapper */

.palette-dropdown {
    position: relative;
    min-width: 0;
    width: 100%;
}

/* Closed dropdown */

.palette-dropdown-toggle {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 12px 0 14px !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
    border-radius: 12px !important;
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass-strong)
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 10px rgba(15,23,42,0.06) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer;
}

.palette-dropdown-toggle:hover {
    border-color: rgba(var(--theme-primary-rgb), 0.48) !important;
}

/* Arrow */

.palette-dropdown-toggle .lucide {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    transition: transform 0.18s ease;
}

.palette-dropdown.open .palette-dropdown-toggle .lucide {
    transform: rotate(180deg);
}

/* Open dropdown */

.palette-dropdown-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 10000;
    width: 100%;
    max-height: 280px;
    box-sizing: border-box;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--ios-line);
    border-radius: 13px;
    background: var(--ios-glass-strong);
    box-shadow: 0 16px 40px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.4);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.palette-dropdown-menu[hidden] {
    display: none !important;
}

/* Individual choices */

.palette-dropdown-menu button {
    width: 100% !important;
    min-height: 35px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer;
}

.palette-dropdown-menu button:hover {
    color: var(--theme-primary-dark) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.11
        ) !important;
}

/* Selected palette */

.palette-dropdown-menu button.active {
    color: var(--theme-primary-dark) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.17
        ) !important;
    font-weight: 700 !important;
}

.palette-dropdown-menu button.active::after {
    content: "✓";
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
}

/* =========================================
   DARK MODE — FOLLOW SELECTED PALETTE
========================================= */
html[data-theme="dark"] .palette-dropdown-toggle {
    color: #f8fafc !important;
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 18%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
}

html[data-theme="dark"] .palette-dropdown-menu {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 22%,
            var(--ios-line)
        ) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

html[data-theme="dark"] .palette-dropdown-menu button {
    color: #f8fafc !important;
}

html[data-theme="dark"] .palette-dropdown-menu button:hover {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;
}

html[data-theme="dark"] .palette-dropdown-menu button.active {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.25
        ) !important;
}

/* Small scrollbar */

.palette-dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--theme-primary-rgb), 0.35) transparent;
}

.palette-dropdown-menu::-webkit-scrollbar {
    width: 7px;
}

.palette-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.palette-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-primary-rgb), 0.30);
    border-radius: 20px;
}

/* =========================================
   PALETTE DROPDOWN ITEM SPACING
========================================= */
.palette-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.palette-dropdown-menu button {
    margin: 0 !important;
}

/* =========================================
   KEEP COLOR DROPDOWN ABOVE EVERYTHING
========================================= */
/* Allow the dropdown to extend outside the account menu */

.account-menu-panel, .login-preferences-panel {
    overflow: visible !important;
}

/* Create a high stacking layer for the picker */

.custom-palette-picker {
    position: relative !important;
    z-index: 5000 !important;
}

.palette-dropdown {
    position: relative !important;
    z-index: 5001 !important;
}

/* The actual opened list */

.palette-dropdown-menu {
    position: absolute !important;
    z-index: 99999 !important;
}

/* When the dropdown is open, lift the whole picker */

.palette-dropdown.open {
    z-index: 99998 !important;
}

.account-menu {
    position: relative !important;
    z-index: 20000 !important;
}

.account-menu-panel {
    z-index: 20001 !important;
}

/* =========================================
   PALETTE-AWARE TEMPLATE / SPLIT VIEW PANES
========================================= */
html[data-theme="dark"] .split-area-pane, html[data-theme="dark"] .app-page-card, html[data-theme="dark"] .split-view-panel {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 20%,
            var(--theme-dark-panel)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .card, html[data-theme="dark"] .template-card, html[data-theme="dark"] .template-content {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 16%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 20%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] a {
    color: var(--theme-secondary) !important;
}

/* =========================================
   KEEP TEMPLATE CONTENT INSIDE CARD
========================================= */
.card, .template-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.template-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.template-content a {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.template-content p, .template-content div, .template-content li {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* =========================================
   PALETTE-AWARE DARK FORMS + MODALS
========================================= */
/* -----------------------------------------
   MAIN PANELS
----------------------------------------- */
html[data-theme="dark"] .modal, html[data-theme="dark"] .import-panel, html[data-theme="dark"] .import-candidate, html[data-theme="dark"] #add-template-container .card, html[data-theme="dark"] #edit-template-container .modal, html[data-theme="dark"] #edit-template-container .card {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 20%,
            var(--theme-dark-panel)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
}

/* -----------------------------------------
   INPUTS / TEXTAREAS / SELECTS
----------------------------------------- */
html[data-theme="dark"] .modal input, html[data-theme="dark"] .modal textarea, html[data-theme="dark"] .modal select, html[data-theme="dark"] .import-panel input, html[data-theme="dark"] .import-panel textarea, html[data-theme="dark"] .import-panel select, html[data-theme="dark"] #add-template-container input, html[data-theme="dark"] #add-template-container textarea, html[data-theme="dark"] #add-template-container select, html[data-theme="dark"] #edit-template-container input, html[data-theme="dark"] #edit-template-container textarea, html[data-theme="dark"] #edit-template-container select {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 14%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
    caret-color: #f8fafc !important;
}

/* -----------------------------------------
   RICH TEXT EDITORS
----------------------------------------- */
html[data-theme="dark"] .rich-template-editor, html[data-theme="dark"] [contenteditable="true"] {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 14%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
}

/* -----------------------------------------
   EDITOR TOOLBARS
----------------------------------------- */
html[data-theme="dark"] .rich-editor-toolbar, html[data-theme="dark"] .modal .rich-editor-toolbar, html[data-theme="dark"] .import-card-toolbar {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 20%,
            var(--theme-dark-panel)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 22%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
}

/* Toolbar buttons */

html[data-theme="dark"] .rich-editor-toolbar button {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 22%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .rich-editor-toolbar button:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.20
        ) !important;
}

/* -----------------------------------------
   IMPORT WORD FILE BOXES
----------------------------------------- */
html[data-theme="dark"] .import-panel .file-picker {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 16%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 22%,
            var(--ios-line)
        ) !important;
}

/* -----------------------------------------
   IMPORT COMBOBOX / DROPDOWNS
----------------------------------------- */
html[data-theme="dark"] .import-combobox-menu {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 22%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
}

html[data-theme="dark"] .import-combobox-menu button {
    color: #f8fafc !important;
}

html[data-theme="dark"] .import-combobox-menu button:hover, html[data-theme="dark"] .import-combobox-menu button:focus {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;
}

/* -----------------------------------------
   FOCUS COLOR
----------------------------------------- */
html[data-theme="dark"] .modal input:focus, html[data-theme="dark"] .modal textarea:focus, html[data-theme="dark"] .modal select:focus, html[data-theme="dark"] #add-template-container input:focus, html[data-theme="dark"] #add-template-container textarea:focus, html[data-theme="dark"] #add-template-container select:focus, html[data-theme="dark"] #edit-template-container input:focus, html[data-theme="dark"] #edit-template-container textarea:focus, html[data-theme="dark"] #edit-template-container select:focus {
    outline: none !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(
            var(--theme-primary-rgb),
            0.16
        ) !important;
}

/* -----------------------------------------
   PLACEHOLDERS
----------------------------------------- */
html[data-theme="dark"] .modal input::placeholder, html[data-theme="dark"] .modal textarea::placeholder, html[data-theme="dark"] #add-template-container input::placeholder, html[data-theme="dark"] #add-template-container textarea::placeholder, html[data-theme="dark"] #edit-template-container input::placeholder, html[data-theme="dark"] #edit-template-container textarea::placeholder {
    color: color-mix(
            in srgb,
            var(--theme-secondary) 45%,
            #9ca3af
        ) !important;
    opacity: 0.85 !important;
}

/* =========================================
   ADD TEMPLATE SAVE BUTTON ICON
========================================= */
#add-template-container .save-add-template {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

#add-template-container .save-add-template .lucide {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    stroke-width: 1.6 !important;
}

/* =========================================================
   FUMIDESK — FINAL PALETTE-AWARE DARK MODE
   Keep this block at the absolute bottom of styles.css
========================================================= */
html[data-theme="dark"] {
    /* Main page */
    --theme-dark-bg: color-mix(
            in srgb,
            var(--theme-primary-dark) 38%,
            #050608
        );
    /* Main windows / cards */
    --theme-dark-panel: color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            #0c0f14
        );
    /* Inputs / editors / inner surfaces */
    --theme-dark-panel-strong: color-mix(
            in srgb,
            var(--theme-primary-dark) 30%,
            #080a0e
        );
    /* Extra subtle surface */
    --theme-dark-soft: color-mix(
            in srgb,
            var(--theme-primary-dark) 16%,
            #111318
        );
    /* Override the old navy glass variables too */
    --ios-glass: color-mix(
            in srgb,
            var(--theme-primary-dark) 18%,
            rgba(15, 18, 24, 0.78)
        );
    --ios-glass-strong: color-mix(
            in srgb,
            var(--theme-primary-dark) 23%,
            rgba(10, 13, 18, 0.90)
        );
    --ios-card: color-mix(
            in srgb,
            var(--theme-primary-dark) 17%,
            rgba(11, 14, 20, 0.94)
        );
    --ios-border: color-mix(
            in srgb,
            var(--theme-primary) 18%,
            rgba(255, 255, 255, 0.12)
        );
    --ios-line: color-mix(
            in srgb,
            var(--theme-primary) 13%,
            rgba(148, 163, 184, 0.20)
        );
    --ios-text: #f8fafc;
    --ios-muted: #cbd5e1;
}

/* =========================================================
   PAGE BACKGROUND
========================================================= */
html[data-theme="dark"] body {
    background: var(--theme-dark-bg) !important;
    color: var(--ios-text) !important;
}

/* =========================================================
   PRIMARY WINDOWS / PANELS / CARDS
========================================================= */
html[data-theme="dark"] .card, html[data-theme="dark"] .template-card, html[data-theme="dark"] .section-title, html[data-theme="dark"] .modal, html[data-theme="dark"] .tutorial-dialog, html[data-theme="dark"] .tutorial-tooltip, html[data-theme="dark"] .import-panel, html[data-theme="dark"] .import-candidate, html[data-theme="dark"] .empty-template-library, html[data-theme="dark"] .account-menu-panel, html[data-theme="dark"] .login-preferences-panel, html[data-theme="dark"] .card-menu-dropdown, html[data-theme="dark"] .app-page-card, html[data-theme="dark"] .split-area-pane, html[data-theme="dark"] .split-view-panel, html[data-theme="dark"] #login-form, html[data-theme="dark"] #add-template-container .card, html[data-theme="dark"] #edit-template-container .modal, html[data-theme="dark"] #edit-template-container .card, html[data-theme="dark"] .support-contact-form, html[data-theme="dark"] .support-request-card, html[data-theme="dark"] .support-thread-container, html[data-theme="dark"] .support-empty-state {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 20%,
            var(--theme-dark-panel)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    color: var(--ios-text) !important;
}

/* =========================================================
   INNER SURFACES
========================================================= */
html[data-theme="dark"] .template-content, html[data-theme="dark"] .file-picker, html[data-theme="dark"] .import-review-bar, html[data-theme="dark"] .rich-editor-toolbar, html[data-theme="dark"] .modal .rich-editor-toolbar, html[data-theme="dark"] .rich-template-editor, html[data-theme="dark"] .find-replace-rich-box, html[data-theme="dark"] .help-chat-messages, html[data-theme="dark"] .help-grid article, html[data-theme="dark"] .recovery-row, html[data-theme="dark"] .user-report-row {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 16%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 20%,
            var(--ios-line)
        ) !important;
    color: var(--ios-text) !important;
}

/* =========================================================
   INPUTS / TEXTAREAS / SELECTS / EDITABLE FIELDS
========================================================= */
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] [contenteditable="true"], html[data-theme="dark"] #add-template-container input, html[data-theme="dark"] #add-template-container textarea, html[data-theme="dark"] #add-template-container select, html[data-theme="dark"] #edit-template-container input, html[data-theme="dark"] #edit-template-container textarea, html[data-theme="dark"] #edit-template-container select, html[data-theme="dark"] .support-contact-form textarea, html[data-theme="dark"] .support-reply-form textarea, html[data-theme="dark"] .help-chat-form input {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 14%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
    color: var(--ios-text) !important;
    caret-color: var(--ios-text) !important;
}

/* Placeholder text */

html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] [contenteditable="true"]:empty::before {
    color: var(--ios-muted) !important;
    opacity: 0.78 !important;
}

/* =========================================================
   INPUT FOCUS
========================================================= */
html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] [contenteditable="true"]:focus, html[data-theme="dark"] #add-template-container input:focus, html[data-theme="dark"] #add-template-container textarea:focus, html[data-theme="dark"] #add-template-container select:focus, html[data-theme="dark"] #edit-template-container input:focus, html[data-theme="dark"] #edit-template-container textarea:focus, html[data-theme="dark"] #edit-template-container select:focus, html[data-theme="dark"] .split-view-panel select:focus {
    outline: none !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.16) !important;
}

/* =========================================================
   NATIVE SELECT OPTIONS
========================================================= */
html[data-theme="dark"] select option, html[data-theme="dark"] #add-template-container option, html[data-theme="dark"] #edit-template-container option, html[data-theme="dark"] .split-view-panel option {
    background: var(--theme-dark-panel-strong) !important;
    color: var(--ios-text) !important;
}

/* =========================================================
   IMPORT CONTROLS
========================================================= */
html[data-theme="dark"] .import-combobox-menu {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 20%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: var(--ios-line) !important;
    color: var(--ios-text) !important;
}

html[data-theme="dark"] .import-combobox-arrow {
    border-color: var(--ios-line) !important;
    color: var(--ios-muted) !important;
}

html[data-theme="dark"] .import-combobox-menu button:hover, html[data-theme="dark"] .import-combobox-menu button:focus, html[data-theme="dark"] .import-combobox-arrow:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;
    color: var(--theme-secondary) !important;
}

html[data-theme="dark"] .import-combobox input:disabled, html[data-theme="dark"] .import-combobox-arrow:disabled {
    background: var(--theme-dark-panel-strong) !important;
    color: var(--ios-muted) !important;
    opacity: 0.58;
}

/* =========================================================
   SECONDARY BUTTONS
========================================================= */
html[data-theme="dark"] .area-tab, html[data-theme="dark"] .template-actions button, html[data-theme="dark"] .copy-plain, html[data-theme="dark"] .tutorial-back, html[data-theme="dark"] .rich-editor-toolbar button, html[data-theme="dark"] .card-menu-dropdown button, html[data-theme="dark"] .secondary-button, html[data-theme="dark"] #add-template-container .cancel-add-template, html[data-theme="dark"] .split-view-panel .split-single-button, html[data-theme="dark"] #auth-container .account-menu-panel button {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 17%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 20%,
            var(--ios-line)
        ) !important;
    color: var(--ios-text) !important;
}

/* Secondary button hover */

html[data-theme="dark"] .area-tab:hover, html[data-theme="dark"] .template-actions button:hover, html[data-theme="dark"] .copy-plain:hover, html[data-theme="dark"] .tutorial-back:hover, html[data-theme="dark"] .rich-editor-toolbar button:hover, html[data-theme="dark"] .card-menu-dropdown button:hover, html[data-theme="dark"] .secondary-button:hover, html[data-theme="dark"] .split-view-panel .split-single-button:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.17
        ) !important;
}

/* =========================================================
   PRIMARY / SELECTED BUTTONS
========================================================= */
html[data-theme="dark"] .area-tab.active, html[data-theme="dark"] .copy-rich, html[data-theme="dark"] .tutorial-next, html[data-theme="dark"] #add-template-container .save-add-template, html[data-theme="dark"] #edit-template-container .save-template, html[data-theme="dark"] .split-view-panel .split-apply-button {
    background: linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 82%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;
    border-color: rgba(
            var(--theme-primary-rgb),
            0.65
        ) !important;
    color: #ffffff !important;
}

/* =========================================================
   CATEGORY BADGES / CONTEXT CONTROLS
========================================================= */
html[data-theme="dark"] .category-count, html[data-theme="dark"] .category-context-actions button {
    background: color-mix(
            in srgb,
            var(--theme-primary) 15%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: var(--ios-line) !important;
    color: var(--ios-text) !important;
}

html[data-theme="dark"] .v2-menu-pages {
    border-color: var(--ios-line) !important;
}

/* =========================================================
   CARD MENU / SMALL ICON CONTROLS
========================================================= */
html[data-theme="dark"] .card-menu-toggle, html[data-theme="dark"] .favorite-button, html[data-theme="dark"] .favorite-btn, html[data-theme="dark"] .tutorial-close {
    color: var(--ios-muted) !important;
}

html[data-theme="dark"] .card-menu-toggle:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.16
        ) !important;
    color: var(--theme-secondary) !important;
}

/* =========================================================
   TEXT / LINKS
========================================================= */
html[data-theme="dark"] a {
    color: var(--theme-secondary) !important;
}

html[data-theme="dark"] .card-title, html[data-theme="dark"] .card-title > span, html[data-theme="dark"] .modal h2, html[data-theme="dark"] .modal label, html[data-theme="dark"] #add-template-container label, html[data-theme="dark"] .empty-template-library h2, html[data-theme="dark"] .import-heading-row h2, html[data-theme="dark"] .import-candidate label, html[data-theme="dark"] .area-name-button, html[data-theme="dark"] .file-picker strong, html[data-theme="dark"] .rich-template-editor, html[data-theme="dark"] .template-content strong, html[data-theme="dark"] .template-content b {
    color: var(--ios-text) !important;
}

html[data-theme="dark"] .brand-block p, html[data-theme="dark"] .theme-picker, html[data-theme="dark"] .tutorial-progress, html[data-theme="dark"] .tutorial-dialog p, html[data-theme="dark"] .import-heading-row p, html[data-theme="dark"] .file-picker span, html[data-theme="dark"] .import-status, html[data-theme="dark"] .rename-area-modal p, html[data-theme="dark"] .empty-template-library p, html[data-theme="dark"] .import-create-hint {
    color: var(--ios-muted) !important;
}

/* =========================================================
   TUTORIAL
========================================================= */
html[data-theme="dark"] .tutorial-dots span {
    background: color-mix(
            in srgb,
            var(--theme-primary) 18%,
            var(--ios-muted)
        ) !important;
}

html[data-theme="dark"] .tutorial-dots span.active {
    background: var(--theme-primary) !important;
}

/*   Keep the tutorial backdrop neutral.
   It is an overlay rather than an app surface.*/
html[data-theme="dark"] .tutorial-backdrop {
    background: rgba(0, 0, 0, 0.66) !important;
}

/* =========================================================
   SUPPORT / HELP
========================================================= */
html[data-theme="dark"] .support-thread-message:not(.own-message) {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 16%,
            var(--theme-dark-panel-strong)
        ) !important;
    color: var(--ios-text) !important;
}

/* User's own message follows palette */

html[data-theme="dark"] .support-thread-message.own-message {
    background: linear-gradient(
            145deg,
            var(--theme-primary),
            var(--theme-primary-dark)
        ) !important;
    color: #ffffff !important;
}

/* =========================================================
   SEARCH BAR
========================================================= */
html[data-theme="dark"] #search-box {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 16%,
            var(--theme-dark-panel)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
    color: var(--ios-text) !important;
}

/* =========================================================
   TEXT SELECTION
========================================================= */
html[data-theme="dark"] ::selection {
    background: rgba(
            var(--theme-primary-rgb),
            0.55
        );
    color: #ffffff;
}

/* =========================================================
   FUMIDESK — PALETTE-AWARE SUPPORT CHAT BUBBLES
========================================================= */
/* Other person's messages */

html[data-theme="dark"] .support-thread-message:not(.own-message) p, html[data-theme="dark"] .support-thread-message.other-message p {
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-secondary) 14%,
            var(--theme-dark-panel-strong)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-secondary) 22%,
            var(--ios-border)
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.10) !important;
}

/* Administrator / own messages */

html[data-theme="dark"] .support-thread-message.own-message p {
    color: #ffffff !important;
    background: linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--theme-primary) 82%,
                var(--theme-secondary)
            ),
            var(--theme-primary-dark)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 55%,
            var(--ios-border)
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 14px rgba(var(--theme-primary-rgb),.18) !important;
}

/* Sender names */

html[data-theme="dark"] .support-thread-message .support-message-author {
    color: var(--ios-muted) !important;
}

/* Administrator sender name slightly palette-tinted */

html[data-theme="dark"] .support-thread-message.own-message .support-message-author {
    color: color-mix(
            in srgb,
            var(--theme-secondary) 72%,
            var(--ios-muted)
        ) !important;
}

/* Message timestamps */

html[data-theme="dark"] .support-thread-message small {
    color: var(--ios-muted) !important;
}

/* Main conversation scrolling area */

html[data-theme="dark"] .support-thread-messages {
    background: linear-gradient(
            145deg,

            color-mix(
                in srgb,
                var(--theme-primary-dark) 11%,
                var(--theme-dark-panel-strong)
            ),

            color-mix(
                in srgb,
                var(--theme-primary) 5%,
                var(--theme-dark-panel)
            )
        ) !important;
    border-color: var(--ios-border) !important;
}

/* =========================================================
   PASSWORD SETUP / RESET — PALETTE-AWARE
========================================================= */
html[data-theme="dark"] .password-setup-modal p {
    color: var(--ios-muted) !important;
}

html[data-theme="dark"] .password-setup-modal input {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 14%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: var(--ios-line) !important;
    color: var(--ios-text) !important;
    caret-color: var(--ios-text) !important;
}

html[data-theme="dark"] .password-setup-modal input:focus {
    outline: none !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb),.16) !important;
}

html[data-theme="dark"] .save-invitation-password {
    color: #ffffff !important;
    background: linear-gradient(
            145deg,
            var(--theme-primary),
            var(--theme-primary-dark)
        ) !important;
    border-color: rgba(var(--theme-primary-rgb),.58) !important;
}

/* =========================================================
   FIX SUPPORT CHAT MESSAGE WRAPPERS
   Only the actual message bubble should have a background
========================================================= */
html[data-theme="dark"] .support-thread-messages .support-thread-message, html[data-theme="dark"] .support-thread-messages .support-thread-message.own-message, html[data-theme="dark"] .support-thread-messages .support-thread-message.other-message {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Other person's bubble */

html[data-theme="dark"] .support-thread-message:not(.own-message) p, html[data-theme="dark"] .support-thread-message.other-message p {
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-secondary) 12%,
            var(--theme-dark-panel-strong)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-secondary) 20%,
            var(--ios-border)
        ) !important;
    border-radius: 18px 18px 18px 5px !important;
    box-shadow: none !important;
}

/* Administrator bubble */

html[data-theme="dark"] .support-thread-message.own-message p {
    color: #ffffff !important;
    background: linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--theme-primary) 78%,
                var(--theme-secondary)
            ),
            var(--theme-primary-dark)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 45%,
            var(--ios-border)
        ) !important;
    border-radius: 18px 18px 5px 18px !important;
    box-shadow: none !important;
}

/* Sender labels stay outside bubble */

html[data-theme="dark"] .support-thread-message .support-message-author {
    background: transparent !important;
    border: 0 !important;
    color: var(--ios-muted) !important;
}

/* Timestamp stays outside bubble */

html[data-theme="dark"] .support-thread-message small {
    background: transparent !important;
    border: 0 !important;
    color: var(--ios-muted) !important;
}

/* =========================================================
   FIX SPLIT VIEW DROPDOWN ARROWS
========================================================= */
.split-view-panel select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 42px !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 17px 17px !important;
}

/* Light mode arrow */

html[data-theme="light"] .split-view-panel select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
}

/* Dark mode arrow */

html[data-theme="dark"] .split-view-panel select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 17px 17px !important;
}

/* =========================================================
   COLOR SELECTOR — CLEAN DROPDOWN ARROW
========================================================= */
.palette-dropdown-toggle {
    position: relative !important;
    padding-right: 40px !important;
}

.palette-dropdown-toggle .lucide {
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    stroke-width: 1.7 !important;
    pointer-events: none;
}

/* Rotate only when open */

.palette-dropdown.open .palette-dropdown-toggle .lucide {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* =========================================================
   SPLIT VIEW — CUSTOM AREA DROPDOWNS
========================================================= */
.split-area-picker {
    display: grid;
    gap: 6px;
}

.split-picker-label {
    color: var(--ios-muted);
    font-size: 12px;
    font-weight: 700;
}

.split-custom-dropdown {
    position: relative;
    width: 100%;
}

/* Main closed control */

.split-dropdown-toggle {
    position: relative;
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 40px 0 13px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 12px !important;
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        ) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer;
}

.split-dropdown-toggle:hover {
    border-color: rgba(
            var(--theme-primary-rgb),
            .42
        ) !important;
}

/* Chevron */

.split-dropdown-toggle .lucide {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 15px !important;
    height: 15px !important;
    transform: translateY(-50%);
    transition: transform .18s ease;
    pointer-events: none;
}

.split-custom-dropdown.open .split-dropdown-toggle .lucide {
    transform: translateY(-50%) rotate(180deg);
}

/* Dropdown menu */

.split-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 99999;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--ios-border);
    border-radius: 12px;
    background: var(--ios-glass-strong);
    box-shadow: 0 14px 34px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.44);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
}

.split-dropdown-menu[hidden] {
    display: none !important;
}

/* Options */

.split-dropdown-menu button {
    width: 100% !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer;
}

.split-dropdown-menu button:hover {
    color: var(--theme-primary-dark) !important;
    background: rgba(
            var(--theme-primary-rgb),
            .11
        ) !important;
}

.split-dropdown-menu button.active {
    color: var(--theme-primary-dark) !important;
    background: rgba(
            var(--theme-primary-rgb),
            .17
        ) !important;
    font-weight: 700 !important;
}

.split-dropdown-menu button.active::after {
    content: "✓";
    margin-left: auto;
    font-size: 12px;
}

/* =========================================================
   SPLIT VIEW CUSTOM DROPDOWN — DARK MODE
========================================================= */
html[data-theme="dark"] .split-dropdown-toggle {
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 15%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
}

html[data-theme="dark"] .split-dropdown-menu {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 21%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: var(--ios-border) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}

html[data-theme="dark"] .split-dropdown-menu button {
    color: var(--ios-text) !important;
}

html[data-theme="dark"] .split-dropdown-menu button:hover {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            .18
        ) !important;
}

html[data-theme="dark"] .split-dropdown-menu button.active {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            .25
        ) !important;
}

/* =========================================================
   FUMIDESK — CENTERED GLASS TOASTS
========================================================= */
/* ---------------------------------------------------------
   STANDARD TOAST
--------------------------------------------------------- */
.toast-message {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content;
    max-width: min(
        420px,
        calc(100vw - 40px)
    );
    box-sizing: border-box;
    padding: 12px 18px !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-border)
        ) !important;
    border-radius: 14px !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 8%,
            var(--ios-glass-strong)
        ) !important;
    color: var(--ios-text) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .20), inset 0 1px 0 rgba(255,255,255,.48) !important;
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.94) !important;
    transition: opacity .22s ease, transform .22s ease !important;
    z-index: 70000 !important;
    pointer-events: none;
}

.toast-message.show {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* ---------------------------------------------------------
   DARK MODE
--------------------------------------------------------- */
html[data-theme="dark"] .toast-message {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            rgba(12,15,20,.82)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 30%,
            rgba(255,255,255,.12)
        ) !important;
    color: #f8fafc !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ---------------------------------------------------------
   CONFIRMATION TOAST
--------------------------------------------------------- */
.toast-confirm {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(
        340px,
        calc(100vw - 40px)
    ) !important;
    box-sizing: border-box;
    padding: 18px !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-border)
        ) !important;
    border-radius: 18px !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 8%,
            var(--ios-glass-strong)
        ) !important;
    color: var(--ios-text) !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.48) !important;
    backdrop-filter: blur(26px) saturate(175%);
    -webkit-backdrop-filter: blur(26px) saturate(175%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.94) !important;
    transition: opacity .22s ease, transform .22s ease !important;
    z-index: 30001 !important;
}

.toast-confirm.show {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

html[data-theme="dark"] .toast-confirm {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            rgba(12,15,20,.88)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 30%,
            rgba(255,255,255,.12)
        ) !important;
    color: #f8fafc !important;
}

/* Cancel button follows selected palette */

.toast-confirm .toast-cancel {
    background: color-mix(
            in srgb,
            var(--theme-primary) 10%,
            var(--ios-glass-strong)
        ) !important;
    border: 1px solid var(--ios-line) !important;
    color: var(--ios-text) !important;
}

/* Delete and Discard follow the selected palette */

.toast-confirm .toast-delete {
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 82%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;

    color: #ffffff !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        ) !important;

    box-shadow:
        0 5px 14px
        rgba(
            var(--theme-primary-rgb),
            0.25
        ) !important;
}

.toast-confirm .toast-delete:hover {
    filter: brightness(0.94);
}

/* =========================================================
   FUMIDESK — SIGN UP
========================================================= */
#signup-form {
    width: 100%;
}

#signup-form[hidden] {
    display: none !important;
}

.signup-entry-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.signup-submit-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.signup-submit-button .lucide {
    width: 16px;
    height: 16px;
}

.auth-switch-text {
    margin: 12px 0 0 !important;
    color: var(--ios-muted);
    font-size: 12px;
    text-align: center;
}

#auth-container .auth-switch-button {
    width: auto !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-primary) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    cursor: pointer;
}

#auth-container .auth-switch-button:hover {
    color: var(--theme-primary-dark) !important;
    text-decoration: underline;
}

html[data-theme="dark"] #auth-container .auth-switch-button {
    color: var(--theme-secondary) !important;
}

@media (max-width: 620px) {
    .signup-entry-form {
        flex-direction: column;
    }
}

/* =========================================================
   FIND & REPLACE — FIX RESULT MESSAGE LAYOUT
========================================================= */
.editor-find-replace .find-replace-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
}

/* Status message gets its own full row */

.editor-find-replace .find-replace-actions [data-fr-result] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 2px 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
}

/* Keep empty result completely hidden */

.editor-find-replace .find-replace-actions [data-fr-result]:empty {
    display: none !important;
}

/* Buttons stay together underneath */

.editor-find-replace .find-replace-actions button {
    flex: 0 0 auto !important;
}

/* =========================================================
   AUTH FORMS — FINAL STRUCTURE
========================================================= */
.auth-forms {
    width: 100%;
}

#login-form, #signup-form {
    width: 100%;
    box-sizing: border-box;
}

#login-form[hidden], #signup-form[hidden] {
    display: none !important;
}

#login-form {
    flex-direction: column !important;
}

.login-entry-row {
    width: 100%;
}

.login-secondary-actions {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 8px !important;
}

#login-form .forgot-password-button {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--theme-primary) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

#login-form .forgot-password-button:hover {
    color: var(--theme-primary-dark) !important;
    text-decoration: underline;
}

#login-form .auth-switch-text, #signup-form .auth-switch-text {
    margin: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.4;
}

.signup-entry-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

@media (max-width: 620px) {
    .login-entry-row, .signup-entry-form {
        flex-direction: column !important;
    }
}

/* =========================================================
   CENTERED TEMPLATE CREATION PANELS
========================================================= */
#add-template-container:not(:empty), #import-template-container:not(:empty) {
    position: fixed !important;
    z-index: 4500 !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    width: min(900px, calc(100vw - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 22px;
    box-sizing: border-box;
    pointer-events: none;
}

#add-template-container:not(:empty) {
    width: min(720px, calc(100vw - 48px)) !important;
}

#add-template-container:not(:empty) .card, #import-template-container:not(:empty) .import-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    pointer-events: auto;
}

/* =========================================================
   TUTORIAL — ACTIVE APP SURFACES
========================================================= */

#import-template-container:not(:empty).tutorial-active-surface {
    z-index: 12001 !important;
}

#account-menu.tutorial-active-menu {
    z-index: 12001 !important;
}

#account-menu.tutorial-active-menu
.account-menu-panel {
    z-index: 12001 !important;
}

@media (max-width: 760px) {
    #add-template-container:not(:empty), #import-template-container:not(:empty) {
        top: 12px !important;
        left: 12px !important;
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        transform: none !important;
    }
}

/* =========================================================
   FIXED ACCOUNT / HAMBURGER MENU — TOP LEFT
========================================================= */
body:not(.logged-out) #logged-in-controls {
    position: fixed !important;
    top: 22px !important;
    left: 24px !important;
    right: auto !important;
    z-index: 20000 !important;
    margin: 0 !important;
}

body:not(.logged-out) #account-menu {
    position: relative !important;
}

body:not(.logged-out) #account-menu > summary {
    position: relative !important;
}

body:not(.logged-out) .account-menu-panel {
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
}

@media (max-width: 700px) {
    body:not(.logged-out) #logged-in-controls {
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
    }
    body:not(.logged-out) .account-menu-panel {
        position: fixed !important;
        top: 68px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100dvh - 80px);
        overflow-y: auto !important;
    }
}

/* =========================================================
   SIGN IN / SIGN UP — TRANSLUCENT GLASS CARD
========================================================= */
body.logged-out .auth-forms {
    width: min(620px, calc(100vw - 32px)) !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 18%,
            rgba(255, 255, 255, 0.62)
        ) !important;
    border-radius: 22px !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 5%,
            rgba(255, 255, 255, 0.68)
        ) !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

body.logged-out #login-form, body.logged-out #signup-form {
    width: 100% !important;
    margin: 0 !important;
}

body.logged-out #signup-form .login-heading, body.logged-out #login-form .login-heading {
    margin: 0 0 18px !important;
    text-align: center !important;
}

body.logged-out .signup-entry-form, body.logged-out .login-entry-row {
    align-items: stretch !important;
}

body.logged-out .login-fields {
    flex: 1 1 340px !important;
}

body.logged-out .login-fields input {
    width: 100% !important;

    height: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box !important;

    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 14%,
        var(--ios-line)
    ) !important;

    border-radius: 11px !important;

    background: color-mix(
        in srgb,
        var(--theme-primary) 3%,
        rgba(255, 255, 255, 0.72)
    ) !important;
}

html[data-theme="dark"] body.logged-out .auth-forms {
    background: color-mix(
            in srgb,
            var(--theme-primary) 10%,
            rgba(13, 18, 27, 0.72)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 26%,
            rgba(255, 255, 255, 0.12)
        ) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body.logged-out .login-fields input {
    background: color-mix(
            in srgb,
            var(--theme-primary) 7%,
            rgba(9, 13, 20, 0.72)
        ) !important;
    color: #f8fafc !important;
}

@media (max-width: 620px) {
    body.logged-out .auth-forms {
        padding: 20px !important;
    }
    body.logged-out .login-fields {
        flex-basis: auto !important;
    }
}

/* =========================================================
   AUTH BUTTONS — COMPACT SIZE AND VISIBLE ICONS
========================================================= */
body.logged-out .login-entry-row > button[type="submit"], body.logged-out .signup-entry-form > .signup-submit-button {
    flex: 0 0 auto !important;
    align-self: center !important;
    width: auto !important;
    min-width: 132px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

/* Keep the Lucide icons clearly visible */

body.logged-out .login-entry-row > button[type="submit"] .lucide, body.logged-out .signup-entry-form > .signup-submit-button .lucide {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    flex: 0 0 17px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    opacity: 1 !important;
}

/* Keep the text beside the icon */

body.logged-out .login-entry-row > button[type="submit"] span, body.logged-out .signup-entry-form > .signup-submit-button span {
    display: inline-block !important;
    line-height: 1 !important;
}

/* =========================================================
   AUTH — ONE CONSISTENT GLASS SURFACE
========================================================= */
body.logged-out #login-form, body.logged-out #signup-form {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Override the older dark login-card rule too */

html[data-theme="dark"] body.logged-out #login-form, html[data-theme="dark"] body.logged-out #signup-form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   INTERACTIVE TUTORIAL — FINAL CLOSE BUTTON
========================================================= */
.tutorial-tooltip .tutorial-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 11px !important;
    line-height: 0 !important;
}

.tutorial-tooltip .tutorial-close .lucide {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    transform: none !important;
}

/* =========================================================
   TUTORIAL — VISUAL CONTROL EXAMPLES
========================================================= */
.tutorial-control-example {
    width: 100%;
    margin: 16px 0 4px;
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 17%,
            var(--ios-line)
        );
    border-radius: 14px;
    background: color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass)
        );
}

.tutorial-control-example button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 25%,
            var(--ios-line)
        ) !important;
    border-radius: 10px !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 7%,
            var(--ios-glass-strong)
        ) !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
    pointer-events: none;
}

.tutorial-control-example .tutorial-example-primary {
    background: linear-gradient(
            180deg,
            var(--theme-secondary),
            var(--theme-primary-dark)
        ) !important;
    color: #ffffff !important;
}

.tutorial-control-example .tutorial-example-icon-button {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    flex: 0 0 38px !important;
}

.tutorial-control-example .lucide {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    stroke-width: 1.7;
}

.tutorial-example-category {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        );
    border-radius: 11px;
    background: color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass-strong)
        );
}

.tutorial-example-category .tutorial-example-count {
    min-width: 26px;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(
            in srgb,
            var(--theme-primary) 12%,
            transparent
        );
    text-align: center;
    font-size: 11px;
}

.tutorial-example-search {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--ios-line);
    border-radius: 10px;
    color: var(--ios-muted);
    background: color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
}

.tutorial-example-note {
    color: var(--ios-muted);
    font-size: 12px;
}

.tutorial-appearance-example {
    justify-content: space-between;
}

.tutorial-appearance-example > div {
    display: flex;
    gap: 6px;
}

html[data-theme="dark"] .tutorial-control-example {
    background: color-mix(
            in srgb,
            var(--theme-primary) 8%,
            var(--theme-dark-panel)
        );
}

/* =========================================================
   STICKY FOOTER — BOTTOM OF SHORT AND LONG PAGES
========================================================= */
html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

body > main {
    width: 100%;
    flex: 1 0 auto;
}

.site-footer {
    flex: 0 0 auto;
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   ADMIN VERSION RESTORE — GLASS CONFIRMATION
========================================================= */
.admin-restore-confirm {
    width: min(440px, calc(100vw - 32px));
    padding: 28px;
    text-align: center;
}

.admin-restore-confirm-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
}

.admin-restore-confirm-icon svg {
    width: 23px;
    height: 23px;
}

.admin-restore-confirm-message {
    margin: 8px 0 22px;
    line-height: 1.55;
    color: var(--muted-text, #64748b);
}

.admin-restore-confirm .modal-buttons {
    justify-content: center;
}

.admin-restore-confirm .modal-buttons button {
    min-width: 112px;
}

.admin-restore-confirm .admin-restore-accept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.admin-restore-confirm .admin-restore-accept svg {
    width: 17px;
    height: 17px;
}

/* =========================================================
   SPLIT VIEW — POSITION + TRANSLUCENT GLASS FIX
========================================================= */
.split-view-controls {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: max-content !important;
    margin: 28px 0 18px 30px !important;
}

/* Keep the selector underneath its button */

.split-view-panel {
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
    width: min(
            290px,
            calc(100vw - 32px)
        ) !important;
    padding: 18px !important;
    overflow: visible !important;
    background: color-mix(
            in srgb,
            var(--ios-glass-strong) 72%,
            transparent
        ) !important;
    border: 1px solid var(--ios-border) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
}

/* Palette-aware dark glass */

html[data-theme="dark"] .split-view-panel {
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 18%,
            rgba(10, 20, 34, 0.72)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-border)
        ) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Keep dropdown lists above the selector */

.split-custom-dropdown.open {
    z-index: 10;
}

.split-dropdown-menu {
    z-index: 20 !important;
    max-height: 230px;
    overflow-y: auto;
}

/* Mobile positioning */

@media (max-width: 700px) {
    .split-view-controls {
        margin-left: 16px !important;
    }
    .split-view-panel {
        width: min(
                290px,
                calc(100vw - 32px)
            ) !important;
    }
}

/* =========================================================
   AUTH — TURNSTILE SECURITY CHECKS
========================================================= */

body.logged-out .signup-entry-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    column-gap: 18px;
    row-gap: 10px;
    align-items: start;
    width: 100%;
}

body.logged-out
.signup-entry-form
> .login-fields {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

body.logged-out
.signup-entry-form
> .signup-password-strength {
    grid-column: 2;
    grid-row: 1 / 3;

    width: 210px;
    height: 100%;

    margin: 0;

    align-self: stretch;
}

body.logged-out
.signup-entry-form
> .signup-submit-button {
    grid-column: 1;
    grid-row: 2;

    width: 100%;

    min-height: 42px;

    justify-self: stretch;

    margin: 0 !important;
}

body.logged-out
.signup-entry-form
> #signup-turnstile {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    margin: 0;
}

body.logged-out
#reset-turnstile {
    justify-self: center;
    margin: 0;
}

@media (max-width: 620px) {
    body.logged-out .signup-entry-form {
        grid-template-columns: 1fr;
    }

    body.logged-out
    .signup-entry-form
    > .login-fields {
        grid-column: 1;
        grid-row: 1;
    }

    body.logged-out
    .signup-entry-form
    > .signup-password-strength {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
    }

    body.logged-out
    .signup-entry-form
    > .signup-submit-button {
        grid-column: 1;
        grid-row: 3;
    }

    body.logged-out
    .signup-entry-form
    > #signup-turnstile {
        grid-column: 1;
        grid-row: 4;
    }
}

/* =========================================================
   LOGGED-OUT PAGE — HIDE PRIVATE APP CONTROLS
========================================================= */
body.logged-out #split-view-controls {
    display: none !important;
}

/* =========================================================
   FEEDBACK PAGE — FINAL GLASS OVERRIDE
========================================================= */
.app-page-card.feedback-page {
    width: min(820px, calc(100% - 40px)) !important;
    margin: 24px auto 110px !important;
    padding: 24px !important;
    border: 1px solid rgba(140, 175, 220, 0.35) !important;
    border-radius: 22px !important;
    background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.12)
        ) !important;
    box-shadow: 0 18px 48px rgba(25, 55, 95, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
    color: inherit !important;
}

.feedback-page .feedback-glass-panel {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(135, 170, 215, 0.30) !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

.feedback-page .cloudshelf-feedback-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
}

.feedback-page .cloudshelf-feedback-form label {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    font-weight: 700 !important;
}

.feedback-page .cloudshelf-feedback-form select, .feedback-page .cloudshelf-feedback-form textarea {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(125, 165, 215, 0.42) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: inherit !important;
    font: inherit !important;
    box-shadow: inset 0 1px 2px rgba(30, 60, 100, 0.05) !important;
    outline: none !important;
}

.feedback-page .cloudshelf-feedback-form textarea {
    min-height: 150px !important;
    resize: vertical !important;
}

.feedback-page .feedback-rating-field {
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
}

.feedback-page .feedback-stars {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.feedback-page .feedback-star {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(125, 165, 215, 0.38) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.20) !important;
    color: rgba(90, 110, 140, 0.54) !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

.feedback-page .feedback-star:hover, .feedback-page .feedback-star.is-selected {
    color: #f2a81d !important;
    background: rgba(242, 168, 29, 0.14) !important;
    border-color: rgba(242, 168, 29, 0.58) !important;
}

.feedback-page .feedback-form-actions {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.feedback-page .feedback-admin-inbox {
    margin-top: 20px !important;
}

/* Dark theme */

html[data-theme="dark"] .app-page-card.feedback-page, body.dark-mode .app-page-card.feedback-page {
    background: linear-gradient(
            135deg,
            rgba(18, 42, 67, 0.70),
            rgba(12, 31, 51, 0.46)
        ) !important;
    border-color: rgba(115, 175, 225, 0.34) !important;
}

html[data-theme="dark"] .feedback-page .feedback-glass-panel, body.dark-mode .feedback-page .feedback-glass-panel {
    background: rgba(15, 39, 64, 0.48) !important;
}

html[data-theme="dark"] .feedback-page select, html[data-theme="dark"] .feedback-page textarea, body.dark-mode .feedback-page select, body.dark-mode .feedback-page textarea {
    background: rgba(10, 30, 50, 0.58) !important;
    color: inherit !important;
}

/* =========================================================
   FEEDBACK — FINAL UI CORRECTIONS
========================================================= */
.feedback-page-shell {
    width: min(820px, calc(100% - 40px));
    margin: 20px auto 110px;
}

.feedback-page-shell .feedback-back-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    margin: 0 0 12px 2px !important;
    padding: 8px 13px !important;
    border: 1px solid rgba(125, 165, 215, 0.38) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.20) !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 700 !important;
    box-shadow: 0 7px 18px rgba(35, 65, 105, 0.10) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.feedback-page-shell .feedback-back-button svg {
    width: 17px !important;
    height: 17px !important;
}

.app-page-card.feedback-page {
    width: 100% !important;
    margin: 0 !important;
    background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.08)
        ) !important;
    border: 1px solid rgba(130, 170, 220, 0.34) !important;
    backdrop-filter: blur(25px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(145%) !important;
}

.feedback-page .feedback-glass-panel {
    background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.05)
        ) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}

/* Custom dropdown */

.feedback-category-field {
    display: grid;
    gap: 8px;
}

.feedback-control-label {
    font-weight: 700;
}

.feedback-custom-select {
    position: relative;
}

.feedback-category-button {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    border: 1px solid rgba(125, 165, 215, 0.42) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.feedback-category-button svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto;
    transition: transform 160ms ease;
}

.feedback-category-button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.feedback-category-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    z-index: 40;
    display: grid;
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(125, 165, 215, 0.38);
    border-radius: 13px;
    background: color-mix(
            in srgb,
            var(--card-bg, #ffffff) 82%,
            transparent
        );
    box-shadow: 0 16px 36px rgba(25, 55, 95, 0.20);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.feedback-category-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.feedback-category-menu button:hover {
    background: color-mix(
            in srgb,
            var(--accent-color, #2475bd) 14%,
            transparent
        );
}

.feedback-category-menu svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

/* Center stars precisely */

.feedback-star {
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    text-align: center !important;
}

.feedback-star::first-line {
    line-height: 1 !important;
}

/* Normal placeholder text */

.feedback-page textarea {
    font-weight: 400 !important;
}

.feedback-page textarea::placeholder {
    color: inherit !important;
    font-weight: 400 !important;
    opacity: 0.58 !important;
}

/* Center Send Feedback icon and text */

.feedback-page #submit-feedback-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    line-height: 1 !important;
}

.feedback-page #submit-feedback-button svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}

.feedback-page #submit-feedback-button span {
    display: inline-flex;
    align-items: center;
    line-height: 1 !important;
}

/* Theme-aware dark glass */

html[data-theme="dark"] .app-page-card.feedback-page, body.dark-mode .app-page-card.feedback-page {
    background: linear-gradient(
            135deg,
            rgba(21, 48, 76, 0.68),
            rgba(11, 29, 48, 0.44)
        ) !important;
}

html[data-theme="dark"] .feedback-page .feedback-glass-panel, body.dark-mode .feedback-page .feedback-glass-panel {
    background: rgba(14, 36, 59, 0.42) !important;
}

html[data-theme="dark"] .feedback-category-menu, body.dark-mode .feedback-category-menu {
    background: rgba(14, 35, 57, 0.90) !important;
}

@media (max-width: 600px) {
    .feedback-page-shell {
        width: calc(100% - 24px);
    }
}

/* Always respect Split View's hidden state */

#split-view-controls[hidden] {
    display: none !important;
}

/* =========================================================
   FEEDBACK DROPDOWN — PALETTE MENU STYLE
========================================================= */
.feedback-category-menu {
    display: block !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    padding: 6px !important;
    border: 1px solid color-mix(
            in srgb,
            var(--accent-color, #2475bd) 24%,
            transparent
        ) !important;
    border-radius: 14px !important;
    background: color-mix(
            in srgb,
            var(--card-bg, #ffffff) 82%,
            transparent
        ) !important;
    box-shadow: 0 16px 34px rgba(28, 52, 84, 0.18) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}

.feedback-category-menu[hidden] {
    display: none !important;
}

.feedback-category-menu button {
    position: relative !important;
    width: 100% !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 9px 38px 9px 11px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 400 !important;
    text-align: left !important;
}

.feedback-category-menu button:hover, .feedback-category-menu button:focus-visible {
    background: color-mix(
            in srgb,
            var(--accent-color, #2475bd) 10%,
            transparent
        ) !important;
}

.feedback-category-menu button.is-selected {
    color: var(--accent-color, #175da3) !important;
    font-weight: 700 !important;
    background: color-mix(
            in srgb,
            var(--accent-color, #2475bd) 14%,
            transparent
        ) !important;
}

.feedback-category-menu button.is-selected::after {
    content: "✓";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    font-weight: 700;
}

/* =========================================================
   FUMIDESK EDITABLE DROPDOWNS — FINAL
========================================================= */
#add-template-container .cloudshelf-editable-dropdown {
    position: relative !important;
    width: 100% !important;
    isolation: isolate;
}

/* Main editable input */

#add-template-container .cloudshelf-editable-dropdown > input {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 48px 0 14px !important;
    box-sizing: border-box !important;

    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 28%,
        var(--ios-line)
    ) !important;

    border-radius: 12px !important;

    color: var(--ios-text) !important;

    background: color-mix(
        in srgb,
        var(--theme-primary) 5%,
        var(--ios-glass-strong)
    ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.35),
        0 3px 10px
        rgba(15, 23, 42, 0.06) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
}

#add-template-container
.cloudshelf-editable-dropdown
> input:hover {
    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.48
        ) !important;
}


#add-template-container
.cloudshelf-editable-dropdown
> input:focus {
    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.60
        ) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--theme-primary-rgb),
            0.13
        ),
        inset 0 1px 0
        rgba(255, 255, 255, 0.35),
        0 3px 10px
        rgba(15, 23, 42, 0.06) !important;
}

/* Arrow button */

#add-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle {
    position: absolute !important;
    z-index: 4 !important;
    top: 0 !important;
    right: 0 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-left: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 18%,
        var(--ios-line)
    ) !important;
    border-radius: 0 12px 12px 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Remove Lucide arrow so it cannot become misaligned */

#add-template-container .cloudshelf-dropdown-toggle svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    transition: transform 0.18s ease !important;
}


#add-template-container .cloudshelf-dropdown-toggle::before {
    content: none !important;
    display: none !important;
}


#add-template-container
.cloudshelf-dropdown-toggle[aria-expanded="true"]
svg {
    transform: rotate(180deg) !important;
}

/* Hover and keyboard focus */

#add-template-container .cloudshelf-dropdown-toggle:hover, #add-template-container .cloudshelf-dropdown-toggle:focus-visible {
    background: rgba(var(--theme-primary-rgb), 0.08) !important;
    outline: none !important;
}

/* Dropdown panel */

#add-template-container .cloudshelf-dropdown-menu {
    position: absolute !important;
    z-index: 1000 !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 240px !important;
    margin: 0 !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    color: #1f2937 !important;
    background: color-mix(
            in srgb,
            white 90%,
            transparent
        ) !important;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.24) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

#add-template-container .cloudshelf-dropdown-menu[hidden] {
    display: none !important;
}

/* Fully reset dropdown-option buttons */

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    all: unset !important;
}

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1.35 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible {
    color: var(--theme-primary-dark) !important;
    background: rgba(var(--theme-primary-rgb), 0.12) !important;
    outline: none !important;
}

/* Empty-state message */

#add-template-container .cloudshelf-dropdown-empty {
    display: block !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   DARK MODE
========================================================= */
html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-toggle {
    color: #cbd5e1 !important;
    border-left-color: rgba(var(--theme-primary-rgb), 0.34) !important;
    background: transparent !important;
}

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-toggle:hover, html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-toggle:focus-visible {
    color: #ffffff !important;
    background: rgba(var(--theme-primary-rgb), 0.18) !important;
}

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu {
    color: var(--ios-text) !important;

    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 22%,
            var(--ios-glass-strong)
        ) !important;

    border-color: color-mix(
            in srgb,
            var(--theme-primary) 34%,
            var(--ios-line)
        ) !important;

    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
}

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible {
    color: #ffffff !important;
    background: rgba(var(--theme-primary-rgb), 0.24) !important;
}

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-empty {
    color: #94a3b8 !important;
    background: transparent !important;
}

/* =========================================================
   ADD TEMPLATE DROPDOWN — LAYERING + OPTION ROWS
========================================================= */
/* Do not trap the menu inside a low stacking layer */

#add-template-container .cloudshelf-editable-dropdown {
    isolation: auto !important;
    z-index: auto !important;
}

/* Place whichever dropdown is open above every following field */

#add-template-container .cloudshelf-editable-dropdown:has(
    .cloudshelf-dropdown-menu:not([hidden])
) {
    z-index: 2000 !important;
}

/* Fallback while its input or button has focus */

#add-template-container .cloudshelf-editable-dropdown:focus-within {
    z-index: 2000 !important;
}

/* Make the panel a clearly separated floating menu */

#add-template-container .cloudshelf-dropdown-menu {
    z-index: 2001 !important;
    gap: 4px !important;
    padding: 6px !important;
    overflow: hidden auto !important;
}

/* Give every selection its own neat row */

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    min-height: 38px !important;
    padding: 8px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: rgba(var(--theme-primary-rgb), 0.055) !important;
}

/* Hovered or keyboard-selected option */

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-primary-dark) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.2) !important;
    background: rgba(var(--theme-primary-rgb), 0.14) !important;
}

/* Dark-mode option rows */

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    color: #e5edf8 !important;
    border-color: rgba(var(--theme-primary-rgb), 0.12) !important;
    background: rgba(var(--theme-primary-rgb), 0.08) !important;
}

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: #ffffff !important;
    border-color: rgba(var(--theme-primary-rgb), 0.36) !important;
    background: rgba(var(--theme-primary-rgb), 0.24) !important;
}

/* =========================================================
   CLOUDSHELF — UNIFIED CUSTOM DROPDOWN APPEARANCE
   Matches the Colors palette picker
========================================================= */
/* Dropdown panel */

.cloudshelf-dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px !important;
    max-height: 280px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 25%,
            var(--ios-line)
        ) !important;
    border-radius: 13px !important;
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        ) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(22px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(var(--theme-primary-rgb), 0.65) transparent !important;
}

/* Remove the individual grey boxes around options */

.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 35px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
}

/* Hover and keyboard-highlighted option */

.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-primary-dark) !important;
    background: rgba(var(--theme-primary-rgb), 0.11) !important;
    outline: none !important;
}

/* Currently selected option */

.cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-primary-dark) !important;
    background: rgba(var(--theme-primary-rgb), 0.17) !important;
    font-weight: 700 !important;
}

/* Keep the checkmark at the right */

.cloudshelf-dropdown-check {
    margin-left: auto !important;
    color: var(--theme-primary-dark) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Empty dropdown message */

.cloudshelf-dropdown-empty {
    padding: 9px 10px !important;
    color: var(--ios-muted) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Chromium, Safari and Edge scrollbar */

.cloudshelf-dropdown-menu::-webkit-scrollbar, .palette-dropdown-menu::-webkit-scrollbar {
    width: 8px !important;
}

.cloudshelf-dropdown-menu::-webkit-scrollbar-track, .palette-dropdown-menu::-webkit-scrollbar-track {
    margin: 6px 0 !important;
    background: transparent !important;
}

.cloudshelf-dropdown-menu::-webkit-scrollbar-thumb, .palette-dropdown-menu::-webkit-scrollbar-thumb {
    min-height: 34px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(var(--theme-primary-rgb), 0.65) !important;
    background-clip: padding-box !important;
}

.cloudshelf-dropdown-menu::-webkit-scrollbar-thumb:hover, .palette-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--theme-primary-rgb), 0.9) !important;
    background-clip: padding-box !important;
}

/* =========================================================
   DARK MODE
========================================================= */
html[data-theme="dark"] .cloudshelf-dropdown-menu {
    color: #f8fafc !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            var(--theme-dark-panel-strong)
        ) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    color: #f8fafc !important;
    background: transparent !important;
}

html[data-theme="dark"] .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, html[data-theme="dark"] .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, html[data-theme="dark"] .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-secondary) !important;
    background: rgba(var(--theme-primary-rgb), 0.18) !important;
}

html[data-theme="dark"] .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-secondary) !important;
    background: rgba(var(--theme-primary-rgb), 0.25) !important;
}

html[data-theme="dark"] .cloudshelf-dropdown-check {
    color: var(--theme-secondary) !important;
}

/* =========================================================
   ADD TEMPLATE — EXACT PALETTE PICKER OPTION STYLE
========================================================= */
/* Plain options: no individual grey cards */

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 35px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
}

/* Hovered or keyboard-highlighted option */

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-primary-dark) !important;
    background: rgba(var(--theme-primary-rgb), 0.11) !important;
    outline: none !important;
}

/* Current selection */

#add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-primary-dark) !important;
    background: rgba(var(--theme-primary-rgb), 0.17) !important;
    font-weight: 700 !important;
}

/* Selected checkmark */

#add-template-container .cloudshelf-dropdown-check {
    display: block !important;
    margin-left: auto !important;
    padding-left: 12px !important;
    color: var(--theme-primary-dark) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Remove gaps between plain choices */

#add-template-container .cloudshelf-dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px !important;
}

/* Dark-mode plain options */

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    color: #f8fafc !important;
    background: transparent !important;
}

/* Dark-mode hover */

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-secondary) !important;
    background: rgba(var(--theme-primary-rgb), 0.18) !important;
}

/* Dark-mode current selection */

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-secondary) !important;
    background: rgba(var(--theme-primary-rgb), 0.25) !important;
}

html[data-theme="dark"] #add-template-container .cloudshelf-dropdown-check {
    color: var(--theme-secondary) !important;
}

/* =========================================================
   IMPORT WORD FILE — MATCH APP DROPDOWN DESIGN
========================================================= */
#import-template-container .cloudshelf-dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.22) !important;
    border-radius: 14px !important;
    background: var(--ios-glass-strong) !important;
    box-shadow: var(--ios-shadow-lg) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--theme-primary-rgb), 0.72) transparent;
}

/* Plain, flat option rows */

#import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
}

/* Hovered and keyboard-highlighted choices */

#import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-primary-dark) !important;
    background: rgba(var(--theme-primary-rgb), 0.12) !important;
    outline: none !important;
}

/* Current selection */

#import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-primary-dark) !important;
    background: rgba(var(--theme-primary-rgb), 0.18) !important;
    font-weight: 700 !important;
}

/* Selected-choice checkmark */

#import-template-container .cloudshelf-dropdown-check {
    display: block !important;
    margin-left: auto !important;
    padding-left: 12px !important;
    color: var(--theme-primary-dark) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Chrome, Edge and Safari scrollbar */

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar {
    width: 7px !important;
}

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-track {
    margin: 7px 0 !important;
    background: transparent !important;
}

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(var(--theme-primary-rgb), 0.72) !important;
}

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--theme-primary-rgb), 0.92) !important;
}

/* Dark mode */

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu {
    border-color: rgba(var(--theme-primary-rgb), 0.48) !important;
    background: rgba(var(--theme-background-rgb), 0.90) !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    color: #f8fafc !important;
    background: transparent !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-secondary) !important;
    background: rgba(var(--theme-primary-rgb), 0.18) !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-secondary) !important;
    background: rgba(var(--theme-primary-rgb), 0.25) !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-check {
    color: var(--theme-secondary) !important;
}

/* =========================================================
   IMPORT WORD FILE — FINAL DROPDOWN AND TOOLBAR FIX
========================================================= */
/* Compact dropdown menu like the Colors picker */

#import-template-container .cloudshelf-dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px !important;
    max-height: 260px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 14px !important;
    background: var(--ios-glass-strong) !important;
    color: var(--ios-text) !important;
    box-shadow: var(--ios-shadow-lg) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    box-sizing: border-box !important;
}

/* Remove the old individual card appearance */

#import-template-container .cloudshelf-dropdown-menu > button {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
    font: inherit !important;
    line-height: 1.25 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Hovered option */

#import-template-container .cloudshelf-dropdown-menu > button:hover, #import-template-container .cloudshelf-dropdown-menu > button.is-highlighted {
    background: var(--ios-control-hover) !important;
}

/* Selected option */

#import-template-container .cloudshelf-dropdown-menu > button.is-selected {
    background: var(--ios-selected-bg) !important;
    color: var(--ios-accent) !important;
    font-weight: 700 !important;
}

/* Selected check mark */

#import-template-container .cloudshelf-dropdown-check {
    flex: 0 0 auto !important;
    margin-left: 12px !important;
    color: var(--ios-accent) !important;
    font-weight: 800 !important;
}

/* Empty dropdown message */

#import-template-container .cloudshelf-dropdown-empty {
    padding: 10px !important;
    color: var(--ios-text-muted) !important;
    font-size: 13px !important;
}

/* Palette-aware scrollbar */

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar {
    width: 9px !important;
}

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-track {
    margin: 5px 0 !important;
    background: transparent !important;
}

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: var(--ios-accent) !important;
    background-clip: padding-box !important;
}

/* Import formatting toolbar */

#import-template-container .import-card-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Keep the label separate from the buttons */

#import-template-container .import-toolbar-label {
    flex: 0 0 auto !important;
    margin: 0 4px 0 0 !important;
    white-space: nowrap !important;
    color: var(--ios-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
}

/* All toolbar buttons have identical dimensions */

#import-template-container .import-card-toolbar > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Lucide toolbar icons */

#import-template-container .import-card-toolbar > button svg {
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
}

/* Small screens: move the label above the buttons */

@media (max-width: 600px) {
    #import-template-container .import-toolbar-label {
        flex: 0 0 100% !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
    }
}

/* =========================================================
   IMPORT PREVIEW — FINAL FIELD LAYOUT
========================================================= */
.import-preview-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.58fr) !important;
    gap: 18px 16px !important;
    width: 100% !important;
    align-items: start !important;
}

.import-preview-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.import-preview-title-field {
    grid-column: 1 !important;
}

.import-preview-area-field {
    grid-column: 2 !important;
}

.import-preview-category-field, .import-preview-content-field {
    grid-column: 1 / -1 !important;
}

.import-preview-field > label {
    display: block !important;
    margin: 0 !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

/* Editable dropdown remains one complete control */

.import-preview-field .cloudshelf-editable-dropdown {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.import-preview-field .cloudshelf-editable-dropdown > input {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    padding-right: 58px !important;
    box-sizing: border-box !important;
}

.import-preview-field .cloudshelf-dropdown-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 13px 13px 0 !important;
    z-index: 2 !important;
}

.import-preview-field .cloudshelf-dropdown-toggle svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

.import-preview-field .cloudshelf-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
}

/* Full-width content editor */

.import-preview-content-field .import-rich-editor {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 230px !important;
    box-sizing: border-box !important;
}

/* Import formatting toolbar */

.import-preview-card .rich-editor-toolbar, .import-preview-card .import-format-toolbar, .import-preview-card [data-import-toolbar] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
}

.import-preview-card .rich-editor-toolbar button, .import-preview-card .import-format-toolbar button, .import-preview-card [data-import-toolbar] button {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.import-preview-card .rich-editor-toolbar button svg, .import-preview-card .import-format-toolbar button svg, .import-preview-card [data-import-toolbar] button svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
}

/* Small screens */

@media (max-width: 760px) {
    .import-preview-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .import-preview-title-field, .import-preview-area-field, .import-preview-category-field, .import-preview-content-field {
        grid-column: 1 !important;
    }
}

/* =========================================================
   IMPORT WORD — FOLDER CONFIRM + PALETTE-STYLE DROPDOWNS
   Scoped to the import UI only.
========================================================= */
/* =========================================================
   IMPORT SOURCE PICKERS
   Word document + Folder
========================================================= */
#import-template-container button.file-picker.import-source-picker {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 124px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 20px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    font: inherit !important;
    color: var(--ios-text) !important;
    cursor: pointer !important;
    transform: none !important;
}

#import-template-container button.file-picker.import-source-picker strong, #import-template-container button.file-picker.import-source-picker span {
    width: 100% !important;
    display: block !important;
    align-self: stretch !important;
    margin: 0 !important;
    text-align: left !important;
}

#import-template-container button.file-picker.import-source-picker strong {
    color: var(--ios-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

#import-template-container button.file-picker.import-source-picker span {
    color: var(--ios-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

#import-template-container button.file-picker.import-source-picker:hover {
    border-color: rgba(
            var(--theme-primary-rgb),
            0.42
        ) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 7%,
            var(--ios-glass-strong)
        ) !important;
    transform: none !important;
}

#import-template-container button.file-picker.import-source-picker:focus-visible {
    outline: none !important;
    border-color: rgba(
            var(--theme-primary-rgb),
            0.58
        ) !important;
    box-shadow: 0 0 0 3px rgba(
            var(--theme-primary-rgb),
            0.12
        ), inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.42
        ) !important;
}

#import-template-container button.file-picker.import-source-picker:active {
    transform: none !important;
}

/* =========================================================
   IMPORT CONFIRMATION TOAST
========================================================= */
.toast-confirm .toast-import-upload {
    background: linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 92%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 50%,
            var(--ios-line)
        ) !important;
    color: #ffffff !important;
}

.toast-confirm .toast-import-upload:hover:not(:disabled) {
    filter: brightness(1.04);
}

/* =========================================================
   IMPORT EDITABLE DROPDOWNS
========================================================= */
#import-template-container .cloudshelf-editable-dropdown {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
}

#import-template-container .cloudshelf-editable-dropdown:has(
    .cloudshelf-dropdown-menu:not([hidden])
) {
    z-index: 10000 !important;
}

/* =========================================================
   DROPDOWN INPUT
========================================================= */
#import-template-container .cloudshelf-editable-dropdown > input {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 48px 0 14px !important;
    box-sizing: border-box !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
    border-radius: 12px !important;
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass-strong)
        ) !important;
    box-shadow: inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.35
        ), 0 3px 10px rgba(
            15,
            23,
            42,
            0.06
        ) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#import-template-container .cloudshelf-editable-dropdown > input:hover {
    border-color: rgba(
            var(--theme-primary-rgb),
            0.48
        ) !important;
}

#import-template-container .cloudshelf-editable-dropdown > input:focus {
    border-color: rgba(
            var(--theme-primary-rgb),
            0.60
        ) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(
            var(--theme-primary-rgb),
            0.13
        ), inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.35
        ), 0 3px 10px rgba(
            15,
            23,
            42,
            0.06
        ) !important;
}

/* =========================================================
   DROPDOWN ARROW
========================================================= */
#import-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-left: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 18%,
            var(--ios-line)
        ) !important;
    border-radius: 0 12px 12px 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 3 !important;
}

#import-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle:hover, #import-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle:focus-visible {
    background: rgba(
            var(--theme-primary-rgb),
            0.08
        ) !important;
    outline: none !important;
}

#import-template-container .cloudshelf-dropdown-toggle .lucide {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    transition: transform 0.18s ease !important;
}

#import-template-container .cloudshelf-dropdown-toggle[
    aria-expanded="true"
] .lucide {
    transform: rotate(180deg) !important;
}

/* =========================================================
   DROPDOWN MENU
========================================================= */
#import-template-container .cloudshelf-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important;
    width: 100% !important;
    max-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 25%,
            var(--ios-line)
        ) !important;
    border-radius: 13px !important;
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        ) !important;
    box-shadow: 0 16px 40px rgba(
            15,
            23,
            42,
            0.18
        ), inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.4
        ) !important;
    backdrop-filter: blur(22px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(
            var(--theme-primary-rgb),
            0.35
        ) transparent !important;
}

/* * IMPORTANT:
 * This is what fixes Area/Page and Category
 * staying open at the same time.
 *
 * Older CSS was forcing display:flex even
 * when JavaScript applied hidden.
 */
#import-template-container .cloudshelf-dropdown-menu[hidden] {
    display: none !important;
}

/* =========================================================
   DROPDOWN OPTIONS
========================================================= */
#import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    all: unset !important;
    width: 100% !important;
    min-height: 35px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
}

#import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-primary-dark) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.11
        ) !important;
    outline: none !important;
}

#import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-primary-dark) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.17
        ) !important;
    font-weight: 700 !important;
}

#import-template-container .cloudshelf-dropdown-check {
    margin-left: auto !important;
    padding-left: 12px !important;
    color: var(--theme-primary-dark) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

#import-template-container .cloudshelf-dropdown-empty {
    padding: 9px 10px !important;
    color: var(--ios-muted) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* =========================================================
   DROPDOWN SCROLLBAR
========================================================= */
#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar {
    width: 7px !important;
}

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-track {
    background: transparent !important;
}

#import-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-thumb {
    border: 0 !important;
    border-radius: 20px !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.30
        ) !important;
}

/* =========================================================
   DARK MODE
========================================================= */
html[data-theme="dark"] #import-template-container .cloudshelf-editable-dropdown > input {
    color: #f8fafc !important;
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 18%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 28%,
            var(--ios-line)
        ) !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu {
    color: #f8fafc !important;
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: color-mix(
            in srgb,
            var(--theme-primary) 22%,
            var(--ios-line)
        ) !important;
    box-shadow: 0 18px 44px rgba(
            0,
            0,
            0,
            0.35
        ), inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.04
        ) !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    color: #f8fafc !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.25
        ) !important;
}

html[data-theme="dark"] #import-template-container .cloudshelf-dropdown-check {
    color: var(--theme-secondary) !important;
}

/* =========================================================
   IMPORT WINDOW — PALETTE-AWARE SCROLLBAR
========================================================= */
#import-template-container:not(:empty) {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(
            var(--theme-primary-rgb),
            0.68
        ) transparent !important;
}

/* Chrome / Edge / Safari */

#import-template-container:not(:empty)::-webkit-scrollbar {
    width: 10px !important;
}

#import-template-container:not(:empty)::-webkit-scrollbar-track {
    margin: 10px 0 !important;
    background: transparent !important;
}

#import-template-container:not(:empty)::-webkit-scrollbar-thumb {
    min-height: 42px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.68
        ) !important;
    background-clip: padding-box !important;
}

#import-template-container:not(:empty)::-webkit-scrollbar-thumb:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.92
        ) !important;
    background-clip: padding-box !important;
}

/* =========================================================
   IMPORT PREVIEW — USE FULL CARD WIDTH
========================================================= */
#import-template-container .import-candidate > .import-preview-fields {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   EDIT TEMPLATE — MODERN FUMIDESK DROPDOWNS
========================================================= */
/* Wrapper */

#edit-template-container .cloudshelf-editable-dropdown {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    isolation: auto !important;
    z-index: auto !important;
}

/* Raise whichever dropdown is currently open */

#edit-template-container .cloudshelf-editable-dropdown:has(
    .cloudshelf-dropdown-menu:not([hidden])
) {
    z-index: 3000 !important;
}

#edit-template-container .cloudshelf-editable-dropdown:focus-within {
    z-index: 3000 !important;
}

/* =========================================================
   INPUT
========================================================= */
#edit-template-container .cloudshelf-editable-dropdown > input {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 48px 0 14px !important;
    box-sizing: border-box !important;

    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 28%,
        var(--ios-line)
    ) !important;

    border-radius: 12px !important;

    color: var(--ios-text) !important;

    background: color-mix(
        in srgb,
        var(--theme-primary) 5%,
        var(--ios-glass-strong)
    ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.35),
        0 3px 10px
        rgba(15, 23, 42, 0.06) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
}

#edit-template-container
.cloudshelf-editable-dropdown
> input:hover {
    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.48
        ) !important;
}


#edit-template-container
.cloudshelf-editable-dropdown
> input:focus {
    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.60
        ) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--theme-primary-rgb),
            0.13
        ),
        inset 0 1px 0
        rgba(255, 255, 255, 0.35),
        0 3px 10px
        rgba(15, 23, 42, 0.06) !important;
}

/* =========================================================
   ARROW BUTTON
========================================================= */
#edit-template-container .cloudshelf-editable-dropdown > button.cloudshelf-dropdown-toggle {
    position: absolute !important;
    z-index: 4 !important;
    top: 0 !important;
    right: 0 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-left: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 18%,
        var(--ios-line)
    ) !important;
    border-radius: 0 12px 12px 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* * Hide the Lucide arrow itself.
 * We draw one with CSS so it is always
 * perfectly centered like Add Template.
 */
#edit-template-container .cloudshelf-dropdown-toggle svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    transition: transform 0.18s ease !important;
}


#edit-template-container .cloudshelf-dropdown-toggle::before {
    content: none !important;
    display: none !important;
}


#edit-template-container
.cloudshelf-dropdown-toggle[aria-expanded="true"]
svg {
    transform: rotate(180deg) !important;
}

#edit-template-container .cloudshelf-dropdown-toggle:hover, #edit-template-container .cloudshelf-dropdown-toggle:focus-visible {
    outline: none !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.08
        ) !important;
}

/* =========================================================
   DROPDOWN MENU
========================================================= */
#edit-template-container .cloudshelf-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 260px !important;
    z-index: 3001 !important;
    margin: 0 !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 25%,
            var(--ios-line)
        ) !important;
    border-radius: 13px !important;
    color: var(--ios-text) !important;
    background: color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        ) !important;
    box-shadow: 0 16px 40px rgba(
            15,
            23,
            42,
            0.18
        ), inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.4
        ) !important;
    backdrop-filter: blur(22px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
}

/* CRITICAL — hidden must actually hide */

#edit-template-container .cloudshelf-dropdown-menu[hidden] {
    display: none !important;
}

/* =========================================================
   OPTIONS
========================================================= */
#edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--ios-text) !important;
    background: transparent !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    cursor: pointer !important;
}

#edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, #edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, #edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-primary-dark) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.11
        ) !important;
    outline: none !important;
}

#edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-primary-dark) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.17
        ) !important;
    font-weight: 700 !important;
}

#edit-template-container .cloudshelf-dropdown-check {
    margin-left: auto !important;
    padding-left: 12px !important;
    color: var(--theme-primary-dark) !important;
    font-weight: 700 !important;
}

/* =========================================================
   DARK MODE — EDIT DROPDOWNS
========================================================= */
html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-toggle {
    color: #cbd5e1 !important;
    border-left-color: rgba(
            var(--theme-primary-rgb),
            0.34
        ) !important;
}

html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-toggle:hover, html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-toggle:focus-visible {
    color: #ffffff !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;
}

html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-menu {
    color: #f8fafc !important;
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            var(--theme-dark-panel-strong)
        ) !important;
    border-color: rgba(
            var(--theme-primary-rgb),
            0.40
        ) !important;
}

html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option {
    color: #f8fafc !important;
}

html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:hover, html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option:focus-visible, html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-highlighted {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;
}

html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-menu > button.cloudshelf-dropdown-option.is-selected {
    color: var(--theme-secondary) !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.25
        ) !important;
}

html[data-theme="dark"] #edit-template-container .cloudshelf-dropdown-check {
    color: var(--theme-secondary) !important;
}

/* =========================================================
   EDIT TEMPLATE — PALETTE-AWARE SCROLLBARS
========================================================= */
/* * Outer Edit Template window
 * + inner Content editor
 * + dropdown menus
 */
#edit-template-container .modal, #edit-template-container .rich-template-editor, #edit-template-container .cloudshelf-dropdown-menu {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(
            var(--theme-primary-rgb),
            0.68
        ) transparent !important;
}

/* Chrome / Edge / Safari */

#edit-template-container .modal::-webkit-scrollbar, #edit-template-container .rich-template-editor::-webkit-scrollbar {
    width: 10px !important;
}

#edit-template-container .modal::-webkit-scrollbar-track, #edit-template-container .rich-template-editor::-webkit-scrollbar-track {
    margin: 8px 0 !important;
    background: transparent !important;
}

#edit-template-container .modal::-webkit-scrollbar-thumb, #edit-template-container .rich-template-editor::-webkit-scrollbar-thumb {
    min-height: 42px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.68
        ) !important;
    background-clip: padding-box !important;
}

#edit-template-container .modal::-webkit-scrollbar-thumb:hover, #edit-template-container .rich-template-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.92
        ) !important;
    background-clip: padding-box !important;
}

/* * Dropdown scrollbar stays slightly thinner,
 * just like the Import dropdowns.
 */
#edit-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar {
    width: 7px !important;
}

#edit-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-track {
    margin: 6px 0 !important;
    background: transparent !important;
}

#edit-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.68
        ) !important;
    background-clip: padding-box !important;
}

#edit-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.92
        ) !important;
    background-clip: padding-box !important;
}

/* =========================================================
   ADD TEMPLATE — PALETTE-AWARE SCROLLBARS
========================================================= */
/* Firefox */

#add-template-container:not(:empty), #add-template-container .rich-template-editor, #add-template-container .cloudshelf-dropdown-menu {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(
            var(--theme-primary-rgb),
            0.68
        ) transparent !important;
}

/* =========================================================
   OUTER ADD TEMPLATE WINDOW
   Chrome / Edge / Safari
========================================================= */
#add-template-container:not(:empty)::-webkit-scrollbar {
    width: 10px !important;
}

#add-template-container:not(:empty)::-webkit-scrollbar-track {
    margin: 10px 0 !important;
    background: transparent !important;
}

#add-template-container:not(:empty)::-webkit-scrollbar-thumb {
    min-height: 42px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.68
        ) !important;
    background-clip: padding-box !important;
}

#add-template-container:not(:empty)::-webkit-scrollbar-thumb:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.92
        ) !important;
    background-clip: padding-box !important;
}

/* =========================================================
   INNER TEMPLATE CONTENT EDITOR
========================================================= */
#add-template-container .rich-template-editor::-webkit-scrollbar {
    width: 10px !important;
}

#add-template-container .rich-template-editor::-webkit-scrollbar-track {
    margin: 8px 0 !important;
    background: transparent !important;
}

#add-template-container .rich-template-editor::-webkit-scrollbar-thumb {
    min-height: 42px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.68
        ) !important;
    background-clip: padding-box !important;
}

#add-template-container .rich-template-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.92
        ) !important;
    background-clip: padding-box !important;
}

/* =========================================================
   ADD TEMPLATE DROPDOWN SCROLLBARS
========================================================= */
#add-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar {
    width: 7px !important;
}

#add-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-track {
    margin: 6px 0 !important;
    background: transparent !important;
}

#add-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(
            var(--theme-primary-rgb),
            0.68
        ) !important;
    background-clip: padding-box !important;
}

#add-template-container .cloudshelf-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.92
        ) !important;
    background-clip: padding-box !important;
}

/* =========================================================
   FEEDBACK PAGE — DISTRACTION-FREE MODE
========================================================= */
/* * Keep only:
 * - hamburger/account menu
 * - Back button
 * - Feedback page/form
 *
 * Hide the normal Library controls while Feedback is open.
 */
body.feedback-page-active .brand-block, body.feedback-page-active .search-position, body.feedback-page-active #template-controls, body.feedback-page-active #split-view-controls, body.feedback-page-active #template-container, body.feedback-page-active #favorites-container {
    display: none !important;
}

/* * The main header no longer needs the large
 * logo/search layout while Feedback is open.
 *
 * We keep the header itself because the hamburger
 * account menu is part of it and is fixed at
 * the upper-left.
 */
body.feedback-page-active .header {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* * Prevent the empty header from reserving
 * unnecessary vertical space.
 */
body.feedback-page-active #auth-container {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   FUMIDESK — KEYBOARD SHORTCUT SETTINGS
========================================================= */
/* =========================================================
   HAMBURGER MENU BUTTON
========================================================= */
.keyboard-shortcuts-menu-button {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.keyboard-shortcuts-menu-button svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
}

/* =========================================================
   OVERLAY
========================================================= */
.keyboard-shortcuts-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    background: rgba(
            15,
            23,
            42,
            0.42
        );
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* =========================================================
   MODAL
========================================================= */
.keyboard-shortcuts-modal {
    width: min(
            760px,
            calc(100vw - 32px)
        );
    max-height: min(
            820px,
            calc(100dvh - 48px)
        );
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 24px;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        );
    border-radius: 20px;
    color: var(--ios-text);
    background: color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
    box-shadow: 0 24px 70px rgba(
            15,
            23,
            42,
            0.26
        ), inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.4
        );
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
}

/* =========================================================
   HEADER
========================================================= */
.keyboard-shortcuts-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.keyboard-shortcuts-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 6px;
    color: var(--ios-text);
    font-size: 21px;
}

.keyboard-shortcuts-header h2 svg {
    width: 20px;
    height: 20px;
}

.keyboard-shortcuts-header p {
    margin: 0;
    color: var(--ios-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   CLOSE
========================================================= */
.keyboard-shortcuts-close {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px;
    border-radius: 11px !important;
}

.keyboard-shortcuts-close svg {
    width: 17px;
    height: 17px;
}

/* =========================================================
   NOTE
========================================================= */
.keyboard-shortcuts-note {
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(
            var(--theme-primary-rgb),
            0.13
        );
    border-radius: 12px;
    color: var(--ios-muted);
    background: rgba(
            var(--theme-primary-rgb),
            0.055
        );
    font-size: 12px;
    line-height: 1.5;
}

/* =========================================================
   KBD
========================================================= */
.keyboard-shortcuts-modal kbd {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 3px 7px;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 23%,
            var(--ios-line)
        );
    border-radius: 7px;
    color: var(--ios-text);
    background: color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass-strong)
        );
    box-shadow: 0 2px 4px rgba(
            15,
            23,
            42,
            0.07
        ), inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.42
        );
    font-family: inherit;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
}

/* =========================================================
   STATUS
========================================================= */
.keyboard-shortcuts-status {
    min-height: 18px;
    margin: 0 2px 10px;
    color: var(--ios-muted);
    font-size: 12px;
    line-height: 1.4;
}

.keyboard-shortcuts-status.is-error {
    color: #b42318;
}

.keyboard-shortcuts-status.is-success {
    color: #177245;
}

/* =========================================================
   LIST
========================================================= */
.keyboard-shortcut-list {
    display: grid;
    gap: 8px;
}

/* =========================================================
   ROW
========================================================= */
.keyboard-shortcut-row {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(200px, auto) auto;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid color-mix(
            in srgb,
            var(--theme-primary) 14%,
            var(--ios-line)
        );
    border-radius: 13px;
    background: color-mix(
            in srgb,
            var(--theme-primary) 2.5%,
            transparent
        );
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.keyboard-shortcut-row.is-recording {
    border-color: rgba(
            var(--theme-primary-rgb),
            0.55
        );
    background: rgba(
            var(--theme-primary-rgb),
            0.09
        );
    box-shadow: 0 0 0 3px rgba(
            var(--theme-primary-rgb),
            0.10
        );
}

/* =========================================================
   ACTION INFO
========================================================= */
.keyboard-shortcut-info {
    min-width: 0;
}

.keyboard-shortcut-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ios-text);
    font-size: 13px;
    font-weight: 700;
}

.keyboard-shortcut-name svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--theme-primary);
}

.keyboard-shortcut-info p {
    margin: 4px 0 0;
    color: var(--ios-muted);
    font-size: 11px;
    line-height: 1.35;
}

/* =========================================================
   KEY DISPLAY
========================================================= */
.keyboard-shortcut-keys {
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.keyboard-shortcut-plus {
    color: var(--ios-muted);
    font-size: 10px;
}

.keyboard-shortcut-recording-label {
    color: var(--theme-primary-dark);
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   ROW BUTTONS
========================================================= */
.keyboard-shortcut-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.keyboard-shortcut-change {
    min-height: 34px !important;
    padding: 7px 10px !important;
    white-space: nowrap;
    font-size: 12px !important;
}

.keyboard-shortcut-reset {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.keyboard-shortcut-reset svg {
    width: 14px;
    height: 14px;
}

/* =========================================================
   FOOTER
========================================================= */
.keyboard-shortcuts-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ios-line);
}

.keyboard-shortcuts-footer > span {
    color: var(--ios-muted);
    font-size: 11px;
    line-height: 1.4;
}

.keyboard-shortcuts-footer > div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.keyboard-shortcuts-reset-all, .keyboard-shortcuts-done {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.keyboard-shortcuts-reset-all svg {
    width: 15px;
    height: 15px;
}

.keyboard-shortcuts-done {
    color: #ffffff !important;
    background: linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--theme-primary) 85%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;
}

/* =========================================================
   SCROLLBAR
========================================================= */
.keyboard-shortcuts-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(
            var(--theme-primary-rgb),
            0.68
        ) transparent;
}

.keyboard-shortcuts-modal::-webkit-scrollbar {
    width: 10px;
}

.keyboard-shortcuts-modal::-webkit-scrollbar-track {
    margin: 12px 0;
    background: transparent;
}

.keyboard-shortcuts-modal::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(
            var(--theme-primary-rgb),
            0.68
        );
    background-clip: padding-box;
}

.keyboard-shortcuts-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(
            var(--theme-primary-rgb),
            0.92
        );
    background-clip: padding-box;
}

/* =========================================================
   DARK MODE
========================================================= */
html[data-theme="dark"] .keyboard-shortcuts-modal {
    color: #f8fafc;
    background: color-mix(
            in srgb,
            var(--theme-primary-dark) 20%,
            var(--theme-dark-panel-strong)
        );
    border-color: rgba(
            var(--theme-primary-rgb),
            0.34
        );
    box-shadow: 0 28px 80px rgba(
            0,
            0,
            0,
            0.48
        ), inset 0 1px 0 rgba(
            255,
            255,
            255,
            0.04
        );
}

html[data-theme="dark"] .keyboard-shortcuts-modal kbd {
    color: #f8fafc;
    background: rgba(
            var(--theme-primary-rgb),
            0.11
        );
    border-color: rgba(
            var(--theme-primary-rgb),
            0.26
        );
}

html[data-theme="dark"] .keyboard-shortcut-row {
    background: rgba(
            var(--theme-primary-rgb),
            0.045
        );
    border-color: rgba(
            var(--theme-primary-rgb),
            0.16
        );
}

html[data-theme="dark"] .keyboard-shortcut-row.is-recording {
    background: rgba(
            var(--theme-primary-rgb),
            0.18
        );
    border-color: rgba(
            var(--theme-primary-rgb),
            0.55
        );
}

html[data-theme="dark"] .keyboard-shortcut-recording-label {
    color: var(--theme-secondary);
}

html[data-theme="dark"] .keyboard-shortcuts-status.is-error {
    color: #fca5a5;
}

html[data-theme="dark"] .keyboard-shortcuts-status.is-success {
    color: #86efac;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 720px) {
    .keyboard-shortcuts-overlay {
        padding: 12px;
    }
    .keyboard-shortcuts-modal {
        width: 100%;
        max-height: calc(
                100dvh -
                24px
            );
        padding: 18px;
    }
    .keyboard-shortcut-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .keyboard-shortcut-keys {
        min-width: 0;
        justify-content: flex-start;
    }
    .keyboard-shortcut-actions {
        justify-content: flex-end;
    }
    .keyboard-shortcuts-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .keyboard-shortcuts-footer > div {
        width: 100%;
    }
    .keyboard-shortcuts-reset-all, .keyboard-shortcuts-done {
        flex: 1;
    }
}

/* =========================================================
   KEYBOARD SHORTCUTS — PERFECT CLOSE ICON ALIGNMENT
========================================================= */
.keyboard-shortcuts-close {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
}

.keyboard-shortcuts-close svg {
    display: block !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    transform: none !important;
    pointer-events: none !important;
}

/* =========================================================
   ADD TEMPLATE — RICH EDITOR MORE MENU CLIPPING FIX
========================================================= */

/*
 * The Add Template window is a scrollable floating panel.
 * Keep the editor's More menu short enough that the
 * parent panel does not clip its lower options.
 */

#add-template-container
.rich-editor-more-menu {
    max-height: min(240px, 38vh) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;

    scrollbar-width: thin !important;
    scrollbar-color:
        rgba(var(--theme-primary-rgb), 0.68)
        transparent !important;
}


/* Chrome / Edge / Safari */

#add-template-container
.rich-editor-more-menu::-webkit-scrollbar {
    width: 7px !important;
}

#add-template-container
.rich-editor-more-menu::-webkit-scrollbar-track {
    margin: 5px 0 !important;
    background: transparent !important;
}

#add-template-container
.rich-editor-more-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.68
        ) !important;

    background-clip:
        padding-box !important;
}

#add-template-container
.rich-editor-more-menu::-webkit-scrollbar-thumb:hover {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.92
        ) !important;

    background-clip:
        padding-box !important;
}

/* =========================================================
   CONTACT ADMINISTRATOR — MODERN PRIORITY DROPDOWN
========================================================= */


/* Keep the original select functional but invisible */

.support-contact-form
.support-priority-native {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(
        0,
        0,
        0,
        0
    ) !important;

    white-space: nowrap !important;

    border: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;
}



/* Wrapper */

.support-priority-dropdown {
    position: relative;

    width: 100%;
    min-width: 0;
}



/* Closed control */

.support-priority-toggle {
    position: relative;

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

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

    gap: 12px !important;

    margin: 0 !important;

    padding:
        0
        44px
        0
        14px !important;

    box-sizing: border-box !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--theme-primary) 25%,
            var(--ios-line)
        ) !important;

    border-radius:
        14px !important;

    color:
        var(--ios-text) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        ) !important;

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.38
        ) !important;

    font:
        inherit !important;

    font-weight:
        400 !important;

    text-align:
        left !important;
}


.support-priority-toggle:hover {
    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.45
        ) !important;
}


.support-priority-toggle:focus-visible {
    outline:
        none !important;

    border-color:
        var(--theme-primary) !important;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            var(--theme-primary-rgb),
            0.13
        ) !important;
}



/* Chevron */

.support-priority-arrow {
    position: absolute;

    top: 50%;
    right: 16px;

    width: 7px;
    height: 7px;

    border-right:
        1.7px solid
        currentColor;

    border-bottom:
        1.7px solid
        currentColor;

    transform:
        translateY(-65%)
        rotate(45deg);

    transition:
        transform
        160ms ease;

    pointer-events: none;
}


.support-priority-dropdown.open
.support-priority-arrow {
    transform:
        translateY(-30%)
        rotate(225deg);
}



/* Dropdown */

.support-priority-menu {
    position: absolute;

    top:
        calc(100% + 7px);

    left: 0;
    right: 0;

    z-index:
        20050;

    width: 100%;

    box-sizing:
        border-box;

    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 6px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        );

    border-radius:
        13px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        );

    box-shadow:
        0
        16px
        38px
        rgba(
            15,
            23,
            42,
            0.18
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.4
        );

    -webkit-backdrop-filter:
        blur(22px)
        saturate(165%);

    backdrop-filter:
        blur(22px)
        saturate(165%);
}


.support-priority-menu[hidden] {
    display: none !important;
}



/* Choices */

.support-priority-option {
    width: 100% !important;
    min-height: 38px !important;

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

    gap: 10px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        8px
        10px !important;

    border:
        0 !important;

    border-radius:
        8px !important;

    color:
        var(--ios-text) !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    font:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    text-align:
        left !important;

    transform:
        none !important;
}


.support-priority-option:hover,
.support-priority-option:focus-visible {
    outline:
        none !important;

    color:
        var(--theme-primary-dark) !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.11
        ) !important;

    transform:
        none !important;
}



/* Selected value */

.support-priority-option.is-selected {
    color:
        var(--theme-primary-dark) !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.17
        ) !important;

    font-weight:
        700 !important;
}


.support-priority-check {
    visibility:
        hidden;

    margin-left:
        auto;

    color:
        var(--theme-primary-dark);

    font-size:
        13px;

    font-weight:
        800;
}


.support-priority-option.is-selected
.support-priority-check {
    visibility:
        visible;
}



/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.support-priority-toggle {
    color:
        #f8fafc !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary-dark) 17%,
            var(--theme-dark-panel-strong)
        ) !important;

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.34
        ) !important;
}


html[data-theme="dark"]
.support-priority-menu {
    background:
        color-mix(
            in srgb,
            var(--theme-primary-dark) 24%,
            var(--theme-dark-panel-strong)
        ) !important;

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.35
        ) !important;

    box-shadow:
        0
        18px
        44px
        rgba(
            0,
            0,
            0,
            0.36
        ) !important;
}


html[data-theme="dark"]
.support-priority-option {
    color:
        #f8fafc !important;
}


html[data-theme="dark"]
.support-priority-option:hover,

html[data-theme="dark"]
.support-priority-option:focus-visible {
    color:
        var(--theme-secondary) !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;
}


html[data-theme="dark"]
.support-priority-option.is-selected {
    color:
        var(--theme-secondary) !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.25
        ) !important;
}


html[data-theme="dark"]
.support-priority-check {
    color:
        var(--theme-secondary);
}
/* =========================================================
   FEEDBACK FORM — FINAL TYPOGRAPHY
========================================================= */


/* ---------------------------------------------------------
   MAIN FORM HEADINGS
   These are the only form labels that should be bold.
--------------------------------------------------------- */

.feedback-page
.feedback-control-label,

.feedback-page
.feedback-field-label {
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   RATING "(optional)"
   Smaller and regular-weight.
--------------------------------------------------------- */

.feedback-page
.feedback-field-label
small {
    margin-left: 2px !important;

    color:
        var(--ios-muted, #64748b) !important;

    font-size: 11px !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}


/* ---------------------------------------------------------
   FEEDBACK TYPE — CLOSED SELECTED VALUE
   Never bold.
--------------------------------------------------------- */

.feedback-page
.feedback-category-button,

.feedback-page
.feedback-category-button
span,

.feedback-page
#feedback-category-label {
    font-weight: 400 !important;
}


/* ---------------------------------------------------------
   FEEDBACK TYPE — OPEN DROPDOWN OPTIONS
   All choices stay regular, including selected choice.
--------------------------------------------------------- */

.feedback-page
.feedback-category-menu
button,

.feedback-page
.feedback-category-menu
button span,

.feedback-page
.feedback-category-menu
button.is-selected,

.feedback-page
.feedback-category-menu
button.is-selected span {
    font-weight: 400 !important;
}


/* ---------------------------------------------------------
   YOUR FEEDBACK — USER-WRITTEN TEXT
   Never inherit bold from the parent label.
--------------------------------------------------------- */

.feedback-page
#feedback-message,

.feedback-page
.cloudshelf-feedback-form
textarea {
    font-weight: 400 !important;
}


/* Placeholder stays regular too */

.feedback-page
#feedback-message::placeholder,

.feedback-page
.cloudshelf-feedback-form
textarea::placeholder {
    font-weight: 400 !important;
}
/* =========================================================
   USERS CLOUD — ACCOUNT ACTIVITY
========================================================= */

.users-cloud-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.users-cloud-heading h2 {
    margin-bottom: 6px;
}

.users-cloud-heading p {
    margin: 0;
    color: var(--ios-muted);
}


/* =========================================================
   SUMMARY
========================================================= */

.user-activity-summary {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin:
        18px 0
        24px;
}


.user-activity-summary article {
    padding: 16px;

    border:
        1px solid
        var(--ios-line);

    border-radius:
        14px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass)
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.36
        );
}


.user-activity-summary span {
    display: block;

    color:
        var(--ios-muted);

    font-size: 12px;
    font-weight: 600;
}


.user-activity-summary strong {
    display: block;

    margin-top: 5px;

    color:
        var(--ios-text);

    font-size: 24px;
    font-weight: 700;
}


/* =========================================================
   USER HEADER
========================================================= */

.user-report-row summary {
    align-items: center;
}


.user-report-identity {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 9px;
}


.user-report-summary-count {
    color:
        var(--ios-muted);

    font-size: 13px;
}


/* =========================================================
   STATUS
========================================================= */

.user-activity-status {
    min-height: 25px;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding:
        0
        9px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1;
}


.user-activity-status svg {
    width: 13px;
    height: 13px;

    stroke-width: 1.8;
}


.user-activity-status.status-active {
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
}


.user-activity-status.status-signed-up-only {
    color: #475569;
    background: rgba(148, 163, 184, 0.16);
}


.user-activity-status.status-inactive {
    color: #92400e;
    background: rgba(245, 158, 11, 0.13);
}


.user-activity-status.status-warning {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}


.user-activity-status.status-admin {
    color:
        var(--theme-primary-dark);

    background:
        rgba(
            var(--theme-primary-rgb),
            0.13
        );
}


/* =========================================================
   ACCOUNT ACTIVITY DETAILS
========================================================= */

.user-activity-report {
    margin-bottom: 24px;

    padding: 16px;

    border:
        1px solid
        var(--ios-line);

    border-radius:
        14px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 2%,
            var(--ios-glass)
        );
}


.user-activity-report h4 {
    margin:
        0 0
        13px;
}


.user-activity-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.user-activity-grid > div {
    min-width: 0;

    padding: 11px 12px;

    border:
        1px solid
        var(--ios-line);

    border-radius:
        10px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 2%,
            transparent
        );
}


.user-activity-grid span {
    display: block;

    margin-bottom: 4px;

    color:
        var(--ios-muted);

    font-size: 11px;

    font-weight: 600;
}


.user-activity-grid strong {
    display: block;

    overflow-wrap:
        anywhere;

    color:
        var(--ios-text);

    font-size: 13px;

    font-weight: 600;
}


.user-inactivity-warning-date {
    display: flex;
    align-items: center;

    gap: 7px;

    margin:
        13px 0
        0;

    color: #b45309;

    font-size: 12px;
}


.user-inactivity-warning-date svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.user-activity-status.status-active {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.16);
}


html[data-theme="dark"]
.user-activity-status.status-signed-up-only {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.14);
}


html[data-theme="dark"]
.user-activity-status.status-inactive {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.16);
}


html[data-theme="dark"]
.user-activity-status.status-warning {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.16);
}


html[data-theme="dark"]
.user-activity-status.status-admin {
    color:
        var(--theme-secondary);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .user-activity-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .user-activity-grid {
        grid-template-columns:
            1fr;
    }


    .user-report-row summary {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}
/* =========================================
   DASHBOARD QUICK-ACCESS SECTIONS
   Pinned · Recent · Frequent · Favorites
   ========================================= */

.dashboard-home #template-container {
    display:
        grid;

    gap:
        12px;

    width:
        100%;
}


/* -------------------------------
   Section
   ------------------------------- */

.dashboard-template-section {
    min-width:
        0;

    padding:
        0;

    background:
        transparent;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;
}


/* -------------------------------
   Heading
   ------------------------------- */

.dashboard-template-heading {
    margin-bottom:
        14px;
}


.dashboard-section-collapsed
.dashboard-template-heading {
    margin-bottom:
        0;
}


.dashboard-section-toggle {
    display:
        grid !important;

    grid-template-columns:
        18px
        20px
        minmax(0, 1fr)
        auto;

    align-items:
        center !important;

    gap:
        10px !important;

    width:
        100% !important;

    min-height:
        52px;

    padding:
        11px 14px !important;

    color:
        var(--ios-text) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass-strong)
        ) !important;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 4px 14px
        rgba(
            var(--theme-primary-rgb),
            0.05
        ) !important;

    text-align:
        left !important;

    cursor:
        pointer;
}


.dashboard-section-toggle:hover {
    opacity:
        1 !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 10%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.38
        ) !important;
}


.dashboard-section-toggle:focus-visible {
    outline:
        3px solid
        rgba(
            var(--theme-primary-rgb),
            0.20
        );

    outline-offset:
        2px;
}


.dashboard-section-arrow {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        18px;

    color:
        var(--theme-primary);

    font-size:
        12px;

    line-height:
        1;
}


.dashboard-section-toggle
> .lucide {
    width:
        20px;

    height:
        20px;

    color:
        var(--theme-primary);

    stroke-width:
        2;
}


.dashboard-section-count {
    min-width:
        25px;

    padding:
        3px 8px;

    border-radius:
        999px;

    color:
        var(--theme-primary);

    background:
        rgba(
            var(--theme-primary-rgb),
            0.10
        );

    text-align:
        center;

    font-size:
        11px;

    font-weight:
        700;
}


.dashboard-template-heading h2 {
    min-width:
        0;

    margin:
        0;

    color:
        var(--ios-text);

    font-size:
        18px;

    font-weight:
        700;

    text-align:
        left;
}


.dashboard-template-heading svg {
    width: 20px;
    height: 20px;

    color:
        var(--theme-primary);

    stroke-width: 2.2;
}


/* -------------------------------
   Cards
   ------------------------------- */

.dashboard-template-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(
                300px,
                1fr
            )
        );
}


.dashboard-template-grid .card {
    min-width: 0;
}

/* Compact expandable Dashboard cards */

#template-container
.dashboard-template-grid
.dashboard-collapsible-card {
    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;
}

#template-container
.dashboard-template-grid
.dashboard-collapsible-card.is-expanded {
    height: 430px !important;
    min-height: 430px !important;
}

/* Dashboard uses View instead of displaying the date */

.dashboard-template-grid
.dashboard-collapsible-card
.template-date {
    display: none !important;
}

/* Keep hidden content completely collapsed */

#template-container
.dashboard-template-grid
.dashboard-collapsible-card
> .template-content[hidden] {
    display: none !important;
}

/* View control beside the title */

.dashboard-card-view-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 0 0 auto !important;
    padding: 3px 5px !important;

    border: 0 !important;
    border-radius: 6px !important;

    color: var(--ios-muted) !important;
    background: transparent !important;
    box-shadow: none !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.dashboard-card-view-button:hover,
.dashboard-card-view-button:focus-visible {
    color: var(--theme-primary) !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.08
        ) !important;

    opacity: 1 !important;
}

.dashboard-collapsible-card.is-expanded
.dashboard-card-view-button {
    color: var(--theme-primary) !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.1
        ) !important;
}

/* -------------------------------
   Pin button
   ------------------------------- */

.dashboard-pin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.08
        );

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.15
        );

    border-radius: 9px;

    color:
        var(--theme-primary);

    flex-shrink: 0;
}


.dashboard-pin-button:hover {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.16
        );

    opacity: 1;
}


.dashboard-pin-button svg {
    width: 16px;
    height: 16px;
}


/* -------------------------------
   Empty section
   ------------------------------- */

.dashboard-template-empty {
    margin: 0;

    padding: 22px 18px;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.045
        );

    border:
        1px dashed
        rgba(
            var(--theme-primary-rgb),
            0.22
        );

    border-radius: 14px;

    color: #64748b;

    font-size: 14px;
    line-height: 1.5;

    text-align: center;
}


/* =========================================
   DARK MODE
   ========================================= */

html[data-theme="dark"]
.dashboard-template-section {
    background:
        transparent;

    border:
        0;

    box-shadow:
        none;
}


html[data-theme="dark"]
.dashboard-template-heading h2 {
    color: #f8fafc;
}


html[data-theme="dark"]
.dashboard-template-empty {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.10
        );

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.32
        );

    color: #cbd5e1;
}


html[data-theme="dark"]
.dashboard-pin-button {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.15
        );

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.28
        );

    color:
        var(--theme-secondary);
}


html[data-theme="dark"]
.dashboard-pin-button:hover {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.24
        );
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

    .dashboard-home #template-container {
        gap:
            12px;
    }


    .dashboard-template-section {
        padding:
            0;
    }


    .dashboard-template-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 560px) {

    .dashboard-template-section {
        padding:
            0;
    }


    .dashboard-template-heading {
        margin-bottom: 14px;
    }


    .dashboard-template-heading h2 {
        font-size: 17px;
    }


    .dashboard-template-empty {
        padding: 18px 14px;
    }

}
/* =========================================
   SEARCH FILTERS
   ========================================= */

.v2-search-filters {
    display: flex;
    align-items: end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 10px;
}


.v2-search-filters label {
    display: grid;
    gap: 5px;

    min-width: 150px;
}


.v2-search-filters label > span {
    color: #64748b;

    font-size: 12px;
    font-weight: 700;
}


.v2-search-filters select {
    min-height: 40px;

    padding:
        8px
        32px
        8px
        11px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.18
        );

    border-radius: 10px;

    color: #1f2937;

    font-size: 13px;

    cursor: pointer;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.v2-search-filters select:focus {
    outline: none;

    border-color:
        var(--theme-primary);

    box-shadow:
        0 0 0 3px
        rgba(
            var(--theme-primary-rgb),
            0.12
        );
}


.v2-clear-search-filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 40px;

    padding: 8px 12px;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.08
        );

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.16
        );

    color:
        var(--theme-primary);

    font-size: 13px;
    font-weight: 700;
}


.v2-clear-search-filters:hover {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.16
        );

    opacity: 1;
}


.v2-clear-search-filters svg {
    width: 15px;
    height: 15px;
}


/* Dark mode */

html[data-theme="dark"]
.v2-search-filters label > span {
    color: #cbd5e1;
}


html[data-theme="dark"]
.v2-search-filters select {
    background:
        rgba(
            15,
            23,
            42,
            0.72
        );

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.30
        );

    color: #f8fafc;
}


html[data-theme="dark"]
.v2-clear-search-filters {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.15
        );

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.28
        );

    color:
        var(--theme-secondary);
}


/* Mobile */

@media (max-width: 560px) {

    .v2-search-filters {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        width: 100%;
    }


    .v2-search-filters label {
        min-width: 0;
    }


    .v2-search-filters select {
        width: 100%;
    }


    .v2-clear-search-filters {
        grid-column: 1 / -1;
        width: 100%;
    }

}
/* =========================================
   TEMPLATE EDITOR WORKSPACE
   Add · Import · Edit
   ========================================= */


/* -----------------------------------------
   EDIT TEMPLATE — WIDER WINDOW
   ----------------------------------------- */

#edit-template-container .modal {
    width:
        min(
            920px,
            calc(
                100vw - 40px
            )
        ) !important;

    max-width:
        920px !important;

    box-sizing:
        border-box !important;
}


/* -----------------------------------------
   SCROLLABLE CONTENT EDITORS
   ----------------------------------------- */

#add-template-container
.rich-template-editor,

#edit-template-container
.rich-template-editor,

#import-template-container
.import-rich-editor,

#import-template-container
.rich-template-editor {
    min-height:
        230px !important;

    height:
        min(
            42vh,
            390px
        ) !important;

    max-height:
        390px !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    overscroll-behavior:
        contain;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(
            var(--theme-primary-rgb),
            0.68
        )
        transparent;
}


/* -----------------------------------------
   CHROME / EDGE / SAFARI SCROLLBAR
   ----------------------------------------- */

#add-template-container
.rich-template-editor::-webkit-scrollbar,

#edit-template-container
.rich-template-editor::-webkit-scrollbar,

#import-template-container
.import-rich-editor::-webkit-scrollbar,

#import-template-container
.rich-template-editor::-webkit-scrollbar {
    width:
        10px;
}


#add-template-container
.rich-template-editor::-webkit-scrollbar-track,

#edit-template-container
.rich-template-editor::-webkit-scrollbar-track,

#import-template-container
.import-rich-editor::-webkit-scrollbar-track,

#import-template-container
.rich-template-editor::-webkit-scrollbar-track {
    margin:
        8px
        0;

    background:
        transparent;
}


#add-template-container
.rich-template-editor::-webkit-scrollbar-thumb,

#edit-template-container
.rich-template-editor::-webkit-scrollbar-thumb,

#import-template-container
.import-rich-editor::-webkit-scrollbar-thumb,

#import-template-container
.rich-template-editor::-webkit-scrollbar-thumb {
    min-height:
        42px;

    border:
        2px solid
        transparent;

    border-radius:
        999px;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.68
        );

    background-clip:
        padding-box;
}


#add-template-container
.rich-template-editor::-webkit-scrollbar-thumb:hover,

#edit-template-container
.rich-template-editor::-webkit-scrollbar-thumb:hover,

#import-template-container
.import-rich-editor::-webkit-scrollbar-thumb:hover,

#import-template-container
.rich-template-editor::-webkit-scrollbar-thumb:hover {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.92
        );

    background-clip:
        padding-box;
}


/* -----------------------------------------
   SMALL SCREENS
   ----------------------------------------- */

@media (max-width: 700px) {

    #edit-template-container .modal {
        width:
            calc(
                100vw - 24px
            ) !important;

        max-width:
            none !important;
    }


    #add-template-container
    .rich-template-editor,

    #edit-template-container
    .rich-template-editor,

    #import-template-container
    .import-rich-editor,

    #import-template-container
    .rich-template-editor {
        height:
            min(
                38vh,
                320px
            ) !important;

        max-height:
            320px !important;
    }

}
/* =========================================
   CROSS-PLATFORM FONT FALLBACK
   Windows · macOS
   ========================================= */

:root {
    --cloudshelf-ui-font:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --cloudshelf-symbol-font:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI Symbol",
        "Segoe UI",
        Arial,
        sans-serif;
}


body,
button,
input,
textarea,
select,
.modal,
.rich-template-editor,
.import-rich-editor,
.toast-message,
.toast-confirm {
    font-family:
        var(--cloudshelf-ui-font) !important;
}


/*
 * Keep symbols/icons readable even if
 * Inter is unavailable on the device.
 */

.tutorial-icon,
.area-icon,
.area-tab {
    font-family:
        var(--cloudshelf-symbol-font) !important;
}

/* =========================================
   SETTINGS PAGE
   ========================================= */

.settings-page {
    width:
        min(
            980px,
            100%
        );

    margin:
        0 auto;

    box-sizing:
        border-box;
}


.settings-page-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;
}


.settings-page-heading h2 {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin:
        0 0 6px;
}


.settings-page-heading h2 .lucide {
    width:
        22px;

    height:
        22px;
}


.settings-page-heading p {
    margin:
        0;

    color:
        var(--ios-muted);

    line-height:
        1.5;
}


.settings-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;
}


/* -----------------------------------------
   NAVIGATION CARDS
   ----------------------------------------- */

.settings-card {
    position:
        relative;

    display:
        grid !important;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto
        18px;

    align-items:
        center !important;

    gap:
        12px !important;

    width:
        100%;

    min-height:
        92px;

    padding:
        16px !important;

    box-sizing:
        border-box;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--theme-primary) 16%,
            var(--ios-line)
        ) !important;

    border-radius:
        16px !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass)
        ) !important;

    color:
        var(--ios-text) !important;

    text-align:
        left !important;

    box-shadow:
        0 7px 22px
        rgba(
            15,
            23,
            42,
            0.06
        );

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}


.settings-card:hover {
    opacity:
        1 !important;

    transform:
        translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 42%,
            var(--ios-line)
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 7%,
            var(--ios-glass)
        ) !important;
}


.settings-card >
.lucide,
.settings-card >
svg:first-child {
    width:
        22px;

    height:
        22px;

    justify-self:
        center;

    color:
        var(--theme-primary);
}


.settings-card > span {
    display:
        grid;

    min-width:
        0;

    gap:
        4px;
}


.settings-card strong {
    color:
        var(--ios-text);

    font-size:
        14px;
}


.settings-card small {
    color:
        var(--ios-muted);

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.4;
}


.settings-card-arrow {
    width:
        17px !important;

    height:
        17px !important;

    color:
        var(--ios-muted);
}


/* -----------------------------------------
   CONTROL CARDS
   ----------------------------------------- */

.settings-control-card {
    display:
        grid;

    gap:
        15px;

    min-height:
        120px;

    padding:
        17px;

    box-sizing:
        border-box;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--theme-primary) 16%,
            var(--ios-line)
        );

    border-radius:
        16px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass)
        );

    box-shadow:
        0 7px 22px
        rgba(
            15,
            23,
            42,
            0.06
        );
}


.settings-control-heading {
    display:
        grid;

    grid-template-columns:
        34px
        minmax(0, 1fr);

    align-items:
        start;

    gap:
        10px;
}


.settings-control-heading >
.lucide,
.settings-control-heading >
svg {
    width:
        20px;

    height:
        20px;

    margin-top:
        1px;

    color:
        var(--theme-primary);
}


.settings-control-heading > div {
    display:
        grid;

    gap:
        4px;
}


.settings-control-heading strong {
    color:
        var(--ios-text);

    font-size:
        14px;
}


.settings-control-heading small {
    color:
        var(--ios-muted);

    font-size:
        12px;

    line-height:
        1.4;
}


/* -----------------------------------------
   SETTINGS SELECTS
   temporary native selects
   custom dropdown overhaul comes next
   ----------------------------------------- */

.settings-control-card select {
    width:
        100%;

    min-height:
        42px;

    padding:
        9px 12px;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--ios-line);

    border-radius:
        11px;

    background:
        var(--ios-glass-strong);

    color:
        var(--ios-text);

    font-family:
        var(--cloudshelf-ui-font);

    font-size:
        13px;

    outline:
        none;
}


.settings-control-card select:focus {
    border-color:
        var(--theme-primary);

    box-shadow:
        0 0 0 3px
        rgba(
            var(--theme-primary-rgb),
            0.14
        );
}


/* -----------------------------------------
   THEME SEGMENT
   ----------------------------------------- */

.settings-theme-options {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        7px;
}


.settings-theme-options button {
    min-height:
        38px;

    padding:
        8px 10px;

    border:
        1px solid
        var(--ios-line);

    border-radius:
        10px;

    background:
        var(--ios-glass-strong);

    color:
        var(--ios-text);

    font-size:
        12px;

    font-weight:
        700;
}


.settings-theme-options button.active {
    border-color:
        var(--theme-primary);

    background:
        rgba(
            var(--theme-primary-rgb),
            0.14
        );

    color:
        var(--theme-primary);
}


/* -----------------------------------------
   HAMBURGER SETTINGS BADGE
   ----------------------------------------- */

.menu-settings-badge {
    margin-left:
        auto;

    min-width:
        20px;

    height:
        20px;

    padding:
        0 6px;

    box-sizing:
        border-box;

    border-radius:
        999px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--theme-primary);

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;
}


.menu-settings-badge[hidden] {
    display:
        none !important;
}


@media (max-width: 760px) {

    .settings-grid {
        grid-template-columns:
            1fr;
    }

}
/* =========================================
   FUMIDESK CUSTOM DROPDOWN
   ========================================= */

.cloudshelf-dropdown {
    position: relative;
    width: 100%;
    min-width: 0;
}


.cloudshelf-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px;

    padding: 9px 12px !important;

    box-sizing: border-box;

    border:
        1px solid
        var(--ios-line) !important;

    border-radius:
        11px !important;

    background:
        var(--ios-glass-strong) !important;

    color:
        var(--ios-text) !important;

    text-align: left !important;

    font-size: 13px;
    font-weight: 500;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}


.cloudshelf-dropdown-toggle:hover {
    opacity: 1 !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 38%,
            var(--ios-line)
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        ) !important;
}


.cloudshelf-dropdown.open
.cloudshelf-dropdown-toggle {
    border-color:
        var(--theme-primary) !important;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--theme-primary-rgb),
            0.13
        );
}


.cloudshelf-dropdown-value {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--ios-muted);
}


.cloudshelf-dropdown.has-value
.cloudshelf-dropdown-value {
    color:
        var(--ios-text);
}


.cloudshelf-dropdown-chevron {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 auto;

    transition:
        transform 0.15s ease;
}


.cloudshelf-dropdown.open
.cloudshelf-dropdown-chevron {
    transform:
        rotate(180deg);
}


/* -----------------------------------------
   MENU
   ----------------------------------------- */

.cloudshelf-dropdown-menu {
    position: absolute;

    z-index: 25000;

    top: calc(100% + 7px);
    left: 0;
    right: 0;

    width: 100%;
    max-height: 260px;

    padding: 6px;

    overflow-x: hidden;
    overflow-y: auto;

    box-sizing: border-box;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--theme-primary) 18%,
            var(--ios-line)
        );

    border-radius:
        13px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 2%,
            var(--ios-glass-strong)
        );

    box-shadow:
        0 18px 45px
        rgba(
            15,
            23,
            42,
            0.18
        );

    backdrop-filter:
        blur(22px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(160%);
}


.cloudshelf-dropdown-menu[hidden] {
    display: none !important;
}


/* -----------------------------------------
   OPTIONS
   ----------------------------------------- */

.cloudshelf-dropdown-option {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        18px;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

    min-height: 38px;

    padding: 8px 10px !important;

    margin: 0 !important;

    border: 0 !important;

    border-radius:
        9px !important;

    background:
        transparent !important;

    color:
        var(--ios-text) !important;

    text-align:
        left !important;

    font-size:
        13px;

    font-weight:
        500;
}


.cloudshelf-dropdown-option:hover,
.cloudshelf-dropdown-option.keyboard-active {
    opacity: 1 !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.10
        ) !important;
}


.cloudshelf-dropdown-option.active {
    color:
        var(--theme-primary) !important;

    font-weight:
        700;
}


.cloudshelf-dropdown-option.active:hover,
.cloudshelf-dropdown-option.active.keyboard-active {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.14
        ) !important;
}


.cloudshelf-dropdown-option-label {
    min-width: 0;

    overflow-wrap:
        anywhere;
}


.cloudshelf-dropdown-check {
    display: inline-flex;

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

    width: 18px;
    height: 18px;

    color:
        var(--theme-primary);
}


.cloudshelf-dropdown-check .lucide {
    width: 15px;
    height: 15px;
}


/* -----------------------------------------
   EMPTY + DISABLED
   ----------------------------------------- */

.cloudshelf-dropdown-empty {
    padding:
        10px 11px;

    color:
        var(--ios-muted);

    font-size:
        12px;

    text-align:
        center;
}


.cloudshelf-dropdown.disabled
.cloudshelf-dropdown-toggle,
.cloudshelf-dropdown-toggle:disabled {
    cursor:
        not-allowed;

    opacity:
        0.58 !important;
}


.cloudshelf-dropdown-option:disabled {
    cursor:
        not-allowed;

    opacity:
        0.45;
}

/* =========================================
   SETTINGS CUSTOM DROPDOWN
   ========================================= */

.settings-dropdown-host {
    width: 100%;
    min-width: 0;
}


.settings-control-card
.settings-dropdown-host {
    align-self: end;
}

/* =========================================
   SEARCH CUSTOM DROPDOWNS
   ========================================= */

.v2-search-dropdown-host {
    width:
        min(
            230px,
            100%
        );

    min-width:
        0;
}


.v2-search-filter-field {
    min-width:
        0;
}


.v2-search-filter-field
> span {
    display:
        block;

    margin-bottom:
        6px;
}

/* =========================================
   FIND & REPLACE CUSTOM FILTERS
   ========================================= */

.find-replace-bulk-filters {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;

    margin-top:
        18px;
}


.find-replace-filter-heading {
    grid-column:
        1 / -1;

    font-size:
        14px;

    font-weight:
        800;

    color:
        var(--ios-text);

    margin-bottom:
        -3px;
}


.find-replace-scope {
    display:
        grid;

    gap:
        6px;

    min-width:
        0;
}


.find-replace-scope > span {
    font-size:
        12px;

    font-weight:
        700;

    color:
        var(--ios-muted);
}


.find-replace-dropdown-host {
    width:
        100%;

    min-width:
        0;
}


@media (max-width: 640px) {

    .find-replace-bulk-filters {
        grid-template-columns:
            1fr;
    }


    .find-replace-filter-heading {
        grid-column:
            1;
    }

}
/* =========================================
   SETTINGS SUBPAGE NAVIGATION
   ========================================= */

.settings-subpage-header {
    display:
        grid;

    gap:
        18px;

    margin-bottom:
        24px;
}


.settings-back-button {
    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    width:
        max-content !important;

    padding:
        8px 11px !important;

    border:
        1px solid
        var(--ios-line) !important;

    border-radius:
        10px !important;

    background:
        var(--ios-glass-strong) !important;

    color:
        var(--ios-text) !important;

    font-size:
        12px;

    font-weight:
        700;
}


.settings-back-button:hover {
    opacity:
        1 !important;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.08
        ) !important;

    color:
        var(--theme-primary) !important;
}


.settings-back-button .lucide {
    width:
        15px;

    height:
        15px;
}


.settings-subpage-title {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;
}


.settings-subpage-title >
.lucide {
    width:
        24px;

    height:
        24px;

    flex:
        0 0 auto;

    color:
        var(--theme-primary);
}


.settings-subpage-title h2 {
    margin:
        0 0 5px;
}


.settings-subpage-title p {
    margin:
        0;

    color:
        var(--ios-muted);
}


.settings-subpage-content {
    display:
        grid;

    gap:
        16px;

    min-width:
        0;
}

/* =========================================
   HELP SETTINGS SUBPAGE SPACING
   ========================================= */

.help-center-page.settings-subpage {
    width:
        min(
            980px,
            calc(100% - 32px)
        );

    max-width:
        980px;

    box-sizing:
        border-box;

    padding:
        30px 34px 36px;
}


.help-center-page.settings-subpage
> .settings-back-button {
    margin-bottom:
        24px;
}


.help-center-page.settings-subpage
.help-center-heading {
    margin-top:
        0;

    margin-bottom:
        24px;
}


@media (max-width: 700px) {

    .help-center-page.settings-subpage {
        width:
            calc(100% - 20px);

        padding:
            22px 18px 28px;
    }


    .help-center-page.settings-subpage
    > .settings-back-button {
        margin-bottom:
            20px;
    }

}

/* =========================================
   UNIFIED SETTINGS SUBPAGE LAYOUT
   ========================================= */

/*
 * Give every Settings subpage enough room
 * for its Back button + page heading.
 */

.settings-subpage {
    box-sizing: border-box;

    padding:
        32px 36px 38px !important;
}


/*
 * Pages using v2SettingsPageHeading()
 * already wrap the Back button + heading
 * inside .settings-subpage-header.
 */

.settings-subpage-header {
    display:
        grid;

    gap:
        24px;

    margin:
        0 0 26px;
}


/*
 * Pages such as Help and Users Cloud
 * place the Back button directly inside
 * the card instead.
 */

.settings-subpage
> .settings-back-button {
    margin:
        0 0 24px !important;
}


/*
 * Don't double-space the Back button
 * inside the shared header wrapper.
 */

.settings-subpage-header
> .settings-back-button {
    margin:
        0 !important;
}


/* -----------------------------------------
   USERS CLOUD
   ----------------------------------------- */

.users-cloud-page.settings-subpage
.users-cloud-heading {
    margin-top:
        0;

    margin-bottom:
        24px;
}


/* -----------------------------------------
   HELP CENTER
   ----------------------------------------- */

.help-center-page.settings-subpage
.help-center-heading {
    margin-top:
        0;

    margin-bottom:
        26px;
}


/*
 * Our previous Help-only rule is no longer
 * responsible for Back-button spacing.
 */

.help-center-page.settings-subpage
> .settings-back-button {
    margin-bottom:
        24px !important;
}


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

@media (max-width: 700px) {

    .settings-subpage {
        padding:
            24px 20px 30px !important;
    }


    .settings-subpage-header {
        gap:
            20px;

        margin-bottom:
            22px;
    }


    .settings-subpage
    > .settings-back-button {
        margin-bottom:
            20px !important;
    }

}

/* =========================================
   SETTINGS MAIN PAGE — SINGLE COLUMN
   ========================================= */

.settings-page
.settings-grid {
    grid-template-columns:
        minmax(
            0,
            1fr
        );

    gap:
        12px;
}


.settings-page
.settings-card {
    width:
        100%;
}

/* =========================================
   THEMED SETTINGS DROPDOWN SURFACES
   ========================================= */

/*
 * Applies to:
 * - Display Settings → Colors
 * - CRM → Copy Format
 *
 * Keeps the selector surface tied to both
 * the active theme and active color palette.
 */

.settings-page
.cloudshelf-dropdown-toggle,
.settings-subpage
.cloudshelf-dropdown-toggle {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 7%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;
}


/*
 * Slightly stronger palette tint on hover.
 */

.settings-page
.cloudshelf-dropdown-toggle:hover,
.settings-subpage
.cloudshelf-dropdown-toggle:hover {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 11%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 38%,
            var(--ios-line)
        ) !important;
}


/*
 * Stronger tint while the dropdown is open.
 */

.settings-page
.cloudshelf-dropdown.open
.cloudshelf-dropdown-toggle,
.settings-subpage
.cloudshelf-dropdown.open
.cloudshelf-dropdown-toggle {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 13%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        var(--theme-primary) !important;
}


/*
 * Dropdown menu itself should match too.
 */

.settings-page
.cloudshelf-dropdown-menu,
.settings-subpage
.cloudshelf-dropdown-menu {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 22%,
            var(--ios-line)
        ) !important;
}
/* =========================================
   USERS CLOUD — SEPARATE REPORT MODALS
   ========================================= */

.user-report-data-actions {
    display:
        grid;

    gap:
        14px;

    margin-top:
        20px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(--ios-line);
}


.user-report-data-actions h4 {
    margin:
        0 0 5px;
}


.user-report-data-actions p {
    margin:
        0;

    color:
        var(--ios-muted);

    font-size:
        13px;
}


.user-report-data-buttons {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;
}


.user-report-data-buttons
button {
    display:
        grid !important;

    grid-template-columns:
        20px
        minmax(0, 1fr)
        auto;

    align-items:
        center !important;

    gap:
        9px !important;

    width:
        100% !important;

    padding:
        13px 14px !important;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass-strong)
        ) !important;

    color:
        var(--ios-text) !important;

    text-align:
        left !important;
}


.user-report-data-buttons
button:hover {
    opacity:
        1 !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 10%,
            var(--ios-glass-strong)
        ) !important;
}


.user-report-data-buttons
button > .lucide {
    width:
        18px;

    height:
        18px;

    color:
        var(--theme-primary);
}


.user-report-data-buttons
button > small {
    min-width:
        25px;

    padding:
        3px 7px;

    border-radius:
        999px;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.10
        );

    color:
        var(--theme-primary);

    text-align:
        center;

    font-size:
        11px;

    font-weight:
        700;
}


/* -----------------------------------------
   REPORT MODAL
   ----------------------------------------- */

.admin-user-report-modal {
    width:
        min(
            820px,
            calc(
                100vw -
                40px
            )
        ) !important;

    max-width:
        820px !important;

    max-height:
        min(
            760px,
            calc(
                100vh -
                50px
            )
        );

    padding:
        0 !important;

    overflow:
        hidden !important;
}


.admin-user-report-modal-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        22px 24px 18px;

    border-bottom:
        1px solid
        var(--ios-line);
}


.admin-user-report-modal-title {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    min-width:
        0;
}


.admin-user-report-modal-title
> .lucide {
    width:
        22px;

    height:
        22px;

    margin-top:
        2px;

    color:
        var(--theme-primary);
}


.admin-user-report-modal-title
h2 {
    margin:
        0 0 5px !important;
}


.admin-user-report-modal-title
p {
    margin:
        0;

    color:
        var(--ios-muted);

    font-size:
        13px;
}


.admin-user-report-close {
    display:
        grid !important;

    place-items:
        center;

    flex:
        0 0 auto;

    width:
        36px !important;

    height:
        36px !important;

    padding:
        0 !important;

    border:
        1px solid
        var(--ios-line) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        ) !important;

    color:
        var(--ios-text) !important;
}


.admin-user-report-close
.lucide {
    width:
        17px;

    height:
        17px;
}


.admin-user-report-modal-body {
    max-height:
        calc(
            100vh -
            190px
        );

    padding:
        20px 24px 24px;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;
}


/* -----------------------------------------
   CURRENT TEMPLATES
   ----------------------------------------- */

.admin-current-template-list {
    display:
        grid;

    gap:
        9px;
}


.admin-current-template-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.14
        );

    border-radius:
        12px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
}


.admin-current-template-row
> div {
    display:
        grid;

    gap:
        4px;

    min-width:
        0;
}


.admin-current-template-row
strong {
    overflow-wrap:
        anywhere;
}


.admin-current-template-row
small,
.admin-current-template-row
time {
    color:
        var(--ios-muted);

    font-size:
        11px;
}


.admin-current-template-row
time {
    flex:
        0 0 auto;
}


/* -----------------------------------------
   EMPTY REPORT
   ----------------------------------------- */

.admin-report-empty {
    display:
        grid;

    justify-items:
        center;

    gap:
        10px;

    padding:
        40px 20px;

    color:
        var(--ios-muted);

    text-align:
        center;
}


.admin-report-empty
.lucide {
    width:
        30px;

    height:
        30px;

    color:
        var(--theme-primary);
}


.admin-report-empty
p {
    margin:
        0;
}


@media (max-width: 650px) {

    .user-report-data-buttons {
        grid-template-columns:
            1fr;
    }


    .admin-current-template-row {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .admin-user-report-modal-heading {
        padding:
            18px;
    }


    .admin-user-report-modal-body {
        padding:
            18px;
    }

}

/* =========================================
   USERS CLOUD — VERSION HISTORY MODAL
   ========================================= */

.admin-user-report-overlay {
    z-index:
        30000 !important;
}


/*
 * The restore confirmation must appear
 * above the Version History modal.
 */

.admin-restore-confirm-overlay {
    z-index:
        30001 !important;
}


.admin-version-history {
    min-width:
        0;
}


/* -----------------------------------------
   BULK RESTORE BAR
   ----------------------------------------- */

.admin-version-bulk-bar {
    position:
    static;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin:
        0 0 12px;

    padding:
        12px 13px;

    border:
        1px solid
        var(--ios-line);

    border-radius:
        12px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        );

    backdrop-filter:
        blur(18px);
}


.admin-version-bulk-bar
label {
    display:
        inline-flex !important;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 !important;

    color:
        var(--ios-text) !important;
}


.admin-user-report-modal
input[type="checkbox"] {
    appearance:
        auto;

    flex:
        0 0 auto;

    width:
        17px !important;

    min-width:
        17px;

    height:
        17px;

    margin:
        0 !important;

    padding:
        0 !important;

    accent-color:
        var(--theme-primary);

    cursor:
        pointer;
}


.admin-version-selected-count {
    margin-left:
        auto;

    color:
        var(--ios-muted);

    font-size:
        12px;

    font-weight:
        700;
}


.admin-version-bulk-bar
.admin-restore-selected {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        38px;

    background:
        var(--theme-primary);

    color:
        #ffffff;
}


.admin-version-bulk-bar
.admin-restore-selected:disabled {
    cursor:
        not-allowed;

    opacity:
        0.45;
}


/* -----------------------------------------
   VERSION ROWS
   ----------------------------------------- */

.admin-version-list {
    display:
        grid;

    gap:
        9px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.admin-version-list
> li {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        14px;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.14
        );

    border-radius:
        12px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
}


.admin-version-choice {
    display:
        flex !important;

    align-items:
        flex-start;

    gap:
        10px;

    min-width:
        0;

    margin:
        0 !important;

    color:
        var(--ios-text) !important;

    font-weight:
        inherit !important;

    cursor:
        pointer;
}


.admin-version-choice
input[type="checkbox"] {
    margin-top:
        2px !important;
}


.admin-version-choice
> span {
    display:
        grid;

    gap:
        4px;

    min-width:
        0;
}


.admin-version-choice
strong {
    overflow-wrap:
        anywhere;
}


.admin-version-choice
small {
    color:
        var(--ios-muted);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.45;
}


.admin-version-list
> li
> button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        38px;

    background:
        var(--theme-primary);

    color:
        #ffffff;
}


.admin-version-list
> li
> button
.lucide,
.admin-version-bulk-bar
button
.lucide {
    width:
        16px;

    height:
        16px;
}


@media (max-width: 650px) {

    .admin-version-list
    > li {
        grid-template-columns:
            1fr;
    }


    .admin-version-list
    > li
    > button {
        justify-self:
            start;
    }


    .admin-version-selected-count {
        margin-left:
            0;
    }

}
/* =========================================
   USERS CLOUD REPORT MODAL — SCROLL FIX
   ========================================= */

.admin-user-report-modal {
    display:
        flex !important;

    flex-direction:
        column;
}


.admin-user-report-modal-heading {
    flex:
        0 0 auto;
}


.admin-user-report-modal-body {
    box-sizing:
        border-box;

    flex:
        1 1 auto;

    min-height:
        0;

    max-height:
        none;

    padding-bottom:
        28px;

    overflow-x:
        hidden;

    overflow-y:
        scroll;

    overscroll-behavior:
        contain;

    scrollbar-gutter:
        stable;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(
            var(--theme-primary-rgb),
            0.72
        )
        color-mix(
            in srgb,
            var(--theme-primary) 8%,
            var(--ios-glass-strong)
        );
}


/* Chrome, Edge and Safari */

.admin-user-report-modal-body::-webkit-scrollbar {
    width:
        12px;

    height:
        12px;
}


.admin-user-report-modal-body::-webkit-scrollbar-track {
    margin:
        8px 0;

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 8%,
            var(--ios-glass-strong)
        );
}


.admin-user-report-modal-body::-webkit-scrollbar-thumb {
    min-height:
        48px;

    border:
        3px solid
        transparent;

    border-radius:
        999px;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.72
        );

    background-clip:
        padding-box;
}


.admin-user-report-modal-body::-webkit-scrollbar-thumb:hover {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.94
        );

    background-clip:
        padding-box;
}


.admin-user-report-modal-body::-webkit-scrollbar-button {
    display:
        none;

    width:
        0;

    height:
        0;
}


/* =========================================
   VERSION HISTORY — DATE GROUPS
   ========================================= */

.admin-version-date-groups {
    display:
        grid;

    gap:
        12px;
}


.admin-version-date-group {
    overflow:
        hidden;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.18
        );

    border-radius:
        14px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
}


.admin-version-date-group
> summary {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        18px;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px 15px;

    color:
        var(--ios-text);

    cursor:
        pointer;

    list-style:
        none;
}


.admin-version-date-group
> summary::-webkit-details-marker {
    display:
        none;
}


.admin-version-date-group
> summary:hover {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 8%,
            transparent
        );
}


.admin-version-date-single-heading {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px 15px;

    color:
        var(--ios-text);
}


.admin-version-date-title {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;
}


.admin-version-date-title
strong {
    overflow-wrap:
        anywhere;
}


.admin-version-date-title
.lucide {
    flex:
        0 0 auto;

    width:
        17px;

    height:
        17px;

    color:
        var(--theme-primary);
}


.admin-version-date-count {
    color:
        var(--ios-muted);

    font-size:
        12px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.admin-version-date-chevron {
    width:
        17px;

    height:
        17px;

    color:
        var(--theme-primary);

    transition:
        transform
        160ms ease;
}


.admin-version-date-group[open]
> summary
.admin-version-date-chevron {
    transform:
        rotate(180deg);
}


.admin-version-date-group
> .admin-version-list {
    padding:
        12px;

    border-top:
        1px solid
        var(--ios-line);
}


.admin-version-date-group.is-single
> .admin-version-list {
    padding:
        0 12px 12px;
}


@media (max-width: 650px) {

    .admin-version-date-group
    > summary {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            17px;

        gap:
            8px;

        padding:
            12px;
    }


    .admin-version-date-single-heading {
        grid-template-columns:
            1fr;

        gap:
            6px;

        padding:
            12px;
    }


    .admin-version-date-count {
        font-size:
            11px;
    }

}

/* =========================================
   USERS CLOUD — DATE ROW ALIGNMENT V3
   ========================================= */

.admin-version-date-group
> summary {
    display:
        grid !important;

    grid-template-columns:
        18px
        minmax(0, 1fr)
        max-content
        18px !important;

    align-items:
        center !important;

    justify-items:
        start;

    gap:
        10px !important;

    box-sizing:
        border-box;

    width:
        100%;

    text-align:
        left;
}


.admin-version-date-select {
    align-self:
        center;

    justify-self:
        center;
}


.admin-version-date-title {
    align-self:
        center;

    justify-self:
        start;

    min-width:
        0;

    text-align:
        left;
}


.admin-version-date-count {
    align-self:
        center;

    justify-self:
        end;

    text-align:
        right;
}


.admin-version-date-chevron {
    align-self:
        center;

    justify-self:
        center;
}


/* =========================================
   USERS CLOUD — THEMED CHECKBOXES V3
   ========================================= */

.admin-user-report-modal
input[type="checkbox"] {
    appearance:
        none !important;

    display:
        grid !important;

    place-content:
        center;

    box-sizing:
        border-box !important;

    flex:
        0 0 auto;

    width:
        18px !important;

    min-width:
        18px !important;

    height:
        18px !important;

    margin:
        0 !important;

    padding:
        0 !important;
    
    overflow:
    visible !important;

    line-height:
        0;

    border:
        1.5px solid
        rgba(
            var(--theme-primary-rgb),
            0.72
        ) !important;

    border-radius:
        5px !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 22%,
            var(--ios-glass-strong)
        ) !important;

    cursor:
        pointer;

    transition:
        background
            140ms ease,
        border-color
            140ms ease,
        box-shadow
            140ms ease;
}


.admin-user-report-modal
input[type="checkbox"]:hover {
    border-color:
        var(--theme-primary) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 32%,
            var(--ios-glass-strong)
        ) !important;
}


.admin-user-report-modal
input[type="checkbox"]::before {
    content:
        "";

    width:
    7px;

    height:
    4px;

    border-left:
        2px solid
        #ffffff;

    border-bottom:
        2px solid
        #ffffff;

    transform:
        translateY(-0.5px)
        rotate(-45deg)
        scale(0);

    transform-origin:
        center;

    transition:
        transform
        120ms ease;
}


.admin-user-report-modal
input[type="checkbox"]:checked,
.admin-user-report-modal
input[type="checkbox"]:indeterminate {
    border-color:
        var(--theme-primary) !important;

    background:
        var(--theme-primary) !important;
}


.admin-user-report-modal
input[type="checkbox"]:checked::before {
    transform:
        translateY(-0.5px)
        rotate(-45deg)
        scale(1);
}


.admin-user-report-modal
input[type="checkbox"]:indeterminate::before {
    width:
        8px;

    height:
        2px;

    border:
        0;

    border-radius:
        999px;

    background:
        #ffffff;

    transform:
        scale(1);
}


.admin-user-report-modal
input[type="checkbox"]:focus-visible {
    outline:
        3px solid
        rgba(
            var(--theme-primary-rgb),
            0.25
        );

    outline-offset:
        2px;
}


/* =========================================
   USERS CLOUD — SCROLLBAR BOTTOM INSET V3
   ========================================= */

.admin-user-report-modal-body {
    margin:
        0
        7px
        12px
        0 !important;

    padding-bottom:
        36px !important;
}


.admin-user-report-modal-body::-webkit-scrollbar-track {
    margin:
        8px
        0
        16px !important;
}


@media (max-width: 650px) {

    .admin-version-date-group
    > summary {
        grid-template-columns:
            18px
            minmax(0, 1fr)
            max-content
            17px !important;

        gap:
            8px !important;
    }


    .admin-version-date-count {
        font-size:
            11px;
    }

}
/* =========================================
   TEMPLATE EXPORT FORMAT PICKER
   ========================================= */

#edit-template-container
.template-export-modal {
    width:
        min(
            760px,
            calc(100vw - 40px)
        ) !important;

    max-width:
        760px !important;

    padding:
        26px !important;

    color:
        var(--ios-text) !important;
}

.template-export-heading {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;
}

.template-export-heading h2 {
    margin:
        0 0 5px !important;

    color:
        var(--ios-text) !important;
}

.template-export-heading p {
    margin:
        0;

    color:
        var(--ios-muted);

    font-size:
        14px;

    line-height:
        1.45;
}

.template-export-heading p strong {
    color:
        var(--ios-text);
}

.template-export-close {
    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    width:
        36px;

    height:
        36px;

    padding:
        0;

    color:
        var(--ios-text);

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-card)
        );

    border:
        1px solid var(--ios-line);

    border-radius:
        11px;

    cursor:
        pointer;
}

.template-export-close:hover {
    color:
        var(--theme-primary);

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.4
        );

    background:
        rgba(
            var(--theme-primary-rgb),
            0.09
        );
}

.template-export-close .lucide {
    width:
        18px;

    height:
        18px;

    stroke-width:
        1.7;
}

.template-export-format-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        12px;
}

.template-export-format {
    display:
        grid !important;

    grid-template-columns:
        38px minmax(0, 1fr);

    align-items:
        center;

    justify-content:
        initial !important;

    gap:
        12px;

    width:
        100%;

    min-height:
        76px;

    padding:
        12px 14px;

    color:
        var(--ios-text);

    text-align:
        left;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-card)
        );

    border:
        1px solid var(--ios-line);

    border-radius:
        14px;

    cursor:
        pointer;

    transition:
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}

.template-export-format:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.45
        );

    background:
        rgba(
            var(--theme-primary-rgb),
            0.08
        );
}

.template-export-format:focus-visible {
    outline:
        2px solid
        rgba(
            var(--theme-primary-rgb),
            0.5
        );

    outline-offset:
        2px;
}

.template-export-format-icon {
    display:
        grid;

    place-items:
        center;

    width:
        36px;

    height:
        36px;

    color:
        var(--theme-primary);

    background:
        rgba(
            var(--theme-primary-rgb),
            0.1
        );

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.18
        );

    border-radius:
        11px;
}

.template-export-format-icon .lucide {
    width:
        18px;

    height:
        18px;

    stroke-width:
        1.7;
}

.template-export-format > span:last-child {
    display:
        flex;

    min-width:
        0;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        4px;
}

.template-export-format strong {
    color:
        var(--ios-text);

    font-size:
        14px;

    line-height:
        1.2;
}

.template-export-format small {
    color:
        var(--ios-muted);

    font-size:
        12px;

    line-height:
        1.35;
}

.template-export-footer {
    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        20px;
}

.template-export-cancel {
    min-width:
        100px;

    padding:
        9px 16px;

    color:
        var(--ios-text);

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-card)
        );

    border:
        1px solid var(--ios-line);

    border-radius:
        10px;

    cursor:
        pointer;
}

@media (max-width: 620px) {
    #edit-template-container
    .template-export-modal {
        width:
            calc(100vw - 24px) !important;

        padding:
            20px !important;
    }

    .template-export-format-grid {
        grid-template-columns:
            1fr;
    }
}
/* =========================================
   USERS CLOUD — TEMPLATE EXPORT
   ========================================= */

.user-report-data-buttons
button:disabled {
    opacity:
        0.48 !important;

    cursor:
        not-allowed !important;

    transform:
        none !important;
}


.admin-template-export-panel {
    display:
        grid;

    gap:
        18px;
}


.admin-template-export-selection {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.15
        );

    border-radius:
        12px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass-strong)
        );
}


.admin-template-export-selection
label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    cursor:
        pointer;
}


.admin-template-export-count {
    color:
        var(--ios-muted);

    font-size:
        12px;
}


.admin-template-export-count
strong {
    color:
        var(--theme-primary);
}


.admin-template-export-list {
    display:
        grid;

    gap:
        9px;
}


.admin-user-report-modal
.admin-template-export-row {
    display:
        grid !important;

    grid-template-columns:
        18px
        minmax(0, 1fr)
        auto;

    align-items:
        center !important;

    column-gap:
        15px;

    row-gap:
        4px;

    width:
        100%;

    margin:
        0;

    box-sizing:
        border-box;

    font-weight:
        inherit;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.14
        );

    border-radius:
        12px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );

    cursor:
        pointer;
}

.admin-template-export-row
> input[type="checkbox"] {
    align-self:
        center;

    justify-self:
        start;
}


.admin-template-export-row-copy {
    padding-left:
        2px;
}


.admin-template-export-row
time {
    align-self:
        center;

    justify-self:
        end;

    text-align:
        right;
}

.admin-template-export-row:hover {
    border-color:
        rgba(
            var(--theme-primary-rgb),
            0.36
        );

    background:
        rgba(
            var(--theme-primary-rgb),
            0.07
        );
}


.admin-template-export-row-copy {
    display:
        grid;

    gap:
        4px;

    min-width:
        0;
}


.admin-template-export-row-copy
strong {
    color:
        var(--ios-text);

    overflow-wrap:
        anywhere;
}


.admin-template-export-row-copy
small,
.admin-template-export-row
time {
    color:
        var(--ios-muted);

    font-size:
        11px;
}


.admin-template-export-row
time {
    white-space:
        nowrap;
}


.admin-template-export-formats {
    padding-top:
        18px;

    border-top:
        1px solid
        var(--ios-line);
}


.admin-template-export-formats
h3 {
    margin:
        0 0 4px;

    color:
        var(--ios-text);

    font-size:
        16px;
}


.admin-template-export-formats
> p {
    margin:
        0 0 14px;

    color:
        var(--ios-muted);

    font-size:
        12px;
}


.admin-template-export-formats
.template-export-format:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;

    transform:
        none;
}


@media (max-width: 900px) {
    .user-report-data-buttons {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


@media (max-width: 650px) {
    .user-report-data-buttons {
        grid-template-columns:
            1fr;
    }

    .admin-template-export-selection {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .admin-user-report-modal
    .admin-template-export-row {
        grid-template-columns:
            18px
            minmax(0, 1fr);
    }

    .admin-template-export-row
    time {
        grid-column:
            2;
    }

    .admin-template-export-formats
    .template-export-format-grid {
        grid-template-columns:
            1fr;
    }
}
/* =========================================
   REGULAR USER — TEMPLATE DATA PAGE
   ========================================= */

.template-data-current {
    padding:
        20px;

    border:
        1px solid
        var(--ios-line);

    border-radius:
        16px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-glass-strong)
        );
}


.template-data-current-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;
}


.template-data-current-heading
h3 {
    margin:
        0 0 5px;

    color:
        var(--ios-text);
}


.template-data-current-heading
p {
    margin:
        0;

    color:
        var(--ios-muted);

    font-size:
        13px;
}


.template-data-current-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        12px;

    flex:
        0 0 auto;
}


.template-data-count {
    padding:
        5px 10px;

    border-radius:
        999px;

    color:
        var(--theme-primary);

    background:
        rgba(
            var(--theme-primary-rgb),
            0.10
        );

    font-size:
        12px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.template-data-export-button {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    min-height:
        38px;

    padding:
        9px 14px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            var(--theme-primary),
            var(--theme-primary-dark)
        ) !important;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.55
        ) !important;

    border-radius:
        10px;

    cursor:
        pointer;
}


.template-data-export-button:hover {
    opacity:
        0.92;

    transform:
        translateY(-1px);
}


.template-data-export-button:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;

    transform:
        none;
}


.template-data-export-button
.lucide {
    width:
        15px;

    height:
        15px;
}


.template-data-template-list {
    display:
        grid;

    gap:
        9px;

    max-height:
        min(
            56vh,
            560px
        );

    padding:
        1px 7px 10px 1px;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(
            var(--theme-primary-rgb),
            0.68
        )
        transparent;
}


.template-data-template-list::-webkit-scrollbar {
    width:
        10px;
}


.template-data-template-list::-webkit-scrollbar-track {
    margin:
        6px 0;

    background:
        transparent;
}


.template-data-template-list::-webkit-scrollbar-thumb {
    border:
        2px solid transparent;

    border-radius:
        999px;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.68
        );

    background-clip:
        padding-box;
}


.template-data-template-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(
            var(--theme-primary-rgb),
            0.14
        );

    border-radius:
        12px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 3%,
            var(--ios-card)
        );
}


.template-data-template-copy {
    display:
        grid;

    gap:
        4px;

    min-width:
        0;
}


.template-data-template-copy
strong {
    color:
        var(--ios-text);

    overflow-wrap:
        anywhere;
}


.template-data-template-copy
small,
.template-data-template-row
time {
    color:
        var(--ios-muted);

    font-size:
        11px;
}


.template-data-template-row
time {
    flex:
        0 0 auto;

    white-space:
        nowrap;
}


.template-data-loading,
.template-data-empty {
    display:
        grid;

    justify-items:
        center;

    gap:
        10px;

    padding:
        42px 20px;

    color:
        var(--ios-muted);

    text-align:
        center;
}


.template-data-loading
p,
.template-data-empty
p {
    margin:
        0;
}


.template-data-loading
.lucide,
.template-data-empty
.lucide {
    width:
        28px;

    height:
        28px;

    color:
        var(--theme-primary);
}


@media (max-width: 700px) {
    .template-data-current-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .template-data-current-actions {
        justify-content:
            space-between;

        width:
            100%;
    }

    .template-data-template-row {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}

/* =========================================
   SEARCH + FILTERS — PALETTE-AWARE SURFACES
   ========================================= */

/* Main Search templates field */

#search-box {
    color:
        var(--ios-text) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 6%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.25
        ),
        0 3px 12px
        rgba(
            var(--theme-primary-rgb),
            0.06
        ) !important;
}


#search-box::placeholder {
    color:
        color-mix(
            in srgb,
            var(--theme-primary) 26%,
            var(--ios-muted)
        ) !important;

    opacity:
        0.9;
}


#search-box:hover {
    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 38%,
            var(--ios-line)
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 8%,
            var(--ios-glass-strong)
        ) !important;
}


#search-box:focus {
    border-color:
        var(--theme-primary) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 9%,
            var(--ios-glass-strong)
        ) !important;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--theme-primary-rgb),
            0.13
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.25
        ) !important;
}


/* All Areas and All Categories surfaces */

#v2-search-filters
.cloudshelf-dropdown-toggle {
    color:
        var(--ios-text) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 6%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 24%,
            var(--ios-line)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.24
        ),
        0 3px 10px
        rgba(
            var(--theme-primary-rgb),
            0.05
        ) !important;
}


#v2-search-filters
.cloudshelf-dropdown-value {
    color:
        var(--ios-text) !important;
}


#v2-search-filters
.cloudshelf-dropdown-toggle:hover {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 10%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 40%,
            var(--ios-line)
        ) !important;
}


#v2-search-filters
.cloudshelf-dropdown.open
.cloudshelf-dropdown-toggle {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 11%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        var(--theme-primary) !important;
}


/* Open dropdown panels */

#v2-search-filters
.cloudshelf-dropdown-menu {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 6%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 27%,
            var(--ios-line)
        ) !important;
}


/* Dark theme uses the darker palette shade */

html[data-theme="dark"]
#search-box,

html[data-theme="dark"]
#v2-search-filters
.cloudshelf-dropdown-toggle,

html[data-theme="dark"]
#v2-search-filters
.cloudshelf-dropdown-menu {
    color:
        var(--ios-text) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary-dark) 22%,
            var(--ios-glass-strong)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 32%,
            var(--ios-line)
        ) !important;
}


html[data-theme="dark"]
#search-box::placeholder {
    color:
        color-mix(
            in srgb,
            var(--theme-primary) 34%,
            var(--ios-muted)
        ) !important;
}

.sort-template-modal {
    overflow: visible !important;
}

.sort-template-dropdown-host {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-bottom: 18px;
}

.sort-template-modal .cloudshelf-dropdown-menu {
    z-index: 26000 !important;
}

/* =========================================================
   FUMIDESK PUBLIC LANDING PAGE
========================================================= */

html {
    scroll-behavior: smooth;
}

#landing-page {
    display: none;
}

#landing-page,
#landing-page * {
    box-sizing: border-box;
}

body.logged-out:not(.password-recovery-mode) {
    padding: 0 !important;
}

body.logged-out:not(.password-recovery-mode) #landing-page {
    width: 100%;
    min-height: 100vh;
    flex: 1 0 auto;
}

body.logged-out:not(.password-recovery-mode) #landing-page {
    display: block;
}

body:not(.logged-out) #landing-page,
body.password-recovery-mode #landing-page {
    display: none !important;
}


/* =========================================================
   KEEP THE NORMAL APP HEADER OUT OF THE LANDING PAGE
========================================================= */

body.logged-out .header {
    display: block !important;
    width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.logged-out .header > .brand-block,
body.logged-out .header > .search-position,
body.logged-out .header > #logged-in-controls {
    display: none !important;
}

body.logged-out .site-footer {
    display: none !important;
}

body:not(.logged-out) .brand-logo {
    display: block;
    width: 270px !important;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

html[data-theme="dark"]
body:not(.logged-out)
.brand-block {
    padding: 0;

    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"]
body:not(.logged-out)
.brand-logo {
    filter:
        drop-shadow(1px 0 0 rgba(247, 247, 252, 0.55))
        drop-shadow(-1px 0 0 rgba(247, 247, 252, 0.55))
        drop-shadow(0 1px 0 rgba(247, 247, 252, 0.55))
        drop-shadow(0 -1px 0 rgba(247, 247, 252, 0.55));
}


/* Password-recovery screen still gets the app logo */

body.logged-out.password-recovery-mode .header {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 0 0 !important;
}

body.logged-out.password-recovery-mode
.header > .brand-block {
    display: flex !important;
    width: max-content !important;
    margin: 0 auto !important;
}

body.logged-out.password-recovery-mode
.brand-logo {
    width: min(
        350px,
        calc(100vw - 40px)
    ) !important;
}


/* =========================================================
   LANDING PAGE BACKGROUND
========================================================= */

#landing-page {
    min-height: 100vh;

    color: var(
        --fumidesk-text,
        #292A3D
    );

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(
                169,
                167,
                245,
                0.22
            ),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(
                104,
                104,
                217,
                0.13
            ),
            transparent 31%
        ),
        var(
            --fumidesk-background,
            #F7F7FC
        );
}

.landing-main {
    overflow: hidden;
}


/* =========================================================
   TOP NAVIGATION
========================================================= */

.landing-site-header {
    position: sticky;
    top: 0;
    z-index: 30000;

    width: 100%;
    min-height: 74px;
    padding: 12px
        clamp(
            20px,
            5vw,
            72px
        );

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 28px;

    border-bottom: 1px solid
        rgba(
            104,
            104,
            217,
            0.13
        );

    background:
        color-mix(
            in srgb,
            var(
                --fumidesk-background,
                #F7F7FC
            )
            84%,
            transparent
        );

    box-shadow:
        0 7px 28px
        rgba(
            41,
            42,
            61,
            0.06
        );

    -webkit-backdrop-filter:
        blur(22px)
        saturate(155%);
    backdrop-filter:
        blur(22px)
        saturate(155%);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: max-content;

    color: var(
        --fumidesk-text,
        #292A3D
    );

    text-decoration: none;
}

.landing-brand img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.landing-brand span {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.landing-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(
        18px,
        3vw,
        34px
    );
}

.landing-navigation a {
    position: relative;

    padding: 8px 2px;

    color: color-mix(
        in srgb,
        var(
            --fumidesk-text,
            #292A3D
        )
        76%,
        transparent
    );

    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.landing-navigation a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;

    height: 2px;

    border-radius: 999px;

    background:
        var(
            --fumidesk-primary,
            #6868D9
        );

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform 160ms ease;
}

.landing-navigation a:hover::after,
.landing-navigation a:focus-visible::after {
    transform: scaleX(1);
}

.landing-auth-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.landing-auth-actions button {
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 16px !important;

    border-radius: 11px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer;
}

.landing-sign-in {
    color:
        var(
            --fumidesk-text,
            #292A3D
        ) !important;

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.30
        ) !important;

    background:
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            13%,
            rgba(
                255,
                255,
                255,
                0.74
            )
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.70
        ) !important;
}

.landing-sign-up {
    color: #ffffff !important;

    border: 1px solid
        color-mix(
            in srgb,
            var(--fumidesk-primary, #6868D9) 82%,
            var(--fumidesk-text, #292A3D)
        ) !important;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--fumidesk-primary, #6868D9) 92%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;

    box-shadow:
        0 8px 20px
        rgba(
            104,
            104,
            217,
            0.26
        ) !important;
}

.landing-sign-in:hover {
    background:
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            19%,
            rgba(
                255,
                255,
                255,
                0.72
            )
        ) !important;
}


.landing-sign-up:hover {
    background:
        linear-gradient(
            180deg,

            color-mix(
                in srgb,
                var(
                    --fumidesk-primary,
                    #6868D9
                )
                96%,
                white
            ),

            var(
                --theme-primary-dark
            )
        ) !important;
}

/* =========================================================
   HERO
========================================================= */

.landing-hero {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    min-height:
        min(
            760px,
            calc(100vh - 74px)
        );

    margin: 0 auto;
    padding:
        clamp(
            70px,
            9vw,
            118px
        )
        0
        clamp(
            76px,
            9vw,
            120px
        );

    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(480px, 1.08fr);
    align-items: center;
    gap: clamp(
        48px,
        7vw,
        92px
    );
}

.landing-hero-copy {
    min-width: 0;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 21px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.landing-eyebrow > span {
    width: 28px;
    height: 2px;

    border-radius: 999px;

    background:
        var(
            --fumidesk-primary,
            #6868D9
        );
}

.landing-hero h1 {
    max-width: 660px;
    margin: 0;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size:
        clamp(
            48px,
            6vw,
            78px
        );
    font-weight: 800;
    line-height: 0.99;
    letter-spacing: -0.058em;
}

.landing-hero h1 em {
    display: block;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    font-style: normal;
}

.landing-description {
    max-width: 610px;
    margin: 25px 0 0;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            68%,
            white
        );

    font-size:
        clamp(
            17px,
            1.55vw,
            20px
        );
    line-height: 1.7;
}

.landing-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 32px;
}

.landing-primary-action,
.landing-anywhere-section button,
.landing-final-cta button {
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 19px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    color: #ffffff !important;

    border: 1px solid
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            74%,
            var(
                --fumidesk-text,
                #292A3D
            )
        ) !important;

    border-radius: 12px !important;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(
                    --fumidesk-primary,
                    #6868D9
                )
                80%,
                white
            ),
            var(
                --fumidesk-primary,
                #6868D9
            )
        ) !important;

    box-shadow:
        0 13px 28px
        rgba(
            104,
            104,
            217,
            0.26
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.36
        ) !important;

    font-size: 14px !important;
    font-weight: 750 !important;

    cursor: pointer;
}

.landing-primary-action {
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--fumidesk-primary, #6868D9) 92%,
                white
            ),
            var(--theme-primary-dark)
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--fumidesk-primary, #6868D9) 82%,
            var(--fumidesk-text, #292A3D)
        ) !important;

    box-shadow:
        0 10px 24px
        rgba(
            104,
            104,
            217,
            0.28
        ) !important;
}

.landing-primary-action .lucide,
.landing-anywhere-section button .lucide,
.landing-final-cta button .lucide {
    width: 17px;
    height: 17px;
}

.landing-secondary-action {
    min-height: 48px;
    padding: 0 18px;

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

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    border: 1px solid
        rgba(
            104,
            104,
            217,
            0.20
        );

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.46
        );

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.landing-hero-notes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 21px;

    margin-top: 28px;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            60%,
            white
        );

    font-size: 11px;
    font-weight: 650;
}

.landing-hero-notes span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.landing-hero-notes .lucide {
    width: 14px;
    height: 14px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );
}


/* =========================================================
   PRODUCT PREVIEW
========================================================= */

.landing-product-preview {
    min-width: 0;
    overflow: hidden;

    pointer-events: none;

    border: 1px solid
        rgba(
            104,
            104,
            217,
            0.18
        );

    border-radius: 24px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    box-shadow:
        0 32px 78px
        rgba(
            41,
            42,
            61,
            0.16
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.85
        );

    -webkit-backdrop-filter:
        blur(24px)
        saturate(150%);
    backdrop-filter:
        blur(24px)
        saturate(150%);
}

.landing-preview-toolbar {
    min-height: 46px;
    padding: 0 15px;

    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;
    align-items: center;
    gap: 12px;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            68%,
            white
        );

    border-bottom: 1px solid
        rgba(
            104,
            104,
            217,
            0.12
        );

    background:
        rgba(
            255,
            255,
            255,
            0.58
        );

    font-size: 11px;
}

.landing-preview-toolbar > div {
    display: flex;
    gap: 5px;
}

.landing-preview-toolbar > div span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(
            --fumidesk-highlight,
            #A9A7F5
        );
}

.landing-preview-toolbar > div span:nth-child(2) {
    opacity: 0.70;
}

.landing-preview-toolbar > div span:nth-child(3) {
    opacity: 0.42;
}

.landing-preview-toolbar > .lucide {
    justify-self: end;

    width: 15px;
    height: 15px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );
}

/* =========================================================
   LANDING — DASHBOARD PREVIEW
========================================================= */

.landing-dashboard-preview {
    position: relative;
    min-height: 430px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 8%,
            rgba(
                104,
                104,
                217,
                0.07
            ),
            transparent 35%
        ),
        rgba(
            247,
            247,
            252,
            0.78
        );
}


/* =========================================================
   MINI HAMBURGER MENU
========================================================= */

.landing-dashboard-preview-menu {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 5;

    width: 175px;

    box-sizing: border-box;

    border-right:
        1px solid
        rgba(
            104,
            104,
            217,
            0.12
        );

    background:
        rgba(
            255,
            255,
            255,
            0.38
        );
}


.landing-preview-menu-trigger {
    width: 30px;
    height: 30px;

    margin:
        12px 0 8px 12px;

    display: grid;
    place-items: center;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.26
        );

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            0.66
        );

    box-shadow: none;
}


.landing-preview-menu-trigger .lucide {
    width: 17px;
    height: 17px;
}


.landing-preview-menu-panel {
    width: 100%;

    margin: 0;
    padding: 10px 12px;

    box-sizing: border-box;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


.landing-preview-profile {
    display: flex;
    align-items: center;
    gap: 9px;

    padding-bottom: 10px;

    border-bottom:
        1px solid
        rgba(
            104,
            104,
            217,
            0.10
        );
}


.landing-preview-avatar {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex: 0 0 32px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.18
        );

    border-radius: 9px;

    background:
        rgba(
            104,
            104,
            217,
            0.06
        );
}


.landing-preview-avatar .lucide {
    width: 16px;
    height: 16px;
}


.landing-preview-profile > div:last-child {
    min-width: 0;

    display: grid;
    gap: 3px;
}


.landing-preview-profile strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size: 10px;
}


.landing-preview-profile span {
    width: fit-content;

    padding:
        2px 5px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    border-radius: 999px;

    background:
        rgba(
            104,
            104,
            217,
            0.08
        );

    font-size: 7px;
}


.landing-preview-menu-pages {
    display: grid;
    gap: 5px;

    margin-top: 10px;
}


.landing-preview-menu-pages > div {
    min-height: 27px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding:
        0 8px;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            72%,
            white
        );

    border-radius: 7px;

    font-size: 8px;
    font-weight: 650;
}


.landing-preview-menu-pages > div.active {
    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    background:
        rgba(
            104,
            104,
            217,
            0.09
        );
}


.landing-preview-menu-pages .lucide {
    width: 12px;
    height: 12px;
}


/* =========================================================
   MINI DASHBOARD
========================================================= */

.landing-dashboard-preview-main {
    width:
        calc(
            100% - 175px
        );

    min-height: 430px;

    margin-left:
        175px;

    padding:
        22px 18px 24px;

    box-sizing:
        border-box;
}


.landing-dashboard-preview-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-bottom:
        17px;
}


.landing-dashboard-preview-brand img {
    width: 31px;
    height: 31px;

    object-fit:
        contain;
}


.landing-dashboard-preview-brand > div {
    display: grid;
}


.landing-dashboard-preview-brand strong {
    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size: 15px;
    line-height: 1;
}


.landing-dashboard-preview-brand span {
    margin-top: 2px;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            55%,
            white
        );

    font-size: 6px;
}


.landing-dashboard-preview-search {
    width:
        min(
            300px,
            80%
        );

    min-height:
        34px;

    margin:
        0 auto;

    display: flex;
    align-items: center;

    padding:
        0 11px;

    box-sizing:
        border-box;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            50%,
            white
        );

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.16
        );

    border-radius:
        9px;

    background:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        8px;
}


.landing-dashboard-preview-filters {
    width:
        min(
            260px,
            78%
        );

    margin:
        9px auto 0;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;
}


.landing-dashboard-preview-filters > div {
    display: grid;
    gap: 3px;
}


.landing-dashboard-preview-filters small {
    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            55%,
            white
        );

    font-size: 6px;
    font-weight: 700;
}


.landing-dashboard-preview-filters span {
    min-height:
        28px;

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

    padding:
        0 8px;

    box-sizing:
        border-box;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.14
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            255,
            255,
            0.56
        );

    font-size:
        7px;
}


.landing-dashboard-preview-filters .lucide {
    width: 10px;
    height: 10px;
}


.landing-dashboard-preview-actions {
    margin:
        11px auto 0;

    display: flex;
    justify-content: center;
    gap: 6px;
}


.landing-dashboard-preview-actions > span {
    min-height:
        27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding:
        0 8px;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.14
        );

    border-radius:
        7px;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size:
        7px;
    font-weight:
        650;
}


.landing-dashboard-preview-actions > span.primary {
    color:
        #ffffff;

    border-color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    background:
        var(
            --fumidesk-primary,
            #6868D9
        );
}


.landing-dashboard-preview-actions .lucide {
    width: 10px;
    height: 10px;
}


.landing-dashboard-preview-sections {
    display: grid;
    gap: 7px;

    margin-top:
        24px;
}


.landing-dashboard-preview-sections > div {
    min-height:
        34px;

    display: grid;

    grid-template-columns:
        15px
        minmax(
            0,
            1fr
        )
        auto;

    align-items: center;

    gap:
        7px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.11
        );

    border-radius:
        9px;

    background:
        rgba(
            255,
            255,
            255,
            0.36
        );
}


.landing-dashboard-preview-sections .lucide {
    width: 12px;
    height: 12px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );
}


.landing-dashboard-preview-sections strong {
    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size:
        8px;
}


.landing-dashboard-preview-sections span {
    min-width:
        18px;

    padding:
        2px 5px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    border-radius:
        999px;

    background:
        rgba(
            104,
            104,
            217,
            0.08
        );

    font-size:
        7px;

    text-align:
        center;
}


/* =========================================================
   DASHBOARD PREVIEW — MOBILE
========================================================= */

@media (max-width: 760px) {

    .landing-dashboard-preview {
        min-height:
            390px;
    }


    .landing-dashboard-preview-menu {
        left:
            10px;
    }


    .landing-preview-menu-panel {
        width:
            150px;
    }


    .landing-dashboard-preview-main {
        width:
            calc(
                100% - 60px
            );

        margin-left:
            60px;

        padding:
            20px 12px;
    }


    .landing-dashboard-preview-search {
        width:
            86%;
    }


    .landing-dashboard-preview-filters {
        width:
            84%;
    }


    .landing-dashboard-preview-actions {
        flex-wrap:
            wrap;
    }

}

/* =========================================================
   GENERAL LANDING SECTIONS
========================================================= */

.landing-section,
.landing-process-section,
.landing-anywhere-section,
.landing-final-cta {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}

.landing-section {
    padding:
        clamp(
            90px,
            10vw,
            138px
        )
        0;
}

.landing-section-heading {
    max-width: 750px;
    margin: 0 auto 50px;

    text-align: center;
}

.landing-section-heading > p {
    margin: 0 0 13px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.landing-section-heading h2 {
    margin: 0;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );
    font-weight: 780;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.landing-section-heading > span {
    display: block;
    max-width: 650px;

    margin: 18px auto 0;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            65%,
            white
        );

    font-size: 16px;
    line-height: 1.65;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.landing-feature-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
    gap: 15px;
}

.landing-feature-grid article {
    min-width: 0;
    padding: 27px;

    border: 1px solid
        rgba(
            104,
            104,
            217,
            0.14
        );

    border-radius: 19px;

    background:
        rgba(
            255,
            255,
            255,
            0.58
        );

    box-shadow:
        0 14px 38px
        rgba(
            41,
            42,
            61,
            0.07
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.80
        );

    -webkit-backdrop-filter:
        blur(18px)
        saturate(140%);
    backdrop-filter:
        blur(18px)
        saturate(140%);
}

.landing-feature-grid article > .lucide {
    width: 24px;
    height: 24px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );
}

.landing-feature-grid h3 {
    margin: 21px 0 10px;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size: 17px;
}

.landing-feature-grid p {
    margin: 0;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            64%,
            white
        );

    font-size: 13px;
    line-height: 1.65;
}

/* =========================================================
   WHO FUMIDESK IS FOR
========================================================= */

.landing-audience-section {
    margin:
        clamp(
            90px,
            10vw,
            135px
        )
        auto;

    padding:
        0
        clamp(
            10px,
            2vw,
            20px
        );
}


.landing-audience-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        18px 22px;

    max-width:
        1100px;

    margin:
        0 auto;
}


.landing-audience-grid article {
    min-width: 0;

    display: grid;

    grid-template-columns:
        58px
        minmax(
            0,
            1fr
        );

    align-items: center;

    gap:
        16px;

    padding:
        20px 18px;

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.10
        );

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.34
        );

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}


.landing-audience-grid article:hover {
    transform:
        translateY(
            -2px
        );

    border-color:
        rgba(
            104,
            104,
            217,
            0.22
        );

    background:
        rgba(
            255,
            255,
            255,
            0.52
        );
}


.landing-audience-icon {
    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            104,
            104,
            217,
            0.18
        );

    border-radius:
        15px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    background:
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            7%,
            rgba(
                255,
                255,
                255,
                0.70
            )
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.80
        );
}


.landing-audience-icon .lucide {
    width:
        24px;

    height:
        24px;

    stroke-width:
        1.6;
}


.landing-audience-grid h3 {
    margin:
        2px 0 8px;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size:
        15px;

    font-weight:
        750;

    line-height:
        1.35;
}


.landing-audience-grid p {
    margin:
        0;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            64%,
            white
        );

    font-size:
        13px;

    line-height:
        1.65;
}


.landing-audience-closing {
    max-width:
        760px;

    margin:
        48px auto 0;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            66%,
            white
        );

    font-size:
        clamp(
            18px,
            2vw,
            23px
        );

    line-height:
        1.5;

    text-align:
        center;
}


.landing-audience-closing strong {
    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-weight:
        760;
}

@media (max-width: 900px) {

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

}


@media (max-width: 620px) {

    .landing-audience-grid {
        grid-template-columns:
            1fr;
    }


    .landing-audience-grid article {
        grid-template-columns:
            50px
            minmax(
                0,
                1fr
            );

        padding:
            17px 15px;
    }


    .landing-audience-icon {
        width:
            46px;

        height:
            46px;

        border-radius:
            13px;
    }


    .landing-audience-icon .lucide {
        width:
            21px;

        height:
            21px;
    }


    .landing-audience-closing {
        margin-top:
            36px;

        font-size:
            18px;
    }

}

/* =========================================================
   HOW IT WORKS
========================================================= */

.landing-process-section {
    padding:
        clamp(
            72px,
            8vw,
            105px
        )
        clamp(
            24px,
            5vw,
            70px
        );

    border: 1px solid
        rgba(
            104,
            104,
            217,
            0.15
        );

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(
                169,
                167,
                245,
                0.18
            ),
            rgba(
                255,
                255,
                255,
                0.58
            )
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.74
        );
}

.landing-process-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
    gap: 16px;
}

.landing-process-grid article {
    position: relative;

    min-width: 0;
    padding: 25px;

    border: 1px solid
        rgba(
            104,
            104,
            217,
            0.13
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.66
        );
}

.landing-process-grid article > span {
    position: absolute;
    top: 19px;
    right: 20px;

    color:
        rgba(
            104,
            104,
            217,
            0.36
        );

    font-size: 25px;
    font-weight: 800;
}

.landing-process-grid article > .lucide {
    width: 25px;
    height: 25px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );
}

.landing-process-grid h3 {
    margin: 25px 0 9px;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size: 17px;
}

.landing-process-grid p {
    margin: 0;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            64%,
            white
        );

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   ANYWHERE ACCESS
========================================================= */

.landing-anywhere-section {
    margin-top:
        clamp(
            90px,
            10vw,
            140px
        );
    padding:
        clamp(
            40px,
            6vw,
            76px
        );

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 55px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(
                    --fumidesk-primary,
                    #6868D9
                )
                86%,
                var(
                    --fumidesk-text,
                    #292A3D
                )
            ),
            var(
                --fumidesk-primary,
                #6868D9
            )
            58%,
            var(
                --fumidesk-highlight,
                #A9A7F5
            )
        );

    box-shadow:
        0 28px 70px
        rgba(
            104,
            104,
            217,
            0.25
        );
}

.landing-anywhere-section > div {
    max-width: 720px;
}

.landing-anywhere-section p {
    margin: 0 0 14px;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.landing-anywhere-section h2 {
    margin: 0;

    font-size:
        clamp(
            31px,
            4vw,
            51px
        );
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.landing-anywhere-section > div > span {
    display: block;
    max-width: 620px;

    margin-top: 19px;

    color:
        rgba(
            255,
            255,
            255,
            0.79
        );

    font-size: 15px;
    line-height: 1.65;
}

.landing-anywhere-section button {
    margin-top: 27px !important;

    color:
        var(
            --fumidesk-text,
            #292A3D
        ) !important;

    border-color:
        rgba(
            255,
            255,
            255,
            0.62
        ) !important;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        ) !important;
}

.landing-anywhere-section aside {
    width: 225px;
    min-height: 225px;
    padding: 26px;

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

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.26
        );

    border-radius: 25px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.18
        );

    text-align: center;

    -webkit-backdrop-filter:
        blur(20px);
    backdrop-filter:
        blur(20px);
}

.landing-anywhere-section aside img {
    width: 93px;
    height: 93px;

    object-fit: contain;
}

.landing-anywhere-section aside strong,
.landing-anywhere-section aside span {
    display: block;
}

.landing-anywhere-section aside strong {
    margin-top: 15px;

    font-size: 19px;
}

.landing-anywhere-section aside span {
    margin-top: 5px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 11px;
    line-height: 1.45;
}


/* =========================================================
   FINAL CTA
========================================================= */

.landing-final-cta {
    padding:
        clamp(
            100px,
            12vw,
            165px
        )
        20px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.landing-final-cta img {
    width: 69px;
    height: 69px;

    object-fit: contain;
}

.landing-final-cta p {
    margin: 22px 0 10px;

    color:
        var(
            --fumidesk-primary,
            #6868D9
        );

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.landing-final-cta h2 {
    max-width: 720px;
    margin: 0;

    color:
        var(
            --fumidesk-text,
            #292A3D
        );

    font-size:
        clamp(
            34px,
            4.4vw,
            56px
        );
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.landing-final-cta button {
    margin-top: 29px !important;
}


/* =========================================================
   LANDING FOOTER
========================================================= */

.landing-footer {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    min-height: 104px;
    margin: 0 auto;
    padding: 22px 0;

    display: grid;
    grid-template-columns:
        1fr
        auto
        1fr;
    align-items: center;
    gap: 20px;

    border-top: 1px solid
        rgba(
            104,
            104,
            217,
            0.14
        );
}

.landing-footer .landing-brand img {
    width: 36px;
    height: 36px;
}

.landing-footer .landing-brand span {
    font-size: 19px;
}

.landing-footer p {
    margin: 0;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            57%,
            white
        );

    font-size: 12px;
}

.landing-footer > span {
    justify-self: end;

    color:
        color-mix(
            in srgb,
            var(
                --fumidesk-text,
                #292A3D
            )
            52%,
            white
        );

    font-size: 11px;
}


/* =========================================================
   AUTHENTICATION GLASS MODAL
========================================================= */

body.landing-auth-open {
    overflow: hidden;
}

body.logged-out #auth-container {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60000 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh;

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

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

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background:
        rgba(
            41,
            42,
            61,
            0.42
        );

    -webkit-backdrop-filter:
        blur(13px)
        saturate(125%);
    backdrop-filter:
        blur(13px)
        saturate(125%);

    transition:
        opacity 160ms ease,
        visibility 160ms ease;
}

body.logged-out.landing-auth-open
#auth-container {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

body.logged-out #auth-container .auth-forms {
    position: relative;

    width: min(
        620px,
        calc(100vw - 32px)
    ) !important;

    max-width: 620px;
    max-height: calc(100dvh - 40px);

    overflow-x: visible;
    overflow-y: auto;

    margin: 0 !important;
}

.landing-auth-close {
    position: absolute !important;
    top: 13px !important;
    right: 13px !important;
    z-index: 20 !important;

    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    color:
        var(
            --fumidesk-text,
            #292A3D
        ) !important;

    border: 1px solid
        rgba(
            104,
            104,
            217,
            0.18
        ) !important;

    border-radius: 11px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        ) !important;

    box-shadow:
        0 8px 22px
        rgba(
            41,
            42,
            61,
            0.10
        ) !important;
}

.landing-auth-close .lucide {
    width: 17px;
    height: 17px;
}

body.logged-out #login-form .login-heading,
body.logged-out #signup-form .login-heading {
    padding-right: 42px;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] #landing-page {
    color:
        var(
            --ios-text,
            #F7F7FC
        );

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(
                199,
                198,
                255,
                0.14
            ),
            transparent 29%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(
                104,
                104,
                217,
                0.18
            ),
            transparent 31%
        ),
        var(
            --theme-dark-bg
        );
}

html[data-theme="dark"]
.landing-site-header {
    border-bottom-color:
        rgba(
            199,
            198,
            255,
            0.14
        );

    background:
        color-mix(
            in srgb,
            var(
                --theme-dark-bg
            )
            84%,
            transparent
        );

    box-shadow:
        0 8px 30px
        rgba(
            0,
            0,
            0,
            0.20
        );
}

html[data-theme="dark"]
.landing-brand,
html[data-theme="dark"]
.landing-navigation a,
html[data-theme="dark"]
.landing-sign-in,
html[data-theme="dark"]
.landing-secondary-action,
html[data-theme="dark"]
.landing-hero h1,
html[data-theme="dark"]
.landing-section-heading h2,
html[data-theme="dark"]
.landing-feature-grid h3,
html[data-theme="dark"]
.landing-process-grid h3,
html[data-theme="dark"]
.landing-final-cta h2 {
    color:
        var(
            --ios-text,
            #F7F7FC
        ) !important;
}

html[data-theme="dark"]
.landing-hero h1 em,
html[data-theme="dark"]
.landing-eyebrow,
html[data-theme="dark"]
.landing-hero-notes .lucide,
html[data-theme="dark"]
.landing-section-heading > p,
html[data-theme="dark"]
.landing-feature-grid article > .lucide,
html[data-theme="dark"]
.landing-process-grid article > .lucide,
html[data-theme="dark"]
.landing-final-cta p {
    color:
        var(
            --fumidesk-dark-accent,
            #C7C6FF
        );
}

html[data-theme="dark"]
.landing-eyebrow > span {
    background:
        var(
            --fumidesk-dark-accent,
            #C7C6FF
        );
}

html[data-theme="dark"]
.landing-description,
html[data-theme="dark"]
.landing-hero-notes,
html[data-theme="dark"]
.landing-section-heading > span,
html[data-theme="dark"]
.landing-feature-grid p,
html[data-theme="dark"]
.landing-process-grid p,
html[data-theme="dark"]
.landing-footer p,
html[data-theme="dark"]
.landing-footer > span {
    color:
        var(
            --ios-muted,
            #C7C6D8
        );
}

html[data-theme="dark"]
.landing-product-preview,
html[data-theme="dark"]
.landing-feature-grid article,
html[data-theme="dark"]
.landing-process-grid article {
    border-color:
        rgba(
            199,
            198,
            255,
            0.16
        );

    background:
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            9%,
            var(
                --theme-dark-panel
            )
        );

    box-shadow:
        0 28px 70px
        rgba(
            0,
            0,
            0,
            0.30
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.05
        );
}

html[data-theme="dark"]
.landing-preview-toolbar,
html[data-theme="dark"]
.landing-preview-sidebar,
html[data-theme="dark"]
.landing-preview-template,
html[data-theme="dark"]
.landing-preview-mini-cards article {
    color:
        var(
            --ios-text,
            #F7F7FC
        );

    border-color:
        rgba(
            199,
            198,
            255,
            0.13
        );

    background:
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            8%,
            var(
                --theme-dark-panel-strong
            )
        );
}

html[data-theme="dark"]
.landing-preview-heading h3,
html[data-theme="dark"]
.landing-preview-template h4,
html[data-theme="dark"]
.landing-preview-mini-cards strong {
    color:
        var(
            --ios-text,
            #F7F7FC
        );
}

html[data-theme="dark"]
.landing-preview-template p,
html[data-theme="dark"]
.landing-preview-mini-cards span,
html[data-theme="dark"]
.landing-preview-nav,
html[data-theme="dark"]
.landing-preview-search {
    color:
        var(
            --ios-muted,
            #C7C6D8
        );
}

html[data-theme="dark"]
.landing-preview-search {
    background:
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            8%,
            var(
                --theme-dark-panel-strong
            )
        );
}

html[data-theme="dark"]
.landing-process-section {
    border-color:
        rgba(
            199,
            198,
            255,
            0.15
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(
                    --fumidesk-primary,
                    #6868D9
                )
                15%,
                var(
                    --theme-dark-panel
                )
            ),
            var(
                --theme-dark-panel
            )
        );
}

html[data-theme="dark"]
.landing-sign-in,
html[data-theme="dark"]
.landing-secondary-action,
html[data-theme="dark"]
.landing-auth-close {
    color:
        var(
            --ios-text,
            #F7F7FC
        ) !important;

    border-color:
        rgba(
            199,
            198,
            255,
            0.18
        ) !important;

    background:
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            10%,
            var(
                --theme-dark-panel-strong
            )
        ) !important;
}

html[data-theme="dark"]
.landing-footer {
    border-top-color:
        rgba(
            199,
            198,
            255,
            0.13
        );
}

html[data-theme="dark"]
body.logged-out #auth-container {
    background:
        rgba(
            7,
            7,
            18,
            0.66
        );
}


/* =========================================================
   RESPONSIVE LANDING PAGE
========================================================= */

@media (max-width: 1000px) {
    .landing-navigation {
        display: none;
    }

    .landing-site-header {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .landing-hero {
        min-height: 0;

        grid-template-columns:
            minmax(0, 1fr);

        gap: 58px;
    }

    .landing-hero-copy {
        max-width: 760px;

        text-align: center;
        justify-self: center;
    }

    .landing-eyebrow,
    .landing-hero-actions,
    .landing-hero-notes {
        justify-content: center;
    }

    .landing-description {
        margin-left: auto;
        margin-right: auto;
    }

    .landing-product-preview {
        width: min(
            760px,
            100%
        );

        justify-self: center;
    }
}

@media (max-width: 760px) {
    .landing-site-header {
        min-height: 66px;
        padding: 10px 14px;
        gap: 12px;
    }

    .landing-brand {
        gap: 7px;
    }

    .landing-brand img {
        width: 35px;
        height: 35px;
    }

    .landing-brand span {
        font-size: 19px;
    }

    .landing-auth-actions {
        gap: 6px;
    }

    .landing-auth-actions button {
        min-height: 36px !important;
        padding: 0 11px !important;

        font-size: 11px !important;
    }

    .landing-hero,
    .landing-section,
    .landing-process-section,
    .landing-anywhere-section,
    .landing-final-cta,
    .landing-footer {
        width: min(
            100% - 24px,
            1180px
        );
    }

    .landing-hero {
        padding:
            68px
            0
            78px;
    }

    .landing-hero h1 {
        font-size:
            clamp(
                43px,
                14vw,
                60px
            );
    }

    .landing-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .landing-primary-action,
    .landing-secondary-action {
        width: 100%;
    }

    .landing-preview-body {
        grid-template-columns: 1fr;
    }

    .landing-preview-sidebar {
        display: none;
    }

    .landing-preview-workspace {
        padding: 17px;
    }

    .landing-preview-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-preview-heading button {
        align-self: stretch;
        justify-content: center !important;
    }

    .landing-preview-template-actions,
    .landing-preview-mini-cards {
        grid-template-columns: 1fr;
    }

    .landing-feature-grid,
    .landing-process-grid {
        grid-template-columns: 1fr;
    }

    .landing-section {
        padding:
            82px
            0;
    }

    .landing-section-heading {
        margin-bottom: 34px;
    }

    .landing-process-section {
        padding:
            62px
            18px;
    }

    .landing-anywhere-section {
        margin-top: 82px;
        padding: 40px 22px;

        grid-template-columns: 1fr;
        gap: 35px;

        text-align: center;
    }

    .landing-anywhere-section
    > div > span {
        margin-left: auto;
        margin-right: auto;
    }

    .landing-anywhere-section aside {
        width: min(
            230px,
            100%
        );

        min-height: 205px;
        justify-self: center;
    }

    .landing-footer {
        padding: 28px 0;

        grid-template-columns: 1fr;
        justify-items: center;

        text-align: center;
    }

    .landing-footer > span {
        justify-self: center;
    }
}

/* =========================================================
   LANDING PAGE — PRIMARY CTA OVERRIDE
========================================================= */

body.logged-out
#landing-page
.landing-sign-up,

body.logged-out
#landing-page
.landing-primary-action {
    color: #ffffff !important;

    background:
    linear-gradient(
        180deg,

        var(
            --fumidesk-primary,
            #6868D9
        ),

        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            82%,
            var(
                --fumidesk-text,
                #292A3D
            )
        )
    ) !important;

    border-color:
        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            72%,
            var(
                --fumidesk-text,
                #292A3D
            )
        ) !important;

    box-shadow:
        0 9px 22px
        rgba(
            104,
            104,
            217,
            0.28
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.25
        ) !important;
}


body.logged-out
#landing-page
.landing-sign-up:hover,

body.logged-out
#landing-page
.landing-primary-action:hover {
    background:
    linear-gradient(
        180deg,

        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            92%,
            var(
                --fumidesk-text,
                #292A3D
            )
        ),

        color-mix(
            in srgb,
            var(
                --fumidesk-primary,
                #6868D9
            )
            78%,
            var(
                --fumidesk-text,
                #292A3D
            )
        )
    ) !important;
}

/* Auth modal — simple palette-aware text links */
body.logged-out #auth-container .auth-switch-button,
body.logged-out #auth-container .forgot-password-button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    color: var(--theme-primary) !important;
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;
        box-shadow: none !important;
    outline: none !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-tap-highlight-color: transparent !important;

    text-shadow: none !important;
    opacity: 1 !important;
    user-select: none;

    font: inherit;
    font-weight: 700 !important;
    line-height: inherit !important;
    text-decoration: none;
    cursor: pointer;
}

body.logged-out #auth-container .auth-switch-button:hover,
body.logged-out #auth-container .forgot-password-button:hover {
    color: var(--theme-primary-dark) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: underline;
    transform: none !important;
}

body.logged-out #auth-container .auth-switch-button:focus,
body.logged-out #auth-container .auth-switch-button:focus-visible,
body.logged-out #auth-container .auth-switch-button:active,
body.logged-out #auth-container .forgot-password-button:focus,
body.logged-out #auth-container .forgot-password-button:focus-visible,
body.logged-out #auth-container .forgot-password-button:active {
    color: var(--theme-primary-dark) !important;
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    transform: none !important;
}

html[data-theme="dark"]
body.logged-out #auth-container .auth-switch-button,
html[data-theme="dark"]
body.logged-out #auth-container .forgot-password-button {
    color: var(--theme-secondary) !important;
}


/* =========================================================
   LOW-USAGE FEEDBACK INVITATION
========================================================= */

.fumidesk-feedback-invitation {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 12000;

    width: min(380px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 20px;

    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;

    color: var(--ios-text);
    border: 1px solid var(--ios-border);
    border-radius: 20px;
    background: var(--ios-glass-strong);
    box-shadow: var(--ios-shadow);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.fumidesk-feedback-invitation-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;

    color: var(--theme-primary);
    border-radius: 13px;
    background: rgba(var(--theme-primary-rgb), 0.12);
}

.fumidesk-feedback-invitation-icon .lucide {
    width: 21px;
    height: 21px;
}

.fumidesk-feedback-invitation strong {
    display: block;
    padding-right: 26px;
    font-size: 15px;
}

.fumidesk-feedback-invitation p {
    margin: 6px 0 0;
    color: var(--ios-muted);
    font-size: 13px;
    line-height: 1.5;
}

.fumidesk-feedback-invitation-close {
    position: absolute !important;
    top: 11px;
    right: 11px;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    color: var(--ios-muted) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fumidesk-feedback-invitation-close .lucide {
    width: 16px;
    height: 16px;
}

.fumidesk-feedback-invitation-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.fumidesk-feedback-invitation-actions button {
    width: auto !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 13px !important;
}

.fumidesk-feedback-invitation-primary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--theme-primary) 82%, white),
        var(--theme-primary-dark)
    ) !important;
}

@media (max-width: 520px) {
    .fumidesk-feedback-invitation {
        right: 16px;
        bottom: 16px;
    }

    .fumidesk-feedback-invitation-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .fumidesk-feedback-invitation-actions button {
        width: 100% !important;
    }
}

/* The authentication close button only belongs on the public landing page */
body:not(.logged-out) .landing-auth-close {
    display: none !important;
}

/* Account Settings button surfaces stay palette-aware after legacy button rules. */
.account-settings-page .primary-button,
.account-security-overlay .primary-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 72%,
        white
    ) !important;
    color: #ffffff !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--theme-primary) 82%, white),
        var(--theme-primary-dark)
    ) !important;
    box-shadow: 0 8px 20px color-mix(
        in srgb,
        var(--theme-primary) 22%,
        transparent
    ) !important;
}

.account-settings-page .secondary-button,
.account-security-overlay .secondary-button,
.account-settings-page .account-photo-upload-button {
    border: 1px solid color-mix(
        in srgb,
        var(--theme-primary) 26%,
        var(--ios-line)
    ) !important;
    color: var(--ios-text) !important;
    background: color-mix(
        in srgb,
        var(--theme-primary) 6%,
        var(--ios-glass-strong)
    ) !important;
    box-shadow: 0 5px 14px color-mix(
        in srgb,
        var(--theme-primary) 10%,
        transparent
    ) !important;
}

.account-settings-page .secondary-button:hover,
.account-security-overlay .secondary-button:hover,
.account-settings-page .account-photo-upload-button:hover {
    border-color: var(--theme-primary) !important;
    background: color-mix(
        in srgb,
        var(--theme-primary) 12%,
        var(--ios-glass-strong)
    ) !important;
}