:root{
--ui-radius-sm:8px;
--ui-radius-md:10px;
--ui-border:#d7dde7;
--ui-border-strong:#c7d0de;
--ui-bg:#ffffff;
--ui-bg-soft:#f8faff;
--ui-text:#1f2a37;
--ui-primary:#007bff;
--ui-primary-soft:#eaf1ff;
--ui-control-h:26px;
--ui-select-h:40px;
}

.container, .container *{
box-sizing:border-box;
}

.container{
max-width:1200px;
margin:auto;
padding:15px;
}

.m2-layout{
display:grid;
grid-template-columns:300px minmax(0, 1fr);
align-items:stretch;
gap:15px;
}

.m2-layout > .topbar{
width:300px;
max-width:300px;
height:100%;
background-color:#f9f9f9;
border:1px solid var(--ui-border);
padding:15px;
border-radius:var(--ui-radius-md);
box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.05);
}

.filters{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:10px;
position: relative;
padding-top:2px;
}

.m2-topbar-actions{
position:absolute;
left:0;
top:0;
display:flex;
align-items:center;
gap:8px;
}

.m2-viewer-actions{
position:absolute;
left:10px;
top:10px;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
z-index:3;
}

.m2-action-btn{
display:inline-block;
width:24px;
height:24px;
border:0;
padding:0;
background-color:transparent;
background-repeat:no-repeat;
cursor:pointer;
opacity:.9;
filter:drop-shadow(0 0 1px rgba(255,255,255,.8));
transition:opacity .15s ease;
}

.m2-action-btn:hover{
opacity:1;
}

.m2-action-btn:disabled{
opacity:.35;
cursor:not-allowed;
}

.m2-help-btn{
background-size:100% 100%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23808080' d='M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8s-8-3.589-8-8s3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2m4 8a4 4 0 0 0-8 0h2c0-1.103.897-2 2-2s2 .897 2 2s-.897 2-2 2a1 1 0 0 0-1 1v2h2v-1.141A3.99 3.99 0 0 0 16 10m-3 6h-2v2h2z'/%3E%3C/svg%3E");
}

.m2-share-btn{
background-position:center;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23808080' d='M14 5v4C7 10 4 15 3 20c2.5-3.5 6-5.1 11-5.1V19l7-7zm2 4.83L18.17 12L16 14.17V12.9h-2c-2.07 0-3.93.38-5.66.95c1.4-1.39 3.2-2.48 5.94-2.85l1.72-.27z'/%3E%3C/svg%3E");
}

.m2-download-btn{
background-size:100% 100%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23808080' d='M8 5v2H5v13h14V7h-3V5h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm4-3a1 1 0 0 1 1 1v10.828L14.828 12a1 1 0 1 1 1.415 1.414l-3.36 3.359a1.25 1.25 0 0 1-1.767 0l-3.359-3.359A1 1 0 1 1 9.172 12L11 13.828V3a1 1 0 0 1 1-1'/%3E%3C/g%3E%3C/svg%3E");
}

.latest-run{
margin:8px 0 8px;
font-size:12px;
color:#5f6b7a;
height: 12px;
}

.latest-run.visible{
display:block;
}

.model-info{
display:none;
margin:6px 0 12px;
padding:10px 12px;
border:1px solid var(--ui-border);
border-radius:var(--ui-radius-sm);
background:var(--ui-bg-soft);
font-size:13px;
line-height:1.45;
color:#2a3a4d;
}

.model-info.visible{
display:block;
}

.model-info-wrap{
display:none;
margin-top:10px;
}

.model-info-wrap.visible{
display:block;
}

.model-info-title{
margin-bottom:6px;
}

.filter-field{
display:flex;
flex-direction:column;
gap:6px;
flex:1;
min-width:190px;
-webkit-tap-highlight-color:transparent;
}

select{
height:var(--ui-select-h);
min-height:var(--ui-select-h);
padding:10px;
border:1px solid #ccc;
border-radius:5px;
background-color:#fff;
color:var(--ui-text);
box-sizing:border-box;
}

#m2_nav_controls{
display:flex;
gap:8px;
justify-content:center;
margin:16px 0;
user-select: none;
}

.model_box{
width:var(--ui-control-h);
height:var(--ui-control-h);
border:1px solid var(--ui-border-strong);
border-radius:var(--ui-radius-sm);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
background:var(--ui-bg);
user-select:none;
transition:border-color .15s ease, background-color .15s ease;
-webkit-tap-highlight-color:transparent;
user-select: none;
}

#m2_nav_prev,
#m2_nav_play,
#m2_nav_pause,
#m2_nav_next{
height:50px;
line-height:50px;
width:60px;
}

.step-strip{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-bottom:8px;
max-width:100%;
}

#numericSteps{
justify-content:flex-start;
user-select: none;
}

#namedSteps{
gap:0;
justify-content:start;
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:thin;
}

#namedSteps .step-btn{
height:auto;
min-width:auto;
padding:6px;
font-size:12px;
border:2px solid #e9ecef;
border-radius:0;
transition:background-color 0.3s ease;
}

#namedSteps .step-btn:only-child{
border-radius:10px;
}

#namedSteps .step-btn:first-child:not(:only-child){
border-radius:0 10px 10px 0;
}

#namedSteps .step-btn:last-child:not(:only-child){
border-radius:10px 0 0 10px;
}

#namedSteps .step-btn:not(:first-child){
border-right-width:0;
}

#namedSteps .step-btn.active{
background-color:var(--ui-primary);
color:#fff;
}

.control-title{
font-size:13px;
font-weight:700;
color:#4b5a6a;
margin:4px 0 6px;
}

.interval-strip{
display:flex;
flex-wrap:nowrap;
gap:0;
justify-content:start;
overflow-x:auto;
scrollbar-width:thin;
margin-bottom:8px;
}

.interval-btn{
height:auto;
padding:6px;
min-width:auto;
font-size:12px;
border:2px solid #e9ecef;
border-radius:0;
cursor:pointer;
background:#fff;
color:var(--ui-text);
transition:background-color 0.3s ease;
-webkit-tap-highlight-color:transparent;
user-select:none;
}

.interval-btn:first-child{
border-radius:0 10px 10px 0;
}

.interval-btn:last-child{
border-radius:10px 0 0 10px;
}

.interval-btn:not(:first-child){
border-right-width:0;
}

.interval-btn.active{
background-color:var(--ui-primary);
color:#fff;
}

.step-btn{
height:24px;
padding:0 4px;
min-width:34px;
border:1px solid var(--ui-border-strong);
border-radius:var(--ui-radius-sm);
cursor:pointer;
background:var(--ui-bg);
color:var(--ui-text);
font-size:11px;
transition:border-color .15s ease, background-color .15s ease, color .15s ease;
-webkit-tap-highlight-color:transparent;
user-select:none;
}

.step-btn.active{
background:var(--ui-primary);
border-color:var(--ui-primary);
color:#fff;
}

.step-btn:disabled{
opacity:.5;
cursor:not-allowed;
}

.m2-layout > .viewer{
width:100%;
min-width:0;
height:100%;
background:var(--ui-bg);
border:1px solid var(--ui-border);
border-radius:var(--ui-radius-md);
padding:12px;
text-align:center;
position:relative;
}

.viewer img{
max-width:100%;
max-height:80vh;
}

.viewer.is-panel-step img{
max-height:none;
}

.viewer img[data-enlargable]{
cursor:zoom-in;
}

.viewer-status{
display:none;
margin:0;
padding:0;
border-radius:0;
background:none;
border:0;
max-width:none;
text-align:center;
font-weight:600;
color:#8a94a3;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:100%;
padding:0 12px;
}

.viewer-status.visible{
display:block;
}

.hidden{
display:none;
}

.is-disabled{
opacity:.5;
pointer-events:none;
}

select:focus-visible,
.model_box:focus-visible,
.step-btn:focus-visible,
.interval-btn:focus-visible{
outline:2px solid var(--ui-primary);
outline-offset:2px;
}

.model_box:hover,
.step-btn:hover,
.interval-btn:hover{
background-color: var(--ui-primary);
color: #fff;
}

.model_box svg{
fill:currentColor;
height:32px;
vertical-align:middle;
}

@media only screen and (max-width: 736px){
.container{
padding:10px;
}

.m2-layout{
grid-template-columns:minmax(0, 1fr);
}

.m2-layout > .topbar{
max-width:100%;
width:100%;
}

.filters{
flex-direction:column;
}

select{
width:100%;
height:var(--ui-select-h) !important;
min-height:var(--ui-select-h);
line-height:calc(var(--ui-select-h) - 2px);
}

#m2_nav_prev,
#m2_nav_play,
#m2_nav_pause,
#m2_nav_next{
height:32px;
line-height:32px;
width:40px;
}

.model_box svg{
height:28px;
vertical-align:middle;
}
}