:root {
    --lm2-font         : inherit;
    --lm2-accent       : #F7FF00;
    --lm2-accent-light : #fcffe5;
    --lm2-navy         : #282828;
    --lm2-muted        : #999999; 
    --lm2-border       : #fcffe5;
    --lm2-hover        : #fcffe5;
    --lm2-radius       : 8px;
    --lm2-radius-md    : 14px;
    --lm2-shadow       : 0 4px 6px -1px rgba(0,0,0,.06), 0 20px 48px -8px rgba(0,0,0,.12);
    --lm2-transition   : 160ms cubic-bezier(.4,0,.2,1);
    --lm2-navbar-h     : var(--navbar-height, 64px);
} 

/* Trigger */
.lm2-trigger {
    display        : inline-flex;
    align-items    : center;
    gap            : .5rem;
    padding        : .42rem .85rem .42rem .65rem;
    background     : #fff;
    border         : 1.5px solid var(--lm2-border);
    border-radius  : var(--lm2-radius);
    cursor         : pointer;
    font-family    : var(--lm2-font);
    font-size      : .875rem;
    font-weight    : 600;
    color          : var(--lm2-navy);
    transition     : border-color var(--lm2-transition),
                     box-shadow var(--lm2-transition),
                     background var(--lm2-transition);
    white-space    : nowrap;
    user-select    : none;
}
.lm2-trigger:hover {
    border-color : #c5c6e0;
    background   : var(--lm2-hover);
}
.lm2-trigger.is-open {
    border-color : var(--lm2-accent);
    box-shadow   : 0 0 0 3px rgba(80,70,229,.12);
}
.lm2-trigger .lm2-flag { width: 20px; height: 20px; flex-shrink: 0;
                          object-fit: cover; display: block; }
.lm2-trigger-caret     { width: 15px; height: 15px; color: var(--lm2-muted);
                         flex-shrink: 0; transition: transform var(--lm2-transition); }
.lm2-trigger.is-open .lm2-trigger-caret { transform: rotate(180deg); }

/* Backdrop */
.lm2-backdrop {
    position       : fixed;
    inset          : 0;
    z-index        : 1040;
    background     : rgba(15,15,30,.22);
    backdrop-filter: blur(2px);
    opacity        : 0;
    pointer-events : none;
    transition     : opacity var(--lm2-transition);
}
.lm2-backdrop.is-visible { opacity: 1; pointer-events: all; }

/* Panel */
.lm2-panel {
    position      : fixed;
    /*top           : var(--lm2-navbar-h);*/
    left          : 0;
    right         : 0;
    z-index       : 10000 !important;
    background    : #fff;
    border-top    : 2px solid var(--lm2-accent);
    box-shadow    : var(--lm2-shadow);
    transform     : translateY(-8px);
    opacity       : 0;
    pointer-events: none;
    transition    : opacity 200ms cubic-bezier(.4,0,.2,1),
                    transform 200ms cubic-bezier(.4,0,.2,1);
}
.lm2-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: all; }

.lm2-panel-inner {
    max-width : 1200px;
    margin    : 0 auto;
    padding   : 2rem 2rem 2.5rem;
}

/* Header */
.lm2-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 1.5rem;
    gap             : 1rem;
}
.lm2-title { font-size: 1.15rem; font-weight: 700; color: var(--lm2-navy);
             letter-spacing: -.02em; margin: 0; }

/* Search */
.lm2-search-wrap { position: relative; width: 280px; flex-shrink: 0; }
.lm2-search-icon {
    position       : absolute;
    left           : .75rem;
    top            : 50%;
    transform      : translateY(-50%);
    color          : var(--lm2-muted);
    pointer-events : none;
    width          : 16px;
    height         : 16px;
}
.lm2-search {
    width        : 100%;
    padding      : .5rem .75rem .5rem 2.25rem;
    border       : 1.5px solid var(--lm2-border);
    border-radius: var(--lm2-radius);
    font-family  : var(--lm2-font);
    font-size    : .85rem;
    color        : var(--lm2-navy);
    background   : var(--lm2-hover);
    transition   : border-color var(--lm2-transition), box-shadow var(--lm2-transition);
    outline      : none;
}
.lm2-search:focus {
    border-color: var(--lm2-accent);
    background  : #fff;
    box-shadow  : 0 0 0 3px rgba(80,70,229,.1);
}
.lm2-search::placeholder { color: var(--lm2-muted); }

/* Close */
.lm2-close {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 34px;
    height          : 34px;
    border          : 1.5px solid var(--lm2-border);
    border-radius   : 50%;
    background      : var(--lm2-navy);
    color           : var(--lm2-accent);
    cursor          : pointer;
    flex-shrink     : 0;
    transition      : border-color var(--lm2-transition),
                      color var(--lm2-transition),
                      background var(--lm2-transition);
}
.lm2-close:hover { border-color: #c5c6e0; color: var(--lm2-navy); background: var(--lm2-hover); }
.lm2-close svg   { width: 16px; height: 16px; }

/* Grid */
.lm2-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : .2rem 1rem;
    max-height            : 420px;
    overflow-y            : auto;
    padding-right         : .5rem;
    scrollbar-width       : thin;
    scrollbar-color       : var(--lm2-border) transparent;
}
.lm2-grid::-webkit-scrollbar       { width: 4px; }
.lm2-grid::-webkit-scrollbar-track { background: transparent; }
.lm2-grid::-webkit-scrollbar-thumb { background: var(--lm2-border); border-radius: 4px; }

/* Item */
.lm2-item {
    display        : flex;
    align-items    : center;
    gap            : .6rem;
    padding        : .55rem .65rem;
    border-radius  : var(--lm2-radius);
    text-decoration: none;
    border         : 1.5px solid transparent;
    transition     : background var(--lm2-transition);
    cursor         : pointer;
}
.lm2-item:hover      { background: var(--lm2-hover); }
.lm2-item.is-active  { background: var(--lm2-accent-light); border-color: rgba(80,70,229,.2); }
.lm2-item .lm2-flag  { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0;
                       object-fit: cover; display: block; }
.lm2-item-text       { line-height: 1.25; overflow: hidden; }
.lm2-item-country    { display: block; font-size: .85rem; font-weight: 700;
                       color: var(--lm2-navy); white-space: nowrap;
                       overflow: hidden; text-overflow: ellipsis; }
.lm2-item-lang       { display: block; font-size: .78rem; color: var(--lm2-muted); white-space: nowrap; }
.lm2-item.is-active .lm2-item-country { color: var(--lm2-navy); }
.lm2-item.is-active .lm2-item-lang    { color: var(--lm2-navy); }

/* Empty */
.lm2-empty { grid-column: 1/-1; text-align: center; padding: 2.5rem 1rem;
             color: var(--lm2-muted); font-size: .875rem; }

/* Responsive */
@media (max-width: 991px) { .lm2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
    .lm2-grid         { grid-template-columns: repeat(2, 1fr);
                        max-height: calc(100svh - var(--lm2-navbar-h) - 140px);
                        gap: .15rem .5rem; }
    .lm2-panel-inner  { padding: 1.25rem 1rem 1.5rem; }
    .lm2-header       { flex-wrap: wrap; }
    .lm2-search-wrap  { width: 100%; order: 3; }
}
@media (max-width: 479px) {
    .lm2-grid         { grid-template-columns: 1fr 1fr; }
    .lm2-item         { padding: .45rem .5rem; gap: .45rem; }
    .lm2-item-country { font-size: .8rem; }
    .lm2-item-lang    { font-size: .72rem; }
}