.dsmm2, .dsmm2 *{ box-sizing:border-box; }
.dsmm2{
font-family: var(--font-family);
font-size: var(--font-size);
--btn-bg: var(--dsmm2-btn-bg, #f08a19);
--btn-text: var(--dsmm2-btn-text, #fff);
--btn-hover-bg: var(--dsmm2-btn-hover-bg, #e47f12);
--btn-hover-text: var(--dsmm2-btn-hover-text, #fff);
--font-family: var(--dsmm2-font-family, inherit);
--font-size: var(--dsmm2-font-size, 15px);
--gutter: var(--dsmm2-gutter, 44px);
--overlay: var(--dsmm2-overlay, rgba(0,0,0,.38));
--dialog-bg: var(--dsmm2-dialog-bg, #fff);
--col-bg: var(--dsmm2-col-bg, #fff);
--col-alt: var(--dsmm2-col-alt-bg, #f6f8fb);
--text: var(--dsmm2-text, #13202b);
--muted: var(--dsmm2-muted, #5a6a78);
--border: var(--dsmm2-border, rgba(0,0,0,.10));
--hover: var(--dsmm2-hover, rgba(19,32,43,.06));
--active: var(--dsmm2-active, rgba(19,32,43,.08));
--accent: var(--dsmm2-accent, #2f4f68);
--dialog-w: var(--dsmm2-dialog-w, 980px);
--col-w: var(--dsmm2-col-w, 270px);
--maxh: var(--dsmm2-maxh, 70vh);
--radius: var(--dsmm2-radius, 14px);
position: relative;
z-index: 9999;
} .dsmm2-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding: 10px 14px;
border: 0;
border-radius: 12px;
background: var(--btn-bg);
color: var(--btn-text);
cursor: pointer;
font-weight: 600;
letter-spacing: .2px;
line-height: 1;
box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.dsmm2-btn:hover{
background: var(--btn-hover-bg);
color: var(--btn-hover-text);
}
.dsmm2-btn:focus{ outline: 2px solid rgba(255,255,255,.22); outline-offset: 2px; }
.dsmm2-btn-ico{ display:inline-flex; opacity:.95; } .dsmm2-overlay{
position: fixed;
inset: 0;
background: var(--overlay);
z-index: 99998;
display:flex;
align-items:flex-start;
justify-content:center;
padding: var(--gutter);
overflow: auto;
}
.dsmm2-dialog{
position: relative;
z-index: 99999;
width: min(var(--dialog-w), calc(100vw - (var(--gutter) * 2)));
max-height: min(var(--maxh), calc(100vh - (var(--gutter) * 2)));
margin-top: clamp(0px, 5vh, 56px);
background: var(--dialog-bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 22px 70px rgba(0,0,0,.25);
overflow: hidden;
}
.dsmm2-head{
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
}
.dsmm2-title{
font-weight: 600;
letter-spacing: .2px;
}
.dsmm2-close{
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid var(--border);
background: transparent;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color: var(--text);
font-size: 22px;
line-height: 1;
}
.dsmm2-close:hover{ background: var(--hover); }
.dsmm2-body{
height: calc(var(--maxh) - 52px);
overflow: hidden;
} .dsmm2-cols{
height: 100%;
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
} .dsmm2-col{
min-width: 0;
height: 100%;
border-right: 1px solid var(--border);
background: var(--col-bg);
}
.dsmm2-col:nth-child(2){ background: var(--col-alt); }
.dsmm2-col:last-child{ border-right: 0; }
.dsmm2-col:nth-child(2n){ background: var(--col-alt); }
.dsmm2-col:last-child{ border-right: 0; }
.dsmm2-col-title{
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
padding: 10px 10px 6px;
}
.dsmm2-list{
list-style:none;
margin: 0;
padding: 10px;
max-height: 100%;
overflow: auto;
}
.dsmm2-item{ margin: 2px 0; } .dsmm2-row{
width: 100%;
display:flex;
align-items:flex-start;
gap: 10px;
padding: 10px 12px 10px 18px;
border-radius: 12px;
border: 1px solid transparent;
background: transparent;
color: var(--text);
font-weight: 500;
position: relative;
}
.dsmm2-row:hover{ background: var(--hover); }
.dsmm2-link{
flex: 1 1 auto;
min-width: 0;
color: inherit;
text-decoration:none;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
}
.dsmm2-expand{
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.72);
display:flex;
align-items:center;
justify-content:center;
cursor: pointer;
}
.dsmm2-expand:hover{
background: rgba(255,255,255,.92);
}
.dsmm2-expand-arrow{
width: 10px;
height: 10px;
border-right: 2px solid rgba(19,32,43,0.55);
border-bottom: 2px solid rgba(19,32,43,0.55);
transform: rotate(-45deg);
}
.dsmm2-row.is-active{
background: var(--active);
border-color: rgba(0,0,0,.06);
}
.dsmm2-row.is-active::before{
content:"";
position:absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 18px;
border-radius: 999px;
background: var(--accent);
}
.dsmm2-row[aria-current="true"],
.dsmm2-row.is-active{
background: var(--active);
border-color: rgba(0,0,0,.06);
}
.dsmm2-row.is-active .dsmm2-row-left::before{
content:"";
display:block;
width: 4px;
height: 18px;
border-radius: 999px;
background: var(--accent);
margin-right: 10px;
flex: 0 0 auto;
}
.dsmm2-row-left{
display:flex;
align-items:center;
min-width: 0;
}
.dsmm2-go:hover{ background: rgba(255,255,255,.95); } @media (max-width: 768px){
.dsmm2-dialog{
top: 68px;
width: calc(100vw - 18px);
max-height: 78vh;
}
.dsmm2-body{ height: calc(78vh - 52px); }
.dsmm2-col{
width: min(86vw, var(--col-w));
min-width: min(86vw, var(--col-w));
}
}
html.dsmm2-lock, body.dsmm2-lock{ overflow:hidden !important; }
@media (max-width: 900px){
.dsmm2-cols{
display:flex;
overflow-x:auto;
scroll-snap-type: x mandatory;
gap: 12px;
padding: 0 12px 12px;
}
.dsmm2-col{
flex: 0 0 86vw;
min-width: 86vw;
border-right: 0;
border: 1px solid var(--border);
border-radius: 14px;
overflow:hidden;
scroll-snap-align: start;
}
}