.smm-wrapper {

    --smm-border: #e2e4e7;

    --smm-bg-hover: #f0f0f1; --smm-text-dark: #1d2327; --smm-text-light: #50575e;

    --smm-accent: #2271b1; --smm-highlight: #fff3cd; --smm-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    --smm-col-min-width: var(--smm-skin-col-min-width, 220px);

    --smm-col-max-width: var(--smm-skin-col-max-width, 800px);

    --smm-col-gap: var(--smm-skin-col-gap, 16px);

    --smm-col-width: clamp(

        var(--smm-col-min-width),

        calc((100% - (var(--smm-col-count, 5) - 1) * var(--smm-col-gap)) / var(--smm-col-count, 5)),

        var(--smm-col-max-width)

    );

    width: 100%; font-family: inherit;

    box-sizing: border-box; position: relative;

}

.smm-wrapper * { box-sizing: inherit; }

.smm-layout-flow {

    background-image: var(--smm-bg-image, none);

    background-size: auto 90%;

    background-position: right center;

    background-repeat: no-repeat;

    padding: 14px;

    border-radius: 8px;

}

[dir="rtl"] .smm-layout-flow {

    background-position: left center;

}

.smm-layout-flow .smm-flow {

    width: 100%;

}

.smm-layout-flow .smm-flow-columns {

    display: grid;

    grid-template-columns: repeat(var(--smm-col-count, 5), minmax(0, 1fr));

    align-items: start;

    gap: 0;

}

.smm-layout-flow .smm-flow-column {

    width: 100%;

    min-width: 0;

    padding-inline-end: var(--smm-col-gap);

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid var(--smm-border);

    border-radius: 8px;

    overflow: hidden;

    position: relative;

}

.smm-flow-opened-by {

    display: block;

    padding: 8px 12px;

    font-size: 0.82rem;

    font-weight: 700;

    line-height: 1.35;

    color: var(--smm-text-light);

    background: #f8f9fb;

    border-bottom: 1px solid var(--smm-border);

    overflow-wrap: anywhere;

}

.smm-flow-opened-by.is-empty {

    display: none;

}

@media (min-width: 801px) {

    .smm-layout-flow .smm-flow-opened-by:not(.is-empty) {

        position: sticky;

        inset-block-start: 0;

        z-index: 2;

    }

}

.smm-layout-flow .smm-flow-column.is-stage-hidden {

    display: none;

}

.smm-layout-flow.smm-flow-single-group .smm-flow-col-groups {

    display: none;

}

.smm-flow-column-title {

    margin: 0;

    padding: 12px 14px;

    font-size: 0.92rem;

    font-weight: 700;

    border-bottom: 1px solid var(--smm-border);

    background: #f8f9fb;

}

.smm-flow-list {

    list-style: none;

    margin: 0;

    padding: 8px;

}

.smm-flow-item {

    margin: 0 0 8px;

}

.smm-flow-btn {

    width: 100%;

    border: none;

    background: #fff;

    text-align: start;

    padding: 11px 12px;

    color: var(--smm-text-dark);

    cursor: pointer;

}

.smm-flow-item-label {

    display: inline-block;

    line-height: 1.35;

    overflow-wrap: anywhere;

}

.smm-flow-item-count {

    float: inline-end;

    opacity: 0.65;

    font-size: 0.8rem;

}

.smm-flow-link {

    display: block;

    width: 100%;

    text-decoration: none;

    color: var(--smm-text-dark);

    padding: 11px 12px;

    overflow-wrap: anywhere;

}

.smm-flow-link:hover,
.smm-flow-btn:hover,
.smm-flow-arrow:hover {

    background: var(--smm-bg-hover);

}

.smm-flow-link:focus-visible,
.smm-flow-btn:focus-visible,
.smm-flow-arrow:focus-visible,
.smm-flow-overflow-toggle:focus-visible,
.smm-reveal-btn:focus-visible,
.smm-search-result-link:focus-visible,
.smm-group-header-btn:focus-visible,
.smm-expand-trigger:focus-visible {

    outline: 2px solid var(--smm-accent);

    outline-offset: 2px;

}

.smm-flow-group-item.is-active .smm-flow-btn {

    background: var(--smm-bg-hover);

}

.smm-flow-col-books .smm-flow-item.is-active .smm-flow-btn,
.smm-flow-col-chapters .smm-flow-item.is-active .smm-flow-link {
    background: var(--smm-bg-hover);
}

.smm-flow-item[data-flow-stage="chapters"] .smm-flow-chapter-open[aria-expanded="true"],
.smm-flow-item[data-flow-stage="chapters"] .smm-flow-acc-toggle[aria-expanded="true"],
.smm-flow-item[data-flow-stage="chapters"] .smm-flow-inline-toggle[aria-expanded="true"] {
    background: var(--smm-bg-hover);
}

.smm-flow-arrow {

    border: none;

    border-inline-start: 1px solid var(--smm-border);

    background: #fff;

    min-inline-size: 42px;

    cursor: pointer;

    color: var(--smm-text-light);

}

.smm-flow-arrow[disabled] {

    cursor: default;

    opacity: 0.45;

}

.smm-flow-arrow.is-column-open .smm-chevron {
    transform: rotate(-90deg);
}

[dir="rtl"] .smm-flow-arrow.is-column-open .smm-chevron {
    transform: rotate(90deg);
}

.smm-flow-accordion {

    padding: 8px;

}

.smm-flow-acc-list {

    list-style: none;

    margin: 0;

    padding: 0;

}

.smm-flow-acc-item {

    margin: 0 0 8px;

}

.smm-flow-acc-panel {

    display: none;

    padding-inline-start: 12px;

}

.smm-flow-acc-panel.is-open {

    display: block;

}

.smm-flow-overflow {

    border-top: 1px solid var(--smm-border);

    padding: 8px;

    background: #f8f9fb;

}

.smm-flow-overflow:not(.is-active) {

    display: none;

}

.smm-flow-overflow-item {

    margin: 0 0 8px;

    border: 1px solid var(--smm-border);

    border-radius: 6px;

    overflow: hidden;

    background: #fff;

}

.smm-flow-overflow-toggle {

    width: 100%;

    border: none;

    background: #fff;

    text-align: start;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 12px;

    cursor: pointer;

    color: var(--smm-text-dark);

    font-weight: 600;

}

.smm-flow-overflow-toggle:hover {

    background: var(--smm-bg-hover);

}

.smm-flow-overflow-toggle[aria-expanded="true"] .smm-chevron {

    transform: rotate(180deg);

}

.smm-flow-overflow-panel {

    display: none;

    border-top: 1px solid var(--smm-border);

}

.smm-flow-overflow-panel.is-open {

    display: block;

}

.smm-flow-inline-next-stage {

    display: none;

    margin-top: 8px;

    border: 1px solid var(--smm-border);

    border-radius: 6px;

    overflow: hidden;

    background: #fff;

}

.smm-flow-inline-next-stage.is-open {

    display: block;

}

.smm-flow-inline-panel {

    display: none;

    padding-inline-start: 12px;

}

.smm-flow-inline-panel.is-open {

    display: block;

}

.smm-layout-flow .smm-flow.smm-flow-single-col .smm-flow-columns {

    grid-template-columns: 1fr;

}

.smm-layout-flow .smm-flow.smm-flow-single-col .smm-flow-column.is-empty {

    display: none;

}

.smm-search-container { position: relative; margin-block-end: 24px; z-index: 101; }

.smm-search-container.is-hidden { display: none; }

.smm-search-input-wrapper { position: relative; display: flex; align-items: center; }

.smm-search-icon { position: absolute; inset-inline-start: 12px; color: var(--smm-text-light); pointer-events: none; }

.smm-search-input { width: 100%; padding: 12px 12px 12px 40px; border: 1px solid var(--smm-border); border-radius: 4px; font-size: 1rem;

box-shadow: 0 2px 4px rgba(0,0,0,0.02) inset; transition: border-color 0.2s; }

[dir="rtl"] .smm-search-input { padding: 12px 40px 12px 12px; }

.smm-search-input:focus { outline: none; border-color: var(--smm-accent); box-shadow: 0 0 0 1px var(--smm-accent); }

.smm-search-spinner { position: absolute; inset-inline-end: 12px; width: 16px;

height: 16px; border: 2px solid var(--smm-border); border-block-start-color: var(--smm-accent); border-radius: 50%; animation: smm-spin 0.8s linear infinite; }

.smm-search-results { position: absolute;

inset-block-start: calc(100% + 4px); inset-inline-start: 0; width: 100%; background: #fff; border: 1px solid var(--smm-border); border-radius: 4px;

box-shadow: 0 8px 16px rgba(0,0,0,0.1); max-height: 350px; overflow-y: auto; z-index: 100; }

.smm-search-result-item { display: flex; border-block-end: 1px solid var(--smm-border); }

.smm-search-result-link { flex-grow: 1; padding: 10px 12px; text-decoration: none; color: var(--smm-text-dark); display: flex; flex-direction: column; transition: background-color 0.2s; }

.smm-search-result-link:hover { background-color: var(--smm-bg-hover); }

.smm-search-result-title { font-weight: 600; }

.smm-search-result-meta { font-size: 0.75rem; color: var(--smm-text-light); }

.smm-search-summary {
    display: none;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--smm-border);
    border-radius: 6px;
}

.smm-search-filters {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
}

.smm-search-book-filter {
    border: 1px solid var(--smm-border);
    background: #fff;
    color: var(--smm-text-dark);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.78rem;
    line-height: 1.25;
    cursor: pointer;
}

.smm-search-book-filter:hover {
    background: var(--smm-bg-hover);
}

.smm-search-book-filter.is-active {
    border-color: var(--smm-accent);
    color: var(--smm-accent);
    font-weight: 700;
}

.smm-search-showing {
    display: none;
    font-size: 0.8rem;
    color: var(--smm-text-light);
}

.smm-search-results-footer {
    position: sticky;
    inset-block-end: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--smm-border);
    background: #fff;
}

.smm-search-nav-btn {
    border: 1px solid var(--smm-border);
    background: #fff;
    color: var(--smm-text-dark);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.82rem;
    line-height: 1.3;
    cursor: pointer;
}

.smm-search-nav-btn:hover:not([disabled]) {
    background: var(--smm-bg-hover);
}

.smm-search-nav-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smm-search-end-text {
    font-size: 0.8rem;
    color: var(--smm-text-light);
    font-weight: 600;
}

.smm-reveal-btn { background: transparent; border: none;

border-inline-start: 1px solid var(--smm-border); padding: 0 12px; cursor: pointer; color: var(--smm-text-light); transition: color 0.2s; }

.smm-reveal-btn:hover { color: var(--smm-accent); }

.smm-level-0-list, .smm-level-1-list, .smm-level-2-list, .smm-level-3-list, .smm-level-4-list { list-style: none; margin: 0; padding: 0; }

.smm-group-item { margin-block-end: 24px; }



/* Group Header - Accessible & Dynamic Contrast */

.smm-group-header-btn {

    display: flex;

    align-items: center;

    width: 100%;

    gap: 14px;

    padding: 16px 20px;

    background: transparent;

    border: none;

    border-bottom: 2px solid var(--smm-border);

    cursor: pointer;

    transition: background-color 0.25s ease;

    font-size: inherit;

    font-family: inherit;

    color: inherit;

}

.smm-group-header-btn:hover { background: rgba(0, 0, 0, 0.05); }

.smm-group-title { font-size: 1.45rem; font-weight: 700; flex-grow: 1; line-height: 1.3; text-align: right; }

[dir="ltr"] .smm-group-title { text-align: left; }

.smm-group-icon { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

.smm-group-chevron { flex-shrink: 0; transition: transform 0.3s ease; }

.smm-group-item.collapsed .smm-level-1-list { display: none; }

.smm-group-item.collapsed .smm-group-chevron { transform: rotate(180deg); }



.smm-book-item { margin-block-end: 8px; }

.smm-split-button { display: flex; background: #fff; border: 1px solid var(--smm-border);

border-radius: 4px; overflow: hidden; position: relative; z-index: 1; }

.smm-book-link { flex-grow: 1; padding: 12px 16px; text-decoration: none; color: var(--smm-text-dark);

font-weight: 600; }

.smm-book-link:hover { background-color: var(--smm-bg-hover); }

.smm-expand-trigger { background: #fff; border: none; border-inline-start: 1px solid var(--smm-border); padding-inline: 16px; cursor: pointer;

color: var(--smm-text-light); transition: background-color 0.2s; }

.smm-expand-trigger:hover { background-color: var(--smm-bg-hover); color: var(--smm-accent); }

.smm-expand-trigger.is-loading { opacity: 0.6; cursor: wait; }

.smm-expand-trigger.is-loading .smm-chevron { animation: smm-spin 1s linear infinite; }

.smm-chevron { transition: transform var(--smm-transition); }

.smm-expand-trigger[aria-expanded="true"] .smm-chevron { transform: rotate(180deg); }

.smm-submenu-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--smm-transition); }

.smm-submenu-wrapper.is-open { grid-template-rows: 1fr; }

.smm-submenu-inner { overflow: hidden; min-height: 0; }

.smm-level-2-list { padding-block: 8px 12px; padding-inline-start: 16px; }

.smm-level-3-list, .smm-level-4-list { padding-inline-start: 12px; }

.smm-chapter-item { border-inline-start: 2px solid var(--smm-border); }

.smm-chapter-link { display: block; padding: 8px 16px; color: var(--smm-text-light); text-decoration: none; position: relative;

inset-inline-start: -2px; border-inline-start: 2px solid transparent; }

.smm-chapter-link:hover { color: var(--smm-accent); border-inline-start-color: var(--smm-accent); background-color: rgba(34, 113, 177, 0.04); }

.smm-chapter-link.smm-is-highlighted { background-color: var(--smm-highlight); border-inline-start-color: #ffc107; font-weight: 700; color: var(--smm-text-dark); }

.smm-flow-link.smm-is-highlighted {

    border: 2px solid #1d2327;

    border-radius: 6px;

    background: #fff;

    font-weight: 700;

    animation: smm-reveal-pulse 1.2s ease-out 2;

}

@keyframes smm-reveal-pulse {

    0% {

        box-shadow: 0 0 0 0 rgba(29, 35, 39, 0.4);

    }

    100% {

        box-shadow: 0 0 0 10px rgba(29, 35, 39, 0);

    }

}

@keyframes smm-spin { 100% { transform: rotate(360deg); } }



@media (min-width: 1024px) {

    .smm-level-1-list { position: relative; width: 350px; max-width: 100%; }

    .smm-book-item { position: static; }

    .smm-expand-trigger[aria-expanded="true"] { background-color: var(--smm-bg-hover); color: var(--smm-accent); }

    .smm-submenu-wrapper { display: block; position: absolute; inset-block-start: 0; inset-inline-start: calc(100% + 20px); width: 400px;

    max-width: calc(100vw - 380px); max-height: 600px; overflow-y: auto; background: #fff; border: 1px solid var(--smm-border); border-radius: 4px;

    box-shadow: 0 8px 32px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; z-index: 100; transition: opacity 0.3s ease, visibility 0.3s ease, inset-inline-start 0.3s ease; }

    .smm-submenu-wrapper.is-open { opacity: 1; visibility: visible; inset-inline-start: calc(100% + 10px); }

    .smm-submenu-inner { overflow: visible; min-height: auto; padding: 16px; }

    .smm-level-2-list { padding: 0; }

    .smm-chapter-item { border-inline-start: none; margin-block-end: 4px; position: relative; }

    .smm-chapter-link { inset-inline-start: 0; border-radius: 4px; }

    .smm-submenu-wrapper::-webkit-scrollbar { width: 6px; } .smm-submenu-wrapper::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

}

@media (prefers-reduced-motion: reduce) { 

    .smm-wrapper { --smm-transition: 0ms !important; } 

    .smm-search-spinner { animation: none !important; display: none !important; } 

    .smm-flow-link.smm-is-highlighted { animation: none !important; }

}




.smm-main-component-container { position: relative; }

.smm-trigger-bar { position: relative; display: inline-flex; align-items: center; }

.smm-trigger-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--smm-border); padding: 10px 16px;

border-radius: 4px; cursor: pointer; font-weight: 600; color: var(--smm-text-dark); transition: background-color var(--smm-transition), color var(--smm-transition); }

.smm-trigger-btn-icon { width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px; }

.smm-trigger-btn-icon-bg {
    width: var(--smm-trigger-icon-width, 18px);
    height: var(--smm-trigger-icon-height, 18px);
    flex: 0 0 var(--smm-trigger-icon-basis, 18px);
    background-image: var(--smm-trigger-icon-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.smm-trigger-btn-svg { width: var(--smm-trigger-icon-width, 18px); height: var(--smm-trigger-icon-height, 18px); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--smm-trigger-icon-basis, 18px); }

.smm-trigger-btn-svg svg { width: 100%; height: 100%; display: block; }

.smm-trigger-btn:hover { background-color: var(--smm-bg-hover); color: var(--smm-accent); }

.smm-trigger-btn .smm-chevron { transition: transform var(--smm-transition); }

.smm-trigger-btn.is-loading { opacity: 0.8; }

.smm-trigger-btn.is-loading .smm-chevron { animation: smm-spin 0.9s linear infinite; }

.smm-trigger-btn[aria-expanded="true"] .smm-chevron { transform: rotate(180deg); }

.smm-search-toggle-btn {
    border: none;
    background: transparent;
    color: var(--smm-text-light);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.smm-search-toggle-btn:hover { color: var(--smm-accent); }

.smm-search-toggle-btn:focus-visible {
    outline: 2px solid var(--smm-accent);
    outline-offset: 2px;
}

.smm-trigger-search-toggle {
    position: absolute;
    inset-inline-end: 44px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

.smm-main-component-container.smm-dropdown-is-active .smm-trigger-search-toggle {
    opacity: 1;
    pointer-events: auto;
}

.smm-has-dropdown .smm-wrapper { opacity: 0; visibility: hidden; transform: translateY(10px); position: absolute;

inset-block-start: calc(100% + 8px); inset-inline-start: 0; z-index: 999; background-color: #fff; padding: 20px; border: 1px solid var(--smm-border); border-radius: 4px;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: opacity var(--smm-transition), visibility var(--smm-transition), transform var(--smm-transition); }

.smm-has-dropdown.smm-dropdown-is-active .smm-wrapper { opacity: 1; visibility: visible; transform: translateY(0); }

@media (min-width: 1024px) {

    .smm-has-dropdown .smm-wrapper { min-width: 400px; }

}