#mse-header .fi {
    width: 1.8em !important;
    height: 1.8em !important;
    border-radius: 50% !important;
    background-size: cover !important;
    display: inline-block !important;
    vertical-align: middle;
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 1px;
}

#mse-header {
    position: relative;
    z-index: 4;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#mse-header-title {
    padding: 1rem 1rem 0.25rem;
}

#mse-header-description {
    padding: 0.25rem 1rem 1rem;
}

#mse-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mse-header-bg, rgba(108,117,125,0.85));
    z-index: 1;
}

#mse-header-img-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.mse-lug {
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 20;
    width: 20px;
    height: 36px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    transition: left 0.25s ease, color 0.15s;
}

.mse-lug:hover {
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
}

#mse-layout.mse-tools-open .mse-lug {
    left: 320px;
    border-left: none;
}

/* ── Header resize lug ────────────────────────────────── */
#mse-header-resize-lug {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 64px;
    height: 28px;
    cursor: ns-resize;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.32);
    border-radius: 0 0 12px 12px;
}
#mse-header-resize-lug::after {
    content: '';
    display: block;
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ── Preview size ─────────────────────────────────────── */
#mse-preview {
    overflow: hidden !important;
}

#mse-preview.mse-preview-full {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    border-radius: 0 !important;
}

/* ── Background layer ─────────────────────────────────── */
#mse-bg-layer {
    position: absolute;
    inset: -30px;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
}

/* ── Scroll content wrapper ───────────────────────────── */
#mse-scroll-content {
    position: relative;
    height: 100%;
    overflow-y: auto;
}

/* ── Overlay layers ───────────────────────────────────── */
.mse-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.mse-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.mse-vignette {
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.75) 100%);
}

/* ── Animated backgrounds ─────────────────────────────── */
@keyframes mse-warm   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes mse-aurora { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes mse-sunset  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes mse-ocean   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes mse-candy   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

#mse-bg-layer.mse-anim-warm, #mse-page-bg-layer.mse-anim-warm, .mse-modal-bg.mse-anim-warm   { background-image: linear-gradient(270deg,#f8f4ef,#c9a87c,#e8d5b7,#b8936a,#f8f4ef); background-size:400% 400%; animation: mse-warm   var(--mse-speed,10s) ease infinite; }
#mse-bg-layer.mse-anim-aurora, #mse-page-bg-layer.mse-anim-aurora, .mse-modal-bg.mse-anim-aurora { background-image: linear-gradient(270deg,#0d1b2a,#1b4332,#312e81,#0d1b2a); background-size:400% 400%; animation: mse-aurora var(--mse-speed,10s) ease infinite; }
#mse-bg-layer.mse-anim-sunset, #mse-page-bg-layer.mse-anim-sunset, .mse-modal-bg.mse-anim-sunset { background-image: linear-gradient(270deg,#ff6b6b,#feca57,#ff9ff3,#48dbfb,#ff6b6b); background-size:500% 500%; animation: mse-sunset var(--mse-speed,10s) ease infinite; }
#mse-bg-layer.mse-anim-ocean, #mse-page-bg-layer.mse-anim-ocean, .mse-modal-bg.mse-anim-ocean  { background-image: linear-gradient(270deg,#005f8e,#00b4d8,#90e0ef,#0077b6,#005f8e); background-size:400% 400%; animation: mse-ocean  var(--mse-speed,10s) ease infinite; }
#mse-bg-layer.mse-anim-candy, #mse-page-bg-layer.mse-anim-candy, .mse-modal-bg.mse-anim-candy  { background-image: linear-gradient(270deg,#f093fb,#f5576c,#4facfe,#43e97b,#f093fb); background-size:500% 500%; animation: mse-candy  var(--mse-speed,10s) ease infinite; }

/* ── Coloris swatches ─────────────────────────────────── */
#mse-tools-card .clr-field {
    display: block !important;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

#mse-tools-card [data-coloris] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: transparent !important;
    cursor: pointer !important;
}

#mse-tools-card .clr-field-btn {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
}

/* Coloris fills the gradient marker with the picked color and rings it in 1px
   white, so a light color on the light part of the gradient disappears. The
   extra dark ring outside the white one keeps it readable on any background. */
#clr-picker .clr-marker {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

@media (min-width: 768px) {
    #clr-picker.clr-pill { width: 500px !important; padding-left: 260px !important; min-height: 240px !important; }
    #clr-picker.clr-pill .clr-gradient { width: 260px !important; }
}

/* ── Pattern / animated swatches ─────────────────────── */
.bd-swatch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 14px; }
.bd-swatch { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0; background:none; border:2px solid var(--bs-border-color); border-radius:var(--bs-border-radius); cursor:pointer; overflow:hidden; transition:border-color 0.15s; }
.bd-swatch:hover { border-color: var(--bs-secondary); }
.bd-swatch.active { border-color: var(--bs-dark); }
.bd-swatch span { font-size:0.7rem; color:var(--bs-secondary-color); padding-bottom:4px; }
.bd-sw { width:100%; height:42px; }

.bd-sw-dots       { background-color:#f8f4ef; background-image:radial-gradient(circle,#c9a87c 1.5px,transparent 1.5px); background-size:10px 10px; }
.bd-sw-stripes    { background-color:#fff8f0; background-image:repeating-linear-gradient(45deg,#e8d5b7,#e8d5b7 2px,transparent 2px,transparent 10px); }
.bd-sw-grid       { background-color:#f0ede8; background-image:linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.2) 1px,transparent 1px); background-size:12px 12px; }
.bd-sw-checker    { background-color:#f0ede8; background-image:conic-gradient(#c9a87c 25%,transparent 25% 50%,#c9a87c 50% 75%,transparent 75%); background-size:12px 12px; }
.bd-sw-plus       { background-color:#f0ede8; background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9a87c' fill-opacity='0.6'%3E%3Cpath d='M11 9V5h-2v4H5v2h4v4h2v-4h4V9h-4z'/%3E%3C/g%3E%3C/svg%3E"); }
.bd-sw-linen      { background-color:#f5efe6; background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(160,130,90,0.07) 3px,rgba(160,130,90,0.07) 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(160,130,90,0.05) 3px,rgba(160,130,90,0.05) 4px); }
.bd-sw-zigzag     { background-color:#f0ede8; background-image:linear-gradient(135deg,#c9a87c 25%,transparent 25%),linear-gradient(225deg,#c9a87c 25%,transparent 25%),linear-gradient(315deg,#c9a87c 25%,transparent 25%),linear-gradient(45deg,#c9a87c 25%,transparent 25%); background-position:-6px 0,-6px 0,0 0,0 0; background-size:12px 12px; }
.bd-sw-scales     { background-color:#f0ede8; background-image:radial-gradient(circle at 0 100%,#c9a87c 44%,transparent 45%),radial-gradient(circle at 100% 100%,#c9a87c 44%,transparent 45%); background-size:12px 8px; }
.bd-sw-diamonds   { background-color:#f0ede8; background-image:linear-gradient(45deg,#c9a87c 25%,transparent 25%,transparent 75%,#c9a87c 75%),linear-gradient(45deg,#c9a87c 25%,transparent 25%,transparent 75%,#c9a87c 75%); background-size:12px 12px; background-position:0 0,6px 6px; }
.bd-sw-rings      { background-color:#f0ede8; background-image:radial-gradient(circle,transparent 27%,#c9a87c 28%,#c9a87c 38%,transparent 39%); background-size:14px 14px; }
.bd-sw-crosshatch { background-color:#f0ede8; background-image:repeating-linear-gradient(45deg,#c9a87c 0,#c9a87c 1.5px,transparent 0,transparent 50%),repeating-linear-gradient(-45deg,#c9a87c 0,#c9a87c 1.5px,transparent 0,transparent 50%); background-size:10px 10px; }
.bd-sw-weave      { background-color:#f0ede8; background-image:repeating-linear-gradient(90deg,#c9a87c 0,#c9a87c 5px,transparent 5px,transparent 6px,#c9a87c 6px,#c9a87c 11px),repeating-linear-gradient(0deg,transparent 0,transparent 5px,rgba(0,0,0,0.13) 5px,rgba(0,0,0,0.13) 6px); background-size:11px 11px; }

@keyframes bd-warm   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes bd-aurora { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes bd-sunset  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes bd-ocean   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes bd-candy   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.bd-sw-warm   { background:linear-gradient(270deg,#f8f4ef,#c9a87c,#e8d5b7,#b8936a,#f8f4ef); background-size:400% 400%; animation:bd-warm   6s ease infinite; }
.bd-sw-aurora { background:linear-gradient(270deg,#0d1b2a,#1b4332,#312e81,#0d1b2a); background-size:400% 400%; animation:bd-aurora 6s ease infinite; }
.bd-sw-sunset { background:linear-gradient(270deg,#ff6b6b,#feca57,#ff9ff3,#ff6b6b); background-size:400% 400%; animation:bd-sunset 5s ease infinite; }
.bd-sw-ocean  { background:linear-gradient(270deg,#005f8e,#00b4d8,#90e0ef,#005f8e); background-size:400% 400%; animation:bd-ocean 7s ease infinite; }
.bd-sw-candy  { background:linear-gradient(270deg,#f093fb,#f5576c,#4facfe,#f093fb); background-size:400% 400%; animation:bd-candy 4s ease infinite; }


/* ── Menu ─────────────────────────────────────────────── */
.mse-menu {
    min-height: 100%;
}

.mse-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: var(--bs-secondary-bg);
}



.mse-menu-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-weight: bold;
}

/* ── Position preset grid ─────────────────────────────── */

/* ── Tools accordion ──────────────────────────────────── */
/* Same colors and borders as the live menu's category accordion (layout-01.css):
   grey buttons with a hairline above and below, no item border, no focus ring. The
   open button keeps Bootstrap's active color, as it does on the live menu. */
#mse-tools-accordion .accordion-button {
    background-color: var(--bs-secondary-bg);
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

#mse-tools-accordion .accordion-item,
#mse-tools-accordion .accordion-button:focus,
#mse-tools-accordion .accordion-button:not(.collapsed) {
    border: none;
    box-shadow: none;
}