/* FCBF Tutorial Mata-Mata Modal v2 */
:root{
    --fcbf-mm-modal-green:#36f58a;
    --fcbf-mm-modal-cyan:#65e8ff;
    --fcbf-mm-modal-yellow:#ffde3b;
    --fcbf-mm-modal-bg:#020817;
}
body.fcbf-mm-tutorial-locked{
    overflow:hidden!important;
    touch-action:none!important;
}
.fcbf-mm-tutorial-overlay{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:14px;
    background:
        radial-gradient(circle at top left, rgba(54,245,138,.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(101,232,255,.18), transparent 30%),
        rgba(0,5,16,.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}
.fcbf-mm-tutorial-overlay.is-open{
    display:flex;
}
.fcbf-mm-tutorial-shell{
    position:relative;
    width:min(100%, 520px);
    height:min(94vh, 940px);
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    gap:10px;
    padding:10px;
    border-radius:30px;
    background:
        linear-gradient(145deg, rgba(4,17,38,.98), rgba(2,8,23,.98));
    border:1px solid rgba(101,232,255,.34);
    box-shadow:
        0 28px 90px rgba(0,0,0,.72),
        0 0 0 1px rgba(54,245,138,.15),
        inset 0 1px 0 rgba(255,255,255,.08);
    overflow:hidden;
}
.fcbf-mm-tutorial-shell:before{
    content:"";
    position:absolute;
    inset:-40%;
    background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.10), transparent 58%);
    transform:translateX(-38%) rotate(12deg);
    animation:fcbfMmTutorialShine 5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes fcbfMmTutorialShine{
    0%,72%{transform:translateX(-44%) rotate(12deg)}
    100%{transform:translateX(44%) rotate(12deg)}
}
.fcbf-mm-tutorial-stage{
    position:relative;
    z-index:1;
    min-height:0;
    border-radius:24px;
    overflow:hidden;
    background:#020817;
    border:1px solid rgba(255,255,255,.08);
}
.fcbf-mm-tutorial-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    background:#020817;
    user-select:none;
    -webkit-user-drag:none;
}
.fcbf-mm-tutorial-controls{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:4px 2px 0;
}
.fcbf-mm-tutorial-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:74px;
    height:42px;
    border-radius:999px;
    color:#dffcff;
    font-weight:1000;
    font-size:13px;
    letter-spacing:.08em;
    background:rgba(8,24,48,.82);
    border:1px solid rgba(101,232,255,.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.fcbf-mm-tutorial-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:0;
}
.fcbf-mm-tutorial-dot{
    width:22px;
    height:7px;
    border-radius:999px;
    background:rgba(148,163,184,.25);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.fcbf-mm-tutorial-dot.is-active{
    width:36px;
    background:linear-gradient(90deg, var(--fcbf-mm-modal-green), var(--fcbf-mm-modal-cyan), var(--fcbf-mm-modal-yellow));
    box-shadow:0 0 20px rgba(54,245,138,.42);
}
.fcbf-mm-tutorial-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}
.fcbf-mm-tutorial-btn{
    appearance:none;
    border:0;
    min-height:42px;
    border-radius:999px;
    padding:0 16px;
    cursor:pointer;
    font-weight:1000;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:12px;
    font-family:inherit;
    transition:transform .16s ease, filter .16s ease, opacity .16s ease;
}
.fcbf-mm-tutorial-btn:active{
    transform:scale(.98);
}
.fcbf-mm-tutorial-btn--prev{
    color:#dcecff;
    background:rgba(15,33,61,.88);
    border:1px solid rgba(255,255,255,.12);
}
.fcbf-mm-tutorial-btn--prev[disabled]{
    opacity:.42;
    cursor:not-allowed;
}
.fcbf-mm-tutorial-btn--next{
    color:#02111d;
    background:linear-gradient(135deg, var(--fcbf-mm-modal-green), var(--fcbf-mm-modal-cyan), var(--fcbf-mm-modal-yellow));
    box-shadow:0 14px 34px rgba(54,245,138,.24), inset 0 1px 0 rgba(255,255,255,.24);
}
.fcbf-mm-tutorial-btn--next:hover{
    filter:brightness(1.06);
}
@media (max-width:520px){
    .fcbf-mm-tutorial-overlay{
        padding:8px;
    }
    .fcbf-mm-tutorial-shell{
        width:100%;
        height:calc(100svh - 16px);
        border-radius:24px;
        padding:8px;
        gap:8px;
    }
    .fcbf-mm-tutorial-stage{
        border-radius:20px;
    }
    .fcbf-mm-tutorial-controls{
        grid-template-columns:1fr;
        gap:8px;
    }
    .fcbf-mm-tutorial-count{
        margin:0 auto;
        height:30px;
        min-width:62px;
        font-size:11px;
    }
    .fcbf-mm-tutorial-dot{
        width:20px;
        height:6px;
    }
    .fcbf-mm-tutorial-dot.is-active{
        width:34px;
    }
    .fcbf-mm-tutorial-actions{
        display:grid;
        grid-template-columns:1fr 1.35fr;
        width:100%;
    }
    .fcbf-mm-tutorial-btn{
        min-height:46px;
        padding:0 12px;
        font-size:11px;
    }
}