.avop-trainer{
 font-family:Inter,Arial,sans-serif;
 max-width:1200px;
 margin:30px auto;
 color:#17202A;
}
.avop-head{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:20px;
 margin-bottom:14px;
}
.avop-head small{
 font-weight:700;
 letter-spacing:.12em;
 color:#657180;
}
.avop-head h3{
 margin:5px 0;
 color:#0B1F33;
 font-size:24px;
}
.avop-map-toolbar{
 display:flex;
 align-items:center;
 gap:8px;
 flex-wrap:wrap;
 margin:0 0 10px;
}
.avop-map-toolbar button{
 min-width:40px;
 height:38px;
 border:1px solid #DCE3EA;
 border-radius:6px;
 background:#fff;
 color:#0B1F33;
 font-weight:700;
 cursor:pointer;
}
.avop-map-toolbar .zoom-reset{
 padding:0 12px;
}
.avop-map-toolbar button:hover{
 border-color:#0B1F33;
 background:#F7F9FB;
}
.zoom-level{
 min-width:58px;
 text-align:center;
 font-weight:700;
 color:#0B1F33;
}
.zoom-help{
 margin-left:auto;
 color:#657180;
 font-size:13px;
}
.avop-viewport{
 position:relative;
 width:100%;
 height:auto;
 overflow:hidden;
 border:1px solid #DCE3EA;
 border-radius:10px;
 background:#F7F9FB;
 touch-action:none;
 user-select:none;
 cursor:default;
}
.avop-viewport.is-zoomed{cursor:grab}
.avop-viewport.is-dragging{cursor:grabbing}
.avop-canvas{
 position:relative;
 width:100%;
 line-height:0;
 transform-origin:0 0;
 will-change:transform;
}
.avop-canvas img{
 display:block;
 width:100%;
 height:auto;
 pointer-events:none;
 -webkit-user-drag:none;
}
.marker{
 position:absolute;
 transform:translate(-50%,-50%);
 width:38px;
 height:38px;
 padding:0;
 border-radius:50%;
 border:3px solid #fff;
 background:#0B1F33;
 color:#fff;
 font:700 16px/1 Inter,Arial,sans-serif;
 box-shadow:0 2px 8px rgba(0,0,0,.35);
 cursor:pointer;
 z-index:5;
}
.marker:hover{background:#153A5D}
.marker.selected{outline:4px solid #FFC400}
.marker.correct{background:#167C45;outline:4px solid #fff}
.marker.wrong{background:#B42318;outline:4px solid #fff}
.status{
 font-weight:600;
 min-height:24px;
 margin:14px 0;
}
.actions{
 display:flex;
 align-items:center;
 gap:12px;
 flex-wrap:wrap;
}
.actions button,.finish button{
 border:0;
 border-radius:6px;
 padding:12px 20px;
 background:#0B1F33;
 color:#fff;
 font-weight:600;
 cursor:pointer;
}
.actions button:disabled{
 opacity:.45;
 cursor:not-allowed;
}
.next{
 background:#FFC400!important;
 color:#0B1F33!important;
}
.actions span{margin-left:auto}
.finish{
 text-align:center;
 border:1px solid #DCE3EA;
 border-radius:10px;
 padding:45px 20px;
 background:#fff;
}
.final{
 font-size:48px;
 font-weight:700;
 color:#0B1F33;
}
@media(max-width:767px){
 .avop-head{display:block}
 .avop-head>b{display:block;margin-top:8px}
 .zoom-help{width:100%;margin-left:0}
 .actions span{width:100%;margin:0}
 .marker{width:34px;height:34px;font-size:14px}
 .avop-trainer{margin:20px auto}
}